Case Study: Grow, Gather & Co.

Making sure their ingredients are only hard to find in nature

Role

UX designer and researcher

Team

Solo project

Tools

Figma, User Research, Usability Testing, Pen and Paper

Timeline

September-November 2020

(1 month)

What It Is

Rare, local ingredients – delivered to your doorstep

Grow, Gather & Co. is an online ingredient supplier, which opened their services to Toronto's general public in response to restaurants and shops closing down due to COVID-19. They provide hard-to-find ingredients that typically are only available to chefs. Their goal is to support local food suppliers and help keep their businesses running amidst the global pandemic. When it comes to shipping, they prioritize the health and safety of suppliers, drivers and customers.


A screenshot of Grow, Gather & Co.'s current website.

The Challenge

Reorganizing the pantry

For some of my interview participants, Grow, Gather & Co.'s selection of ingredients can be as overwhelming as it is intriguing, especially for those who were only starting to look for rare and Canadian-grown food supplies for the first time. 

Even at the earliest stages of this process, I was already learning new things about users' behaviours when shopping for groceries (or anything else) online. I realized that people like reading about what they're shopping for, especially from a niche website like Grow, Gather & Co. I also realized I didn't understand how crucial landing pages are in defining how a user experiences a website. Participants from both my user research and usability testing immediately made assumptions on Grow, Gather & Co. as a company once they arrived at its landing page.

Equipped with all the data I gathered, I was able to distill one main goal for this project:

 

The Objective

Leaving the foraging to wild mushrooms

As I mentioned earlier, a lot of Grow, Gather & Co.'s products are new territories for a lot of users. For my user research participants, this led them to be curious and explore the website with an open mind. However, it also made them more susceptible to confusion, especially with how products were organized: Instead of displaying each item separately, they were all nested under one "option" which starts at $0. This meant that users had to click through various drop-down menus to see each product's name and price. Some products also didn't come with photos, and even if they did, some users couldn't tell what the photo was if they were looking at less-common ingredients.

Because of this, I think Grow, Gather & Co.'s website can improve vastly with a redesign of their information architecture. Their content needs to be organized in a way that allows users to see each item individually while still logically grouping them in certain categories. Each item's page should also give users a better sense of what they are so that they can feel confident in what they're purchasing.

To help ensure that my end design is backed up by research and ample ideation, I followed a process heavily influenced by the double diamond model:

Discover  →  Define  →  Develop  →  Deliver

 

Discover

Research, Gather & Co.

Through a mix of in-person and online interviews, I asked each of my five participants open-ended questions about their current grocery-shopping habits, what they prioritize when choosing where to shop, and how their experiences could improve. Afterward, I asked them to visit Grow, Gather & Co.’s website and to narrate their thought process as they scrolled through. Throughout these two activities, I took notes with pen and paper, writing down a mix of paraphrased and verbatim quotes. Below is an empathy map that summarizes what users experienced during the user research process:


Empathy map from user research

 

Define

Key observations and insights

During the user research process, all five of my participants gave helpful feedback based on pain points they came across while browsing the Grow, Gather & Co. website. From their feedback, I've developed two key problem statements, which serve as the basis for my prototypes and usability testing: 

1. Our curious reader has the problem that there is no form of organization when searching for suppliers and their stories. Our solution should present information more logically so that users have an easier and more pleasant reading experience.

2. Our humanitarian has the problem that there is no option to tip drivers when at the checkout point. Our solution should make this option easier to access so that users can acknowledge drivers' hard work.

 

Develop

All about first impressions

After gathering and synthesizing data from my user research, I went straight to pen and paper and began sketching new designs for Grow, Gather & Co's landing page and purchasing flow. One big criticism from my user research participants was that the current landing page was slightly cluttered. They were also disappointed that the images weren't links to products, so they felt like it was a  waste of space.


Proposed Solutions

I want to redesign the landing page in a way that is engaging and, after a quick glance, gives users an idea of their brand personality. I suggest including featured products to make the most of its real estate.

I also want to ensure that its purchasing flow feels intuitive and almost mimics the way someone would normally purchase ingredients in a market. I suggest listing items individually so that users have a better sense of the website's selection.

To test out my new design for Grow, Gather & Co.'s landing page and purchasing flow, I decided to give my usability testing participants the task of purchasing 1 lb of salmon.

Preliminary sketches

 

Deliver

The test kitchens

Paper prototype

My first attempt to address this challenge was creating a low-fidelity prototype for a participant to flip through on video chat. Once I was satisfied with my final sketch, I cut several rectangles of dotted paper and taped them together, accordion-style. I used a highlighter to colour in the call to action button and salmon so it was easier for the participant to see it through my webcam. 


