UI Study of Garniche — A Recipe App
Welcome back to Garniche! This is the continuation to the UX Research case study blog you might have read; if you have not checked the said blog then please check it here!
In the previous blog we covered the UX part of the Design Thinking Process where we discussed ‘Empathize’ and ‘Define’. We now know what our user is like and what are their priorities. Here, we are going to cover the UI part (Ideate, Prototype and Validate) of our app. This one’s going to be lengthy so please bear with me and let’s jump into it!
Ideate
Through the user interview insights from the UX Research we know what our priorities are and based on those priorities these are the features that I came up with for Garniche.
- Sharing Feed — User can share their photos and experiences here
- Add your own recipe — User can add their own recipes in this section for the community to see and use.
- Create events — User can create and host events and invite people from the community to attend them.
- Audio assistance — A major chunk of the interviewees said that they love to cook listening to music so they always have their headphones connected, also they don’t want their phones to be sticky :P
- Sorting options — User can search for recipes according to the available ingredient, their allergy, diet, preparation time etc
- Shopping list — User can add the ingredients of a certain recipe to their shopping list just with one click so that it is easier when they go to shop.
After figuring out the features I started working on my LoFi wireframes
Prototype
I am going to give life to my LoFi wireframes by adding colors, structure, fonts and pictures. I will also try to explain why I have decided to go with certain designs and transitions.
The On-boarding Screens
On-boarding screen is basically telling your users what are they signing up for. In my case I have 3 main features in my app which are; Sharing with the community, adding own recipes and an option to add things to your shopping list which I tried to convey here with images and text. The thin layer on top of the images creates a hierarchy where the first thing you notice is the text and then the image.
Login/Sign-Up Page
You can skip the login/signup procedure but you will have restricted experience in the app, for example; you won’t be able to rate or review any recipe, you won’t be able to add recipe or share anything to the feed. Basically all you can do here is browse for recipes.
Preferences Screen
Recipes
This section includes the first screen that comes after you set your preferences; Recipe, add recipe, saved recipe, main recipe screen with ingredients and direction.
Recipe Main Screens
The ‘home’ icon gets you to the main screen that has recipe and feed. The recipe tab has cards that you can choose from. Once you have chosen the appropriate card you will find recipes in that particular list. Each recipe is a card that has all it’s details on it. Saved recipes has a green “bookmark” on the top right of the card. Each card has a ‘chef hat’ icon or a ‘person’ icon which indicates if the recipe is by the chefs or by the community.
Recipe Screen
The ingredients and direction goes up when pressed on. This slightly transparent bottom sheet animates on-screen, allowing the user to see the main recipe screen beneath it. These stacked layers shows the user that they have not navigated to a new screen, but are instead interacting with a sheet above the content they were just viewing.
Add a New Recipe
I kept the “add recipe” as simple as possible and similar to the actual recipe screen.
Sharing Feed
I have kept the profile and the feed template similar to that of Instagram to give it a sense of familiarity.
My Events and Add Events
My events is in a card format where each card is an event. The card has the name of the event, by who it is created, an image(optional), date, time, description and buttons for you to decide if you are interested or not where ‘yes! I’m interested’ will be selected by default.
The template of add events is a simple form with input boxes for the name of the event, description, date, time and image.
Miscellaneous (Search, Menu & Shopping List)
Search option has a lot of filters using which the search can be filtered to exactly what the user wants. These filters are preset according to the preferences but they can be changed too.
The menu tab is accessible from any screen of the app. There is a prompt button the top bar when pulled down will open the menu tab.
That was the end of the third stage of Design Thinking Process; Ideate. Phew! I know it’s a lot to take in at once but honestly the designing part was really easy because half of my problems were solved in the research part. The insights I got from research really helped when it came to UI. But wait! I am not done yet.Let’s move to the last part of design thinking. Bear with me please :)
Validate
The tests went very well as most users felt that the design was very straightforward and easy to understand. They also stated that they will consider using this app.
I was told that the flow is kinda unclear but that was adjusted with more screens. Most of them spoke about the colors of the app; how calming and refreshing they are.
Style Guide
I worked a lot on the combination of colors that I wanted to use. It took a lot of trial & error to finally settle on one!
Conclusion
I can’t believe how long this blog is! I do realize that the ‘Prototype’ section is kinda boring because there’s just a lot of things going on there. I tried to make it as concise as possible.
This project was really exciting. I got to learn so much when it came to the designing part. I finally learnt how to use golden ratio (blog coming up soon). It took me approximately 3 weeks to finish the entire process (I know! too slow). Thank you so much for surviving my blog!
Do leave a clap and follow me for more blogs! :)
PS: Also for the millionth time, do check my UX research case study for the same app here
