— PROJECT NAME
Clementine
— CLIENT
Personal project
— ROLE
Sole Designer
— DATE
July 2023 – March 2024
— TECHNOLOGIES USED
Figma, FigJam, Google Survey, Pencil and paper
A prototype for a recipe keeper and meal planner app that allows users to upload, share, and review each other’s recipes. Clementine encourages users to explore new recipe and meal plan ideas in one convenient app while also sharing the joy of cooking among users.
The inspiration for this prototype came from a real pain point I personally experience when searching for recipes, which is that I have to search across many different websites, videos, or posts to find the perfect recipe. Clementine resolves this issue by delivering user-generated recipes that anyone can view, all in one app.
Prototype
Below is the final prototype of the app in Figma. Scroll down to learn how and why I reached this final design.
Justification
Before I even touched the Figma editor, I needed to justify why I even wanted to create Clementine. As touched on in the introduction, the inspiration for Clementine comes from my own experiences with finding recipes. Often, finding the perfect recipe involves long amounts of time browsing various websites, watching Youtube videos, and overall it is a time-consuming process. My goal was, in essence, to reduce the amount of time it takes to search for recipes.
Competitive Analysis and User Research
Once I determined the use cases for Clementine, and before finalizing the requirements, I needed to see how other competing recipe keeper apps worked, the features they had, and any pain points a user may face while using them.
I also conducted a user survey which I posted on Facebook to understand how people search for recipes and create meal plans. The results of my competitive and user analyses would be used to hone in the requirements I will set for the final design.
Requirements
After studying other apps and receiving some responses from my survey, I focused on functionality. From there, I created the requirements. The requirements would determine the main features of the app as well as some additional nice-to-haves. Each of the high priority requirements would represent the main pages of the app which are accessible by the bottom menu bar, while the mid-priority and low priority requirements represent features that would be accessed within the main pages.
I also devised user stories to better understand the types of users that would use my app based on my research above.
Lo-fi Wireframes
I needed to determine the optimal user flows, which I started by creating pencil-and-paper wireframes. For these wireframes, I dedicated each of the primary requirements to its own "main page," i.e. the pages which are accessible by the menu bar. This is because each of the high-priority requirements represents a primary function of the app.
Transferring to Figma…
I then recreated the wireframes in Figma, making changes as necessary to better suit the requirements. Below are some examples of wireframes I created, including the final wireframe which contains all the pages and user flows.
Branding
Branding
Next, I decided on how I wanted to brand Clementine, along with the color palette. I wanted the app to have an inspirational feel to it, so I went with orange as the main color of the app. The app name was inspired by the color palette.
Final Design
Finally, I created the prototype in Figma. I modified some of the pages from the wireframe because I realized some of the functionality was missing or could be better displayed. An example of this is how I added tabs to the “Your Recipes” page to delineate between recipes the logged on user has created and the recipes the user has saved. I also stripped back the “Search” page to only display previous searches. Originally I wanted to have that page have similar functionality to Spotify’s search page (which features several categories that the user can select to find items along with a search bar to type in searches), but I removed this in my final design to factor in a keyboard appearing when the user taps the search bar.
Final Thoughts
Overall, I think the app turned out well. The app’s aesthetic was well received, and I think most of the pages look and feel clean. Additionally, I think the app achieves what I wanted it to, which was to allow users to add, save, and share recipes, create meal plans and grocery lists, and have their recipes be shared with other users.
However, there are some things I would change if I revisited this project:
-- I would move the recipes and meal plans the user created such that they could be accessed from the user’s profile page. This way, their recipes and meal plans would all be in one place.
-- Add functionality to let users browse categories in the search page, which was my original intention, as this gives users another way to find recipes if they don’t have any recipes in mind to find.
-- Consider moving away from the minimalist aesthetic. I wanted primarily to focus on functionality while keeping the UI simple, but the UI in its current state is rather plain. To inspire creativity, I would consider leaning to a more cartoon-like or hand-drawn look.
-- Consider moving the “confirm” icons (denoted by check marks) to the bottom right of the screen from the top right to make it easier for users to confirm their selections.
-- Make the “save recipe” icons (denoted by bookmarks) larger, along with making the recipe thumbnails larger such that each category displays two recipes in a row (the user can scroll left and right to view more recipes in the category). This will make it easier for users to save recipes.
-- Make it more obvious that the user can scroll left and right to browse recipes in a category by showing a small portion of the recipe thumbnail to the right of the rightmost recipe.