4 Dinr
Mobile App Design
My objective was to design a recipe app that could be easily accessed during cooking and gave just the right amount of information.
Project Duration: Jan. 2022 to April 2022
My Roles: Lead UX Designer, UX Researcher, UX Writer and No Code App Developer.
UX Designer and Visual Artist Robert Scott shaped the UI and high fidelity design
Tools Used: Figma, Google Sheets, paper, Air Table, Bravo Studio App
The Problem
People want to easily access recipes without having to read blogs or advertisements or scroll endlessly through unnecessary information while cooking.
The Solution
To create a mobile experience that would allow users to easily choose and view recipes while cooking.
The Impact
This design would allow a user to access recipes on their phone while cooking, without having to browse the web or search through saved bookmarks or photos.
The Research
I conducted a competitive audit of the most popular recipe apps, compiled the information I would include and did card sorting exercises to understand how to best organize the information. I did a handful of informal interviews. I assumed that people needed to be able to consult recipes while they were cooking or shopping and didn’t need to read blogs about someone’s grandmother or what cavemen actually ate.
Competitive Audit
Current apps offer a lot of possibilities, but their organization is complex and finding the things you really want is difficult unless you create an account, subscribe and sign up to save favorites.
Ideation
I thought of a lot of ways to display recipes in the kitchen, including adding smart screens to appliances or asking an artificial assistant to read or play recipes for you, but those ideas may not be feasible at the moment. Most people do hold phones in their hands, however.
Card Sorting
There are a lot of ways to organize recipe information so I asked people to organize the recipes I would include in initial designs. Meals, snacks and sides won!
Wireframes
I just wanted people to be able to simply find the recipes they needed while cooking without having to do a lot of scrolling . People could choose their recipe category from the home page of the app. A bottom bar would allow people to move easily through the application.
Usability Study Findings
I tested the app with users in person and remotely. I found that not every user understood that the logo would take them home. Some users would rather learn from videos as opposed to reading. Users also said they would like calorie and serving information.
BEFORE
I also discovered that I couldn’t use Benton Sans and had to settle for Liberation Sans as well.
AFTER
I had to darken some of the colors for accessibility and I added text under the icons and made minor changes
BEFORE
AFTER
Most changes took place on the tab bars, because in development we discovered that back interactions didn’t work as intended. The No code developer app also forced us to move the choose button.
High Fidelity Testing
After trying to build this in Bravo Studio, a no-code developer app, I had to make a few changes to the design, including building a back button on every page. I also had to modify the design to ensure that it would look good on all phone models. After kitchen testing, I increased the space between lines of text on recipe pages to make them easier to scan while cooking.
In subsequent iterations, I also added a search function to quickly search for recipes and a way for users to add their own recipes to the app to share with others.
Next Steps
In future iterations, I would include a method that would allow users to favorite recipes and create their own lists.
