top of page

Laruta

Client

Google UX

Design Certificate

Year

2021

Concept website for a recipe blog with a niche in dietary restrictions. Focus on both blog style recipes and video tutorial content. 

201-Laruta-Mockup.png

Personas

Site Map

Wireframes

High-Fidelity UI

Alignment & Grid

Where

Montréal, Quebec

Role

Designer, Researcher

What

Native Mobile App (IOS)

Category

Recipe, video tutorial, culinary

Why

Portfolio Project

When

October 2021

Personas

humphrey-muleba-Cc-CQTUkbH0-unsplash.jpg

Age
41

Education
Bachelors

Hometown
Lisbon
 

Occupation
Stay at home dad

Lucas Silva

Goals

Have a go-to place to find recipes that work with our dietary restrictions and lifestyle.

Discover new and fun recipes my kids and my partner and I will like.

Frustrations

Searching through google for recipes can be overwhelming on a tight schedule.

My son has dietary restrictions, finding classic recipes with variations can be difficult to find.

Lucas is a stay at home dad who loves getting to spend his days with his two young boys. Prior to becoming the full-time stay at home parent, Lucas worked as a yoga instructor at a local fitness studio. He still substitutes classes from time to time, making his schedule busy. He loves to cook for his family, and with his two boys, letting them play and experiment as they cook together. He’s limited on time, so he has many cookbooks, but with his youngest son having dietary restrictions, it can be tough finding traditional recipes with optional ingredients. Lucas would love a more streamlined way to quickly access recipe options, see substitutes and be able to do that with ease from his phone or tablet.

"“There’s nothing better than having fun cooking
a meal together with my partner and boys!”"

joshua-rawson-harris-YNaSz-E7Qss-unsplash.jpg

Age
33

Education
Bachelors

Hometown
Copenhagen

Occupation
Accountant
 

Natalia Velky 

Goals

No-brainer go to website for recipes that I can access quickly via phone

Have a mix of classic and new dishes that can be customized based on dietary restrictions

Frustrations

Endless options online for recipes, but oftentimes doesn't include all the dietary restrictions I have

Wishing there was a recipe site that had the ability to select multiple dietary restrictions to find recipes

Natalia is a busy young professional who likes to eat health consciously but also has a number of dietary restrictions that make this difficult and options limited. The restaurants and cafes near her work rarely have options that she can eat, so she's needing to make or prep most meals on the average day. She's looking for a website where she can select her various restrictions and see a variety of recipes to choose from.

"I don't have time to endlessly search the web typing in key words for my dietary restrictions! I wish there was an easier option that didn't feel so time consuming."

Site Map

To outline all the necessary functionality of the app, I created a simple flow diagram of the main actions a user can take. Does not include fail state flows to avoid legibility issues.

Project2-Sitemap.jpg

Low-Fidelity Wireframes

Hand-drawn and digital low-fidelity wireframes.

Project2-WireframesProcess.jpg
Project_2-_Homepage_Wireframes_edited.jpg
Recipe-Desktop.png
Homepage-Mobile.png
Homepage-Desktop.png
Recipe-Mobile.png

High-Fidelity UI

For the branding I wanted a feeling of grounding, a bit trendy with the logo but overall a more neutral tone to not compete with the inevitable variety of colours in the food photography and video content.

Colour Palette

Font

Work Sans
AaBbCcDdEeFfGgHh
Poppins
AaBbCcDdEeFfGgHh

Laruta-StickerSheet.png
Components.png

Desktop Homepage

MockUp-Homepage-Desktop.png

Mobile Homepage

MockUp-Homepage-Mobile.png

Desktop Search

MockUp-Search-Desktop.png

Mobile Search

MockUp-Search-Mobile.png

Desktop Recipe Page

MockUp-Recipe-Desktop.png

Mobile Recipe Page

MockUp-Recipe-Mobile.png
185-Laruta.png

Alignment and Grid

Designed using a 12 column grid. I kept the spacing similar throughout the website using mainly 45 pt and 40 pt increments for spacing between elements.

201-single.png

45pt

40pt

40pt

45pt

45pt

Macbook Long Scroll Mockup-Laruta.png
bottom of page