UI/UX Project
Body Blend
The Challengue
Design a website for a startup company who sells healthy personalised meals.
Every customer should be able to add or remove ingredients from each category.
Precise nutritional values of every personalised meal must be displayed.
Every customer should be able to add or remove ingredients from each category.
Precise nutritional values of every personalised meal must be displayed.
Objectives & Goals
Create an user-friendly and clean website to drive customers to buy personalised healthy meals in an easy-direct way.
The ultimate goal is to boost sales by 25% by the end of its second year on the market after launch.
How We Did It?
Research
Imagine
Test
Design
Business Challengues
Provide a system for order customization.
Detailed Nutritional Information & Customization.
User-Friendly Online Ordering & Meal Planning.
Provide clear prices for the different meal’s options.
Target Audience
Young adults of age group 23 - 35 whom want or need a healthy life style, workout and have middle income capacity.
Research
We conducted a market research targeting similar business as well as user personas (three types) surveys.
Findings
User Needs
Order healthy food online.
Visually Appealing & Mobile-Optimized Design.
Educational Content & Dietary Guidance.
User wants always transparency about the pricing information.
Design Process Link
Intuitive and Visual Ordering Flow
Clear and Accessible Nutritional Information
Product Personalization
User Persona
Emily Ash
Young Healthy Adult
Profile
25 years old
New Jersey
Bachelor' D
Employee
Maslow Pyramid
Goals
To build a career that provides a healthy work-life balance to maintain her wellness routine.
To train for her first half-marathon while exploring new, healthy sushi and vegetable recipes.
Frustrations
Finding it difficult to afford quality, fresh ingredients like sushi on an entry-level salary.
The stress of a new job makes it challenging to wake up for morning runs.
Key Points
Believes a healthy body keeps the mind healthy.
Like to walk or run in the mornings
Love sushi and veggies.
User Persona
Aaron Shore
Gym "Junkie"
Profile
28 years old
New Jersey
Bachelor’ D
Entrepreneur
Maslow Pyramid
Goals
To expand his fitness brand by launching a successful online coaching program for a global audience.
To push his physical limits by training for and winning a major national fitness competition.
Frustrations
Struggling to find enough time for business administration tasks while maintaining his own training schedule.
Clients ignoring his professional advice and then complaining about their own lack of fitness progress.
Key Points
Gym is his life.
Control and check the type/amount of food.
Like to participate in different physical activities.
User Persona
Kathy Smith
Need to lose weight
Profile
27 years old
New Jersey
Technical
Employee
Maslow Pyramid
Goals
To save enough money to buy her own condo with a dedicated home theater room.
To secure a promotion to a regional management position for better pay and hours.
Frustrations
She feels judged for her lifestyle but lacks the energy or motivation to change it.
Feeling constantly exhausted and stressed from the long, irregular hours demanded by her job.
Key Points
Love junk food.
Workout is not a priority for her.
Enjoys staying at home watching movies.
General Workflow
Sitemap Structure
Workflows
Scenario 1
User wants to create and purchase a personalised meal according with his/her needs.
Scenario 2
User wants to purchase a Ready-To-Go Meal.
Typography
Lato
Sans-serif
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Example
Name
Size
Fuel Your Goals!
Title
72px
Fuel Your Goals!
Heading
48px
Fuel Your Goals!
Sub heading
32px
Fuel Your Goals!
Body
26px
Fuel Your Goals!
Body Light
26px
Fuel Your Goals!
Body Bold
26px
Fuel Your Goals!
Body Small
20px
Fuel Your Goals!
Body X-Small
16px
Colors
#008080
#ffd700
#303a43
#a0a0a0
#efeddf
#e0e0e0
#008080 (8%)
Web Breakpoints
Desktop devices
1440px
Laptop devices
1280px
Tablet devices (landscape)
1024px
Tablet devices
992px
Mobile devices (landscape)
768px
Mobile devices
390px
Layout Grid
Desktop Grid: Five Columns System
Mobile Grid: Five Columns System
Buttons
Desktop
>> Text Buttons
>> Icon Buttons
Mobile
>> Text Buttons
>> Icon Buttons
Software
Figma
Artboards Designs
Adobe Illustrator
Vector Edition
Adobe Photoshop
Image Edition
Adobe Acrobat
Assamble/Share
WordPress
CMS
Oxygen
Code Builder
Sketches
Home Page
Desktop View
Mobile View
Cloud Computing Page
Desktop View
Mobile View
Infrastructure as a Service Page
Desktop View
Mobile View
Free Assessment Page
Desktop View
Mobile View
Appointment Page
Desktop View
Mobile View
Booking Page
Desktop View
Mobile View
Sketches
Home Page
Create Page
Meals Page
Cart Page
Checkout Page
Track Order Page
Wireframes
Home Page
Desktop View
Mobile View
Cloud Computing Page
Desktop View
Mobile View
Infrastructure as a Service Page
Desktop View
Mobile View
Free Assessment Page
Desktop View
Mobile View
Appointment Page
Desktop View
Mobile View
Booking Page
Desktop View
Mobile View
Wireframes
Home Page
Create Page
Meals Page
Cart Page
Checkout Page
Thank You Page
Mockups
Home Page
Desktop View
Mobile View
Cloud Computing Page
Desktop View
Mobile View
Infrastructure as a Service Page
Desktop View
Mobile View
Free Assessment Page
Desktop View
Mobile View
Appointment Page
Desktop View
Mobile View
Booking Page
Desktop View
Mobile View
Mockups
Home Page
Create Page
Meals Page
Cart Page
Checkout Page
Thank You Page
