Project Background
As an insatiably curious person, an online course related to my career and passion is just too good to pass up.
The RecipeRun mobile app was my final project for a UX Design course at UC Berkeley, one of many online courses I’ve taken over the years. What you’ll find here is an incomplete prototype, but a thoughtful process with a smorgasbord of UX methods that only an academic project could present so densely.
RecipeRun is a grocery delivery mobile app that enables users to find recipes they love, with instructions they can follow, and have all of the ingredients delivered directly to their home. They can enjoy cooking the recipes themselves, just the way they like it.
UX Processes Featured:
→ Competitive analysis
→ Contextual inquiry
→ Storyboarding
→ Paper prototype
→ Prototype
→ Usability testing
Competitive Analysis
Assigned to design a new grocery delivery app, I started by conducting a competitive analysis of two grocery stores I was familiar with, creating a SWOT analysis of their features, market placement, pricing, and more.
Contextual Inquiry
Next, I conducted a contextual inquiry, accompanying a user on a grocery store visit to observe their behavior and asking questions to gain a more complete understanding of their needs.
A key insight from this exercise was that a physical grocery store is actually a wonderful interface for many users, and a successful grocery app would need to be able to solve a user need that can’t be accomplished in a physical store.
It would need to be something that only technology could make possible.
Storyboarding
So many UX rituals are related to aligning stakeholders.
If stakeholders have the time and patience for the ambiguity of discovery, storyboarding can be a great activity. It helps the team understand the user problem to solve, allows space for how we might solve these user problems, and what the outcomes might look like.
The low-fi silliness of storyboarding can leave space for half-finished ideas, creative impulses, and an innovative approach to user problems. This is especially useful in serious, delivery-focused teams that want to jump directly to solutions before clearly defining the problems.
It was during storyboarding that the concept for this app emerged. This would be an app that would allow users to order not just individual ingredients, but all ingredients for a full recipe, complete with cooking instructions and convenient home delivery. Think Blue Apron, but fresh and affordable from your local grocery store.
Paper Prototype
I almost always sketch out my UI concepts on paper first, but I rarely go so far as to make a paper prototype. I find that with most stakeholders, paper prototypes are a step too far in testing their patience for design rituals. As a designer, though, I definitely found benefits in committing ideas to a physical medium. But much like the sketches I often do of my UI concepts, it’s a useful step that is best kept to myself unless the project calls for it, as this one did.
Here a user walks through a signup and onboarding process with the paper prototype I built.
(Data is blurred for privacy.)
High Fidelity Mockup
I built this prototype in Figma, although I tend to have a slight preference for Adobe XD after spending so many years in the Adobe Suite. I leaned heavily on food photography and a simple color pallette of white, black, blue and orange. I took inspiration from some of my favorite apps - DoorDash, Amazon, FreshDirect, and the excellent website of my local grocery store, Safeway.
As this was an academic exercise, I wasn’t exhaustive in my creation of screens and views. I took the project through the main processes of sign-up, onboarding, and the primary screens of check-out.
Usability Testing
Well! Never is there such a humbling experience as usability testing in UX design. A designer’s best laid plans show their flaws instantly, and new - often more urgent - problems present themselves. Fascinatingly, the things I expect to be problem are almost never the problem!
The testers I recruited for this project were unimpressed with the concept, dubious of the onboarding process, and immediately exhibited flaws, mistakes, and edge cases I hadn’t considered. Better now than after development, amiright?!
I love the process of usability testing, as cruel as it can be. This is the part of the process where the poor assumptions of the designer are really squeezed out of the product, and better ideas bubble to the top. Foundational UX research is important, but usability testing is critical.
As an academic exercise, this was the end of the process - though in a start-up it would be just the beginning! I hope this has given you a better understanding of my process for UX design and stakeholder engagement, and if you like what you’ve seen, let’s connect to discuss further!