Prepboard
A recipe saving, organizing, & sharing platform.
Role
UI Designer
Duration
1 Week
Deliverables
Wireframes • High Fidelity Prototype • Landing Page
UI Designer
1 Week
Wireframes • High Fidelity Prototype • Landing Page
Prepboard is a recipe saving, organizing, and sharing platform. As such every design decision has been made to support that. The other factor that affected the design was the user persona.
For this project, we got a pretty well-defined brief. It outlined the reasons, instructions, and content for the design. Also included was the user persona, and the color and text style guide. For the content, we had the site map in order for us to understand the user’s flow through the site.
The document provided the text for the screens as well as a list of requirements for the navigation. To keep track of all them, I used the document content to set my Trello boards. Prepboard is a recipe saving, organizing, and sharing platform. As such every design decision has been made to support that. The other factor that affected the design was the user persona.
The user persona was for a woman n her 40’s raising her two kids with her husband. She obviously enjoys cooking and finding new recipes to try out. She frustrated with how hard it is to share recipes and wishes there were easier way to do so but also to keep track of them all. Foodreau is a recipe saving, organizing, and sharing platform. As such every design decision has been made to support that. The other factor that affected the design was the user persona.
Even though wireframes were not required for this project I still started off there. This kept me from nitpicking and polishing components needlessly. Allowing me to focus on the structure, placement, and hierarchy of the pages. Once done with the desktop wireframes.
For this project not only did we had to design the app or service but also the landing page, sign in and sign up pages as well. For the main home page the brief called for this page to be where users had their recipes, this way they could find and share them quickly. In order to make the most of the screen real estate I decided to go with a card grid.
While designing the initial card I realised two things, the first one is that if I changed the shape I could show more of the image. The second one—it looked boring. But more on the first one, I did two more versions one with an assymetric image and one with a round bottom. Thinking of recipes and how they’re usually shown, which is rounded in plates, the better choice was the rounded one.
After increasing the fidelity of the designing the end-result was the card below. Which was further developed in its high fidelity stage.
For the recipes page I wanted to segment the information as much as possible. Between the list of of ingridients, the list of steps and the other additional information such as prep and cook time, and portion yield, it was too many lists for people cooking. So I broke down all the additional inofrmation (prep, cook time, portion yield, etc.) into a grid so it easier to parse. I also added icons for this section as it would make it easier to find the information the user would be looking for when glacing back at the screen.
For the high fidelity designs, I went back and re-familiarize myself with a style guide. We didn’t have to use all the colors in the style guide only those we thought would work best and use them in a consistent way. I ended up using all of the blue shades in the style guide to my surprise.
Foodreau is a recipe saving, organizing, and sharing platform. As such every design decision has been made to support that. The other factor that affected the design was the user persona.
The darkest blue (#0F5157) I used for regular text and secondary headings. The second blue (#242D8F) for main headers and the third one (#3350CC) for buttons and navigation. The next two (#97A0FC, #CED2FD) I used sparsely and with the third blue (#3350CC) in places like icons or buttons. The last blue (#FAFAFF) I used as a background color for the testimonial section.
The two greys where used for the filter buttons. The darker one as an active state, the second as inactive. The first yellow shade was used as an accent color and to differentiate between the hamburger menu and filter menu on mobile as they both come from the left side. The pale yellow was used in many places instead of pure white.
The recipes page draws from Pinterest which users will likely be familiar with. Pinterest has a good navigation system with tons of content across many topics. The “My Recipes” page it’s a collection of information. Because of this cards need to have a name and brief description. Unlike Pinterest which is image-based browsing. Foodreau’s only topic being recipes means the cards images are sized to fit, and all the cards have the same size.
The differences in the cards mentioned above mean we can have an aligned grid. Giving the user a sense of organization as mention in the user persona. This also makes the content more browsable for both looking up recipes and sharing them.
I designed the cards in “my recipes” section in a way that will bring as much information as possible. Each card has a classification label for what type of food it is. There are four into a total for breakfast, lunch, dinner, and dessert. Then there’s the recipe’s name, description, and a call-to-action to go into that specific recipe. The card also has a favorite and share buttons. The share button is important as the user persona says she would like to share her recipes in a quick and easy way.
Given the screen’s size constraint for the mobile version of the cards. I only kept the most important elements. Which were the image, name, label, and a favorite and share buttons. The affordability here it’s expanded since the user is using their finger — so I did away with the call-to-action. For the cards in the mobile version, I changed the display from a three columns grid to a two columns one because of the size constrain.
The recipes page draws from Pinterest which users will likely be familiar with. Pinterest has a good navigation system with tons of content across many topics. The “My Recipes” page it’s a collection of information. Because of this cards need to have a name and brief description. Unlike Pinterest which is image-based browsing. Foodreau’s only topic being recipes means the cards images are sized to fit, and all the cards have the same size.
The differences in the cards mentioned above mean we can have an aligned grid. Giving the user a sense of organization as mention in the user persona. This also makes the content more browsable for both looking up recipes and sharing them.
Once the user has clicked on a recipe they’ll be able to access all the information related to it. First, they get an image of the finished product. Followed immediately by the share and print buttons, again as stated in the user persona. After this we get a brief description followed by the information required to cook the meal.
These components are made of three elements an icon, a header, and text. The icon lets the user know the different types of information are. Since recipes are not memorized users will be using Foodreau while cooking. Which means they’ll be glazing back and forth between the screen and cooking. As they become familiar with these icons it becomes easier to find the one they’re looking for. The headers are bolded to give it a higher place in the hierarchy. While the text is italicized so it’s even easier to distinguish.
While doing research one recipe site had the same icons for prep time and cook time. Which I thought could be confusing with the user shifting their view from the screen. While these two icons circular shapes make them similar they’re distinctive enough. Also, the timer one used here should be familiar to users as it’s featured in other applications and home appliances.
After this, we have the ingredients and directions. This is where the bulk of the text and information lies. To differentiate between the headers and the text between these two large blocks of text. A large header would be needed. Especially if the user is scrolling fast. This led me to offset the header all the way to the left. This makes the page more scanable as users only have to look to the left to find the section they’re looking for. At the bottom of the page, we have the notes sections but this would appear if the author, or user, puts one there. This also follows the same structure.
The meal information section is the only part that breaks this grid. I also gave it enough white space on the top and bottom. By using the icons, placement in the grid, and spacing it stands apart from the other sections.
The sous chef feature would further help users in their cooking. By converting the recipe page from a static one into a dynamic and interactive one. This feature would allows the user to track their progress with the recipe directions by delineating a step-by-step process. Also by providing users a timer that they can start, pause, or stop. The sous chef would be with our users every step of the way.
Other features:
• Recipe browsing page
• Related recipes
• Granular filtering and …
• Labeling of recipes
• Exporting ingredients as a shopping list
• Different methods to measure ingredients
As a personal stretch goal I’ll turn these designs into HTML and CSS.The document provided the text for the screens as well as a list of requirements for the navigation. To keep track of all them, I used the document content to set my Trello boards.Foodreau is a recipe saving, organizing, and sharing platform. As such every design decision has been made to support that. The other factor that affected the design was the user persona.
While in the course of doing all this work I found that I didn’t check the Trello cards as I should’ve and missed some things. Those missed items came up in the reviews. So I went back and not only made sure they were on my lists but that they got done. Next time I have to make sure my list contains only what’s necessary. And that everything that doesn’t belong in a list goes in the task description.
I’ll start this one by saying that I both understand and agree with the mobile first approach. I find it easier to design for desktop with all its content and then to edit it down for mobile. Versus designing for mobile and then add things. When designing for a page with its essentials is harder for me to then add stuff and not think of them a superfluous. I might need to re-examine my point of view on this.
This comes up in the heels of the previous topic. As resizing the content from desktop to mobile, or vice versa, it’s always a friction point. Even with the Anima plug-in. I may need more practice with it.
All in all, everything went well enough. I was able to finish the task close enough to my estimated time. And finished the project well before the time it was due. I keep learning about myself and my process and makes notes of my weaknesses and areas where I can improve. I enjoyed designing with the constraints of the style guide. Especially since typefaces with rounded ends are my least favorites. Additionally, I didn’t agree with the color choices but not only did I make it work — I am pleased with the results.
“Design is what you make of it.”