Foodreau: Recipe Sharing Made Simple

Week 5 in UX Design at Lambda School is Project Week, which demonstrates all of the skills and concepts learned over the last four weeks in a realistic project setting. In just four weeks we’ve covered visual hierarchy, color theory, responsive design, UI states, and CRUD (just to name a few). This project entailed creating user interfaces for a recipe sharing web and mobile app called Foodreau. The final result is to create two high-fidelity prototypes that are a responsive experience. The color palette, text scale, user persona, content, and site map were all provided, so most of my job was determining an appropriate layout and visual hierarchy.

I began my design process by creating a Trello board. A made a card for every page I needed to design (10 required and an additional 4 as goals) and included page requirements. This would serve as a centralized place to view acceptance criteria and to help both myself and my project manager keep track of my progress over the week. Then I began studying the user persona. Who was going to be using this product? Why? My user is a mother in her 40s that lives in the city who loves cooking and sharing recipes with her family. Her mother is not tech savvy, so she would like to find an easier way to share recipes with her instead of having to type them out. She also needs a better way to quickly search through her recipes. This app needs to be user-friendly enough for an older woman to feel comfortable and confident using it, while also functional and visually appealing enough to hold the attention of a woman in her 40s. Recipes need to be easy to input, sharable, and printable.

Next, I searched Dribbble for food and recipe mobile and web apps. Since I didn’t have much control over colors, I was mostly focused on studying the layout and hierarchy. I found ten that I added to a bucket and focused in on those. Each one used beautiful imagery of food as an attention grabber. Every actionable button was their brand color and had a lot of contrast from the background. Some were more aesthetically pleasing than others, but I saw how they could be a bit more confusing to use. Since I wanted my apps to be food-image heavy, I also searched Unsplash for images and inspiration. While research is crucial to the design process, I limited myself to a little less than two hours of research for this project in order to manage my time efficiently.

Since it was a requirement to design a responsive experience, I took the mobile-first approach and began designing a low-fidelity wireframe for my mobile app’s landing page. In hindsight, I’m really glad that’s the route I went because it wasn’t difficult to expand all of that information to a desktop-sized screen, as I imagine it would’ve been to try to condense everything. I was fortunate that all of the necessary content was provided so that I could design for the appropriate amount of text. I started designing the hero section of the landing page. I knew I wanted a nice image of ingredients to take up most, if not all, of the background that existed above the fold. The UVP was provided, but I had the freedom to come up with the CTA button text and decided on “Let’s Cook!” I saw an example on Dribbble that had the navigation bar at the bottom of the screen, so originally I was going that route. I put organized my About section with cards and used proximity and the rule of odds to group them. I used the Gestalt Principle of similarity to group the About cards, but also differentiate them from the testimonials, which are also cards. For the pricing section, I consulted with Foodreau’s CEO (my instructor) and asked about what the biggest goal is right now. Was it to acquire a lot of users right away or try to make revenue quickly? He said since Foodreau is a new company, the focus is user acquisition and then getting them to pay. So with that in mind, I used the figure/ground Gestalt Principle to prioritize the free plan first, then the pro plan. For the Pro Plan, I used bold text to highlight the perks of paying.

Once that wireframe was done, I began adding color and making a more high-fidelity design. The blueish-purple and yellow accent would not have been my first choice for a food app (unless it was targeted for fans of LSU, Minnesota Vikings, or LA Lakers), but I worked with what I had. I figured this was a good learning opportunity since I might end up working for a company where the color palette is already decided. I used a background image that had chopped ingredients on a yellow background. I moved the navigation bar to the top of the screen since less tech-savvy users would are more accustomed to looking there first. As I’m looking back on this, I’m able to see some inconsistencies and flaws with the design. For example, my CTA button is the brand color, no other button is. It wasn’t great, but it worked enough for the time being so I moved on.

Next, I created high-fidelity designs for my Join and Sign In pages. I didn’t wireframe them first because in my mind I had a pretty straightforward vision of how the forms should be set up. I added the options to sign in with Facebook and Google in order to help the user start cooking quicker.

All of that took me a full Lambda-day, but I spent a couple of extra hours that night working on pages that would show the user’s recipes. I didn’t design wireframes first here either, and I probably should’ve because I ended up redesigning the layout at least three times. Originally I had both a horizontal and vertical navigation bar. I didn’t feel that the horizontal bar was enough to have the logo, search bar, recipes button, profile button, and a logout button. However, I eventually realized that horizontal space is a luxury when designing for mobile. I ended up having the main navigation bar with a logo and search bar, and a sub-nav bar with the buttons. I changed the colors around to really make sure that the company’s primary brand color is what stands out the most. I also discovered a Sketch plugin called Stark that helps with making sure my text is readable for color-blind users.

Over the next couple of days, I worked completed the mobile app and created high-fidelity designs for the web app. Again, designing mobile-first made designing for web a lot easier. I showed my work to a friend of mine who is a UX Designer and he gave me some great feedback on my use of color. He recommended not using the brand color as a background because it can get difficult to look at after a while but to definitely use it for buttons. He said you want the user to associate your brand color with action. I took his feedback into consideration and made the changes. I ended up finishing the whole project a day early. So I spent my last full day getting everything as pixel perfect as I possibly could. I made sure all of the buttons had the same background color and shadow color across both apps. I decided to make my web app a little more interactive, so I created some new screens to demonstrate hover and error states for the Join and Sign In Pages. The additional goals for the project were to create an Add Recipe Page and Edit Recipe Page. I wanted to fully design for CRUD so I gave the option to delete a recipe and made a confirmation pop up screen for it. Seventeen screens later, I was finally finished and worked on learning some more interaction skills with InVision Studio. I focused on the web Landing Page with hover effects on the buttons, a moving background for the About section, and the plans growing and shrinking based on hovering over it in the Pricing section.

Overall, I’ve learned so much over the last five weeks and really got to reinforce those skills with this project. My main takeaways are to design mobile-first, nail the visual hierarchy with low-fidelity wireframes, consistent colors, and to keep it simple. Five weeks down and 25 more to go!

Mobile Prototype | Web Prototype | Interactive Web Landing Page

If you have any feedback or recommendations about this article or my prototypes, please leave a comment below! Also, feel free to contact me on social media:

Twitter | Instagram |LinkedIn | Email: kaylahrox@gmail.com