It’s called Foodreau, a recipe sharing web app.
As a UX design student at Lambda School, my very first project was to design a recipe sharing web app called Foodreau. Below, I’ll walk you through my project and design process.
Project Goals
Given a one week time period, my class was given the task to create the user interface for Foodreau’s recipe-sharing responsive web app. We were to treat the project as if we are UX designers on Foodreau’s team. Our main goal was to provide a simple, easy-to-use experience for less technologically-savvy users to manage and share their recipes.
Audience
Our target users enjoy cooking and sharing recipes, but aren’t technologically-savvy or they frequently interact with technologically unsavvy people. Please review the following user persona for additional details. Refer to it frequently throughout your design process to ensure you are designing for your users.
Style Guide
We were given a specific style guide to follow. Below are the color palette and typography details.
Site Map
We were given a site map for an overview of how all of the pages should connect together.
The Design Process
I designed the Foodreau app to be compact and easily navigatable. The colour palette that was used consisted of dark and light blue colours as well as yellow. I chose the backdrop for the logo to be a yellow circle to catch attention. Inside of it, I placed the word Foodreau.
Landing Page
The desktop landing page is visually appealing. I added icons to demonstrate most of the subjects. For example, in the About section, I used icons that demonstrated the concepts “organized, shareable and safe.” For the testimonials, I used a dark mustard background colour because I wanted this section to be prominent. The unique colour will draw users to notice it and in result, read the testimonials. Testimonials help achieve customers because they can positively influence them. It assures people that the company is worth being a part of. The logo is placed at the top, middle of the page because I wanted it to be the focal point. Behind the logo, I added a low-opacity image so that the UVP and Join Now button are prominent. I chose the blue-purple background colour for the Join Now button because it’s different than the rest of the colours on the landing page
Sign In & Sign Up Page
For both the Sign in and Join forms, I used the same background colour which is C4B331. It’s a dark mustard colour. I chose this as the testimonial background colour as well and wanted to stay consistent. In my opinion, this colour is dark and prominent on the page which catches attention. I left the logo and UVP on both pages because I felt that users would feel reassured by reading the UVP when completing the form to join.
Recipes Page
In the recipes page, I included a header with a grey background. This header includes a search bar and “add recipe” button. I included four recipes on this page so that users can see how the recipes are organized. Again, I used the dark mustard colour for the background. I included an image of the food along with a one-sentence description. The very first recipe on the page is the recipe I was working with for the project. I decreased the image opacity for the rest of the recipes because they are not being hovered on.
There’s a “view recipe” button which has a grey background and yellow font. By clicking this button, users are able to access the full recipe. I chose this design for the button because yellow is a colour that drives attention. Also, at the bottom of the page, I added a “click for more” button so that users can have more recipes load if need be. I chose to only limit the page to 4 recipes because I felt it looked more organized and still left some whitespace on the page.
Single Recipe Page
In the recipe page, I included “edit, print, share” icons so that it’s easy to tell what each button does. Underneath those icons, I included two rectangles. The first one displays the source and yield. The second one displays prep time, cook time, oven temperature. I did this because I wanted the most important details to be right underneath the image and be organized in such a way that users do not have to scroll through the recipe. Also, I added the ingredients to the right-hand side of the page so it’s easy to know what is being used in the recipe. The recipe is situated at the bottom, centre. I numbered the directions for convenience and organization.
Things to work on in the future
Completing this project was a great learning experience. It required focus and attention to detail and I am glad I was able to create a design from scratch. However, I do feel there are things I could have done better and will aim to do better in the upcoming projects. Here are some of the things I’ll be more mindful of.
- Limit the use of dark colours to logos and text. Don’t make background colors dark as well.
- Leave more empty space behind images and text. It will make the design look less crowded.
- Make sure the spacing is equal between buttons, text boxes, images, etc. Symmetry makes everything look appealing.
I look forward to sharing my future projects!
