.png)
Role: UX/UI Designer
Responsibilities:
Market Analysis | User Interviews | Wireframing | User Interface | Prototyping | Testing
Tools:
Figma | Miro | Whimsical | Pen & Paper
*Ortaliza is a real company in the Canadian market. This project was designed for educational purposes only.
To be able to redesign a responsive and user-friendly website that addresses both business and users needs, it was crucial to understand:
To achieve this goals, I divided my research plan into three phases:
I divided the competitive analysis in two phases:
I also conducted an interview with the client to understand more about their business, vision, and goals:
After the market and competitor, I interviewed three potential users, young professionals between 30-35 years old, to discover more about their eating habits and microgreens consumption.
Then, I used an empathy map to summarize the key findings, main gains and pain points, to later define a persona. The empathy map exercise and results can be seen below:
Based on research findings and the empathy map, I identified the motivations, frustrations and most common behaviors among potential users in relation to buying and consuming microgreens.
I focused my research on these type of users as two other personas had already been mapped by the stakeholder:
Based on the persona's goals, motivations and frustrations, I identified three potential factors to user's stuggles and with those needs in mind, created problem statements to guide me through the design process.
Later, I gathered and reviewed all my findings to develop a feature roadmap.
.png)
Before starting to sketch a few layouts for the homepage, I thought about the sections were important to be on this page. Considering the business needs and user research, I defined the sections:
After meetings with the client and some consideration, we agreed that the current website did not make it clear how clients could buy microgreens with Ortaliza. So we decided to use the hero section of the homepage to inform the three ways users could buy:
Other must-have sections according to research and business needs were products; and an educational section on How we Grow and why choose microgreens.
For the products screen, we had a challenge. Microgreens have different grow periods and not all of them would be available for harvest any time. Besides the search bar and the filtering options, we decided to divide the page into two sections:
For the detailed product screen, we decided to create pairings tags and a recipes section to help users understand how a specific microgreen can be used, since lack of knowledge was one of the pain points discovered.
With the use of components and variants, I was able to prototype a comprehensive filtering system, composed by dropdown menus and checkboxes.
After defining user flow, UI elements, visual patterns, and components, I started designing and prototyping in hi-fidelity.
Designing responsive screens for a website with such intense content and imagery was a challenge. My decisions were made with reducing user cognitive load in mind:
After discussing with colleagues and reviewing the wireframes, I made some last call changes:
However, I decided to keep the pairing tags and recipes section on the individual product screen.
This solution was developed to help users decide wether that specific microgreen is ideal for their needs, as not knowing how to select or pair microgreens was one of the frustrations that came up in the research phase.
I conducted four tests with users between 25 and 40 years old with some knowledge about microgreens. The goal was to test the buying microgreens online and checkout flows, with a focus on the efficiency of product filters and search bar.
* Sessions were conducted via Google meet, where participants shared their screens while performing the tasks.
Find a microgreen that is a Herb with citrusy taste. Once you find it, add a 50g package to cart, with pick-up date set to Friday, Nov 12, 11AM - 12PM.
Find the Arugula, Wasabi. Once you find it, add a 25g package to cart, with pick-up date set to Friday, Nov 12, 11AM - 12PM.
Based on the usability testing results I did four main iterations on the prototype:
As 3/4 participants didn't notice the product image was clickable, some of them missed the product description page, affecting the buying experience. To fix that, I added a tag "view more" to the card hovering state.
Most users mentioned they would like to see recipes suggestions or information on how to use the product, but 3/4 participants missed this section, although most of them noticed the pairing tags next to the product description. So I brought this section closer to the product information.
2/4 participants got a little confused with the checkout page as they were expecting a log in screen. Initially, the idea was to have a one screen checkout page for those who didn't want to create an account, with an option to create one after checkout. But testing showed the importance of a log in screen, so I added to the design.
2/4 testers missed having a message saying the confirmation has been sent to their email or a indication where they could review their purchase, so I added this information to the confirmation page copy.
.png)
.png)
.png)