Participant feedback

Overall, the participant found the task of purchasing 1lb of salmon easy to complete with the paper prototype. They immediately made use of the categories listed on the Shop All page to eventually find the salmon product page. They wished that there was an option to add the item to their cart without having to visit the product page.

Paper prototype of purchasing flow

 

Current product page vs. prototype product page

Usability testing: Figma prototype

With Figma, I aimed to create a higher fidelity prototype that would give testing participants a better sense of how shopping on Grow, Gather & Co.'s website would look and feel like. I observed other e-commerce websites, including Loblaws, Hudson's Bay and Aritzia to find similar patterns in their purchasing flows. This included categories, ratings and comment sections, the option to create an account. 

Through video chat and in-person interviews, I facilitated three usability testings with my Figma prototype. Like with my paper prototype, their task was to purchase 1lb of salmon. 

I ended each session with the following questions:

  • What are your thoughts on the overall experience?
  • What did you like?
  • What didn't you like?
  • Based on your experience, what idea do you have of the company's personality?
  • How could your experience improve?

Participant feedback

Similar to the paper prototype, all participants found that shopping through the prototype felt simple and intuitive. Two of the three participants found themselves wanting to browse other items first before finalizing their salmon purchase. They were happy with how the product page had information on the product, a rating system and information about the supplier. This, in turn, made them feel more confident with purchasing the salmon.

All participants weren't interested in creating an account and opted to continue as a guest user, so I decided to remove the option to create an account, just like the original website. After using the prototype, all participants got a sense that Grow, Gather & Co.'s products are curated and niche, mainly from the photographs and emphasis on suppliers and their stories. They also liked the option to tip drivers right before heading to checkout, although one person noted that it was unexpected.

Figma prototype (For best results, view in fullscreen mode)

Usability testing: Key findings

1. Even if users intend on purchasing just one specific product, they'll still browse through other products on the site before making a decision.

Because they were able to get a bird's eye view of several products on different pages, all participants found themselves curious about hamburgers, produce baskets and more. They were even curious about items listed on the landing page, the product page and the "thank you" screen. One person noted that if they ended up enjoying their salmon, they would come back to the website and explore all the other options they saw. 


2. People want to know the stories behind their ingredients.

All participants enjoyed reading about the people who supply salmon for Grow, Gather & Co. Some even found the summary to be too short and were curious to know even more details about them. Along with reading the bio on the product page, participants were also curious about the "Our Suppliers" section and would see themselves reading through other supplier stories.


3. Tipping drivers is important, especially during the pandemic.

When the option to tip appears right before checkout, all participants said that they would definitely leave a tip for drivers. They appreciated that, alongside the suggested percentages, there was an option to add their own custom amount. They found it convenient that the option comes up right before checking out, since it makes sure that they don't forget to do it.

 

Style Guide

Presentation is key

I decided to keep Grow, Gather & Co.'s monochromatic colour scheme so  that the photos of products are the main focus. This gives it a minimalist and sophisticated look. The only pop of colour is the yellow used for star ratings. I kept the same serif font for headings, and chose a clean and modern sans serif font for body text. All assets have minimal design and follow the same monochromatic colour scheme.

My proposed style guide for colours, typography and assets.

 

Key Takeaways

Food for thought

Redesigning Grow, Gather & Co.'s website was an excellent way of learning key lessons about UX research and design. I learned several things that I didn't know before about users and how they shop for groceries online. This includes:


1. It usually only takes one quick glance for a user to make assumptions about the company.

Participants from both my user research and usability testing noted how Grow, Gather & Co.'s colour scheme, typography and photographs were key players in how they perceived the website and company. They knew right away that the experience would be more sophisticated and expensive compared to a chain grocery store. From these visual cues, they understood that the products were of higher quality and harder to find.


2. Users want to explore as much of a website as possible before committing to buying a product.

Even though usability testing participants knew exactly what they needed to look for, they wanted to look through as many of the pages as they can to get an even better sense of where their money is going towards. Some also wanted to find items that potentially would pair well with the salmon they intended on buying. 


3. Most users don't want to create an account with a website, at least for their first purchase.

When I still had the option to create an account available on my Figma prototype, all participants chose to continue as a guest instead, which took them to the checkout portal. Most participants didn't immediately see the benefit of creating another account, as they already have too many accounts to keep track of.

 

Other Recommendations

From A to Z

If I had been given more time, I would have also reorganized the way suppliers are listed in the "Our Suppliers" page. Currently, there seems to be no listing system in place. One participant from my user research noted that the long list made them feel overwhelmed. They wished that the suppliers were listed alphabetically. I would also suggest providing the option to filter suppliers by what kind of ingredients they supply and where they're based. 

Using Format