Class project: mobile web redesign (July 2020)

Can online grocery gateways provide more than groceries?

Fresh City Farms provides quality organic produce straight from local Ontario farms not readily found in most regular grocers.

How can we connect more farms-to-tables?

What’s the problem?

With few preconceived notions of how the Fresh City Farms (FCF) experience could be improved I conducted user research to identify potential needs:

• qualitative interviews with 5 households
• each with different levels of familiar with online grocery gateways

By synthesizing the interview data I converge on 3 recurring sentiments:

1. users want to avoid getting the wrong items
2. the transparency of pricing is paramount
3. the experience of inspiring culinary experimentation is absent.

“I never know what to make for dinner. I wanna try [cooking] new things.”

— User Interview 5

Sentiment #3 in particular was a non-obvious finding and no existing grocery gateway addressed this issue. It presented an opportunity to explore a new feature which will:

• inspire shoppers to try new ingredients
• maintain shoppers’ control over purchasing decisions
• incur no extra cost and inconvenience for shopper and provider

Exploring solutions

Base on these research insights I decided to focus on creating a ‘suggested recipe’ section. I generated ideas by sketching out how the new feature might be presented right below the ingredient product page.

The pen sketches ended up being too rough even for a lo-fi prototype. I built a mid-fidelity prototype with Sketch + InVision instead for usability testing testing.

The users were tasked with getting all necessary ingredients to make a “Steak Frites” dinner. The recipe section would allow the users to add all necessarily ingredients to make the dish.

Feedback from multiple rounds of testing revealed on several major pain points:

• suggested recipes were being confused for products
• unclear copy writing (“What’s for Dinner?”) hindered navigation
• dense text blocks overwhelmed users

The new look

Continuous testing and design iterations further refined the look and feel of the high-fidelity prototype:

Major changes from early builds include:

• collapsible product descriptions provided more screen real estate
• edited copy writing for clarity
• improved informational hierarchy through colour and font choice

Before & after

Here are some comparisons between the original and the revised mobile site:

Style Guide

Post-game debrief

This project being my introduction to UX design impressed upon me the logic of the design process. Several insights gained throughout the experience will surely become my guiding light for the rest of my career.

• effective research will challenge assumptions and reveal subjective blindspots
• properly conducted ethnographic research will generate hidden opportunities
• copy writing can critically lead/mislead users
• when the experience works it’s taken for granted; the UX designer should be invisible to the user using the product

My role

• UX research
• UX design
• UI design