Ortaliza is an urban vertical farm store that grows and sells microgreens in the Canadian market, mainly through retail and subscription plans. As an early stage startup, they want to expand the business by increasing online sales and offering memberships plans to more regions in the province of Ontario.
The Challenge.
Redesign their current website to make it responsive and to increase online sales, provide clearer information to customers regarding services and products, and improve navigation.
Research Phase.

To be able to redesign a responsive and user-friendly website that addresses both business and users needs, it was crucial to understand:

  • The company's business model and its short/long term goals
  • The users' habits, needs, and pain points.
  • The microgreens industry, and competitors' best practices.

To achieve this goals, I divided my research plan into three phases:

  • Stakeholder interview.
  • Competitive and market analysis.
  • 1:1 user interviews.

Competitve Analysis

I divided the competitive analysis in two phases:

  • An online research to understand the microgreens industry overall and identify good practices.
  • Analysis of two competitors and two benchmark companies in aspects such as business model, web design strengths and weaknesses.

Key Findings

  • Most microgreens businesses are family owned.
  • Local and small to medium scale production
  • Products are sold mainly in farmers' markets
  • Some companies started offering subscription plans or online sales due to covid-19 pandemic.
  • Most websites include a full catalog of products, info about production, and how to use the product (pairing tips or recipes).

Stakeholder Interview

I also conducted an interview with the client to understand more about their business, vision, and goals:


  • People want to live/eat healthier.
  • People have a hard time sticking to healthy habits.
  • People don’t like/want/have time to cook healthy meals.
  • People will more and more appreciate the value of fresh food/produce/ingredients.
  • People will more and more subscribe to food/grocery delivery services.


  • We can help change people’s relationship with food.
  • We believe microgreens are a convenient, easy, and fun way of eating healthier.
  • We can help people stick to healthy eating habits through our subscription plans.

Short-term Goals

  • Increase sales by 80% in-store.
  • Double the number of subscribers.

Website Goals

  • Bring the experience of the store by showing their production process, the microgreens varieties, educational resources, pairing tips, etc.
  • Contribute to the increase of online sales and subscription plans.

1:1 User Interviews

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:

Defining a Persona.

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:

  • Female users, between 30-40 years old, with a busy/active life and young family, in search of work-life balance and better eating habits. Usually subscriptions customers.
  • Retirees that values an active and healthy lifestyle. Usually loyal customers that buy in-store.
Framing the Problem.

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.

  • Availability (only available at farmer's market, not year round).
  • Small variety of microgreens.
  • Lack of knowledge of microgreens.
User Flow.
Based on my research findings, and considering the business vs users needs, I designed what would be an ideal flow for buying microgreens on Ortaliza's website. I included in the flow the two main paths the user could choose from: subscribing to a plan vs buying products individually.
Sketching Solutions.
For the purpose of this case study, I decided to follow with a single path, the shopping for microgreens individually, as this would give me more space to brainstorm solutions and features like product filters, delivery and pick up availability.

Homepage Sketches

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:

  • Subscription CTA
  • Buy Microgreens/View Catalog CTA
  • How we grow section
  • Our Store/ Why us?
  • Newsletter subscription
  • FAQ (optional)


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:

  • Subscribing to a plan.
  • Buying online.
  • Visiting the store.  

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:

  • Availble this week.
  • Next Harvest.

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.

UI & Design System.


  • Client already had their logo, colour palette and trypograhy defined, so no branding material was created for this project.
  • I created, however, all UI elements and patterns, interactotions, as well as most of the copy.
  • Illustrations and imagery were provided by the client.

Selecting Typography & Colours

  • I use their primary font, Font 22, used quite subtly, only with larger headlines, and defined a more internet friendly font for smaller headlines and body text.
  • The palette was quite extensive, so I decided to use basically the cyan and yellow(ish) primary colours for UI elements like buttons, and more neutral colors for other elements.
Hi-Fidelity Screens.

After defining user flow, UI elements, visual patterns, and components, I started designing and prototyping in hi-fidelity.

Designing Responsively

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:

  • For most content, I decided to stack elements below each other, mostly for sections that had a maximum of three card or elements
  • The only section I decided to keep the horizontally scrolling was products as this section had more then three cards.

Product Cards

After discussing with colleagues and reviewing the wireframes, I made some last call changes:

  • Instead of a 6 column product card, I opt for a 4 column to give more visual balance to the screen.
  • I also decided to display all products at once, instead of dividing by sections, including filters  so user's can view all products or filter according to their needs. In this layout, availability info is provided in the products card, and products that are not available appear with a disabled add to cart button.

Pairing Tags

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.

Testing the Prototype.

Monitored Testing

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.

Task 1

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.

Task 2

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.

Summary of Results

Overall Feeling

  • All participants completed the given tasks with ease, some with minor issues.
  • Participants found the visuals and UI clean and easy to navigate.
  • Main issues were regarding the product card interactions and content on the checkout flow.

Common Pain Points

  • 3/4 participants didn't notice the product image was clickable.
  • 3/4 participants didn't notice the recipes section at the individual product page, but mentioned they expect something similar.
  • 2/4 participants expected to be able to log in at the beginning of checkout flow.
  • 2/4 participants didn't understand why some products weren't available (harvesting schedule)

Based on the usability testing results I did four main iterations on the prototype:

Product Card

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.

Recipes Section

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.

Checkout Page

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.

Key Takeaways.


  • How to design responsively.
  • The importance of balancing business, users, and design goals.
  • Components are a great way to save time and keep the design consistent.

Next Steps

  • Test prototype again after iterations.
  • Design the subscription flow and other pages.
More Projects.

Get in touch.