Case Study: NoWhey!
A plant based recipe app
Role : UX/UI Designer, Brand Design
Introduction
It can be a challenge to find healthy, easy, and organized plant based recipes for cooking at home. Once you’ve sifted through countless recipes online, you find your new favorite stir-fry, and haven’t saved the recipe to make it again. NoWhey! was looking to create an app with a user-centric approach by adding features and flows that make it delightful for people to use by helping them keep recipes organized and easily accessible. Their brand had not be defined yet so they left it up to me to find who makes up NoWhey’s audience, and what the competitors are doing so I could propose and design a unique brand, and what values are important for the company.
Research
The goal here was not to create a whole new recipe app experience, but to refine the process of discovering great plant based recipes and allow users to take notes and save them for later.
Competitive Analysis
All of the competitors had similar goals and UX elements like applying filters and various food categories. The two “Other” competitors were different due to not exclusively catering to a plant based diet, but still had great app designs for me to analyze. My market research covered the importance of humans consuming less animal products, as well as the benefits of cooking a meal at home.
Personas
Based off my findings from the competitive analysis, I was able to create two different target users for Nowhey! Even though their motivations differ, both personas represent the purpose of Nowhey’s new app, to have easy access to healthy plant based recipes.
Information Architecture & Interaction Design
User Flow
Creating the user flow was a great way for me to really think about how the app will be laid out. I had looked at and tested a few different recipe apps and this flow made it much easier to move forward with a task flow and some quick sketches and wireframes.
Sketches of the original login/sign up page as well as homepage, and recipe page.
Wireframes displaying a flow from the loading page to a recipe. For the homepage I wanted the recipes to be easily accessible, so I used a horizontal scrolling component with the recipe titles below each card. I chose this pattern to minimize the endless vertical scrolling when recipe image take up the entire width of the screen. This useful pattern is commonly used in many podcast and music apps when there is a lot of information to display within categories, so I drew inspiration from there.
Branding & UI Design
I have to say that establishing the brand for NoWhey was my favorite part. I was striving for the app to have an energetic feel while still being quite minimal.
Icon Sketching
I decided on a word mark over a pictorial mark since the name has a playful twist on the word whey (which is a byproduct of milk/cheese). Kinda like telling someone that this recipe is deliciously plant based and doesn’t contain any dairy…”no way!”
The Icon
I found a common theme within my sketches, I then chose a google font that was a great fit, Chewy, and played with the movement of the letters and gave it some character. The spinach leaf was a cute idea, but could be hard to identify at a smaller size, so I kept it simpler.
Style-tile
I chose a cool toned analogous color scheme to represent NoWhey. The hues chosen are energetic, friendly and familiar. I wanted the images of the food to be the focus, so I chose a high contrast background of a blue-white and the text is a very dark grey. The font Rubik supported the minimal feel I was hoping to achieve through out the app.
UI Design
One thing I dislike about some food blogs is the way they’re laid out. As a reader I have to scroll through paragraphs of stories about the author and why this recipe is the best thing ever. To keep the user experience enjoyable and efficient, I kept the summary separate from the important bits like the ingredients and directions, and notes. Here you can see that the interaction for the notes page changed. Now the text field is always editable by just a tap and the note will be there when you need it later.
I followed material design for the filter page which proved to be very intuitive to people based off my user testing. That interaction received a usability score of 85.
Using material design again, I wanted to have the user testing participants search for a specific ingredient and have those corresponding recipes display by following the same layout as the homepage.
User testing
I had a total 17 participants and received an overall usability score of 82. Overall I’m pleased with the score and would move forward with an additional round of remote user testing when the app is developed further.
Reflection
I learned a lot from this project, not only was this my first end-to-end app design and branding, but I was able to learn more about material ui design and applying those patterns. The benefit of using material ui is that the app instantly becomes more familiar to the user, which will allow them to learn the app faster and use it more often when they need to discover and collect new delicious plant based recipes.