Project overview

Salad Delivery Service

My Role

UX Design
User Research
Information Architecture
User Flow design
Low Fidelity Wireframe design

Design Tools

Axure – RP
Adobe Photoshop
Adobe Illustrator
Adobe InDesign
Adobe XD

UX Deliverables

Information Architecture
Site Map design
Low fidelity Interactive Prototype/Wireframe
UI and UX design
High Fidelity Mockup Design
Design concept presentations to project team


Saladaze is a fresh foods restaurant that specializes in healthy, organic vegetable salad delivery

Main target audience
Busy working professionals, who are health conscious and want to save time during their lunch break.

Affordable $8 – $12

Brand slogan
Saladaze… so fresh and so green! We use organic farm fresh, all natural ingredients to make great tasting salads just the way you like it.

UX Strategy
User Needs

The website needs to enable the user to:
• Find out if the restaurant delivers to their area
• Order food online
• Allow user to create an account
• Allow user to order without an account
• Pay with credit card, Paypal or cash on delivery
• Check status of order
• See order history and repeat previous order
• Write reviews on delivery service and food quality

Client Needs

The website needs to enable the client to:
• Sell food online that will be delivered
• Provide a system for order customization
• Work with GrubHub/DoorDash delivery services
• Emphasize health benefits of plant based diet
• See who are the most frequent users
• Track most popular menu
• Update order status


As a result of user research 3 archetypes were identified to create personas

  1. The Calorie Counter
  2. The Vegetarian
  3. The Active Gym Member
The Calorie Counter

The Calorie Counter

The Vegetarian

The Vegetarian

UX Design Deliverables
Information Architecture: Site Map

Based on the client needs and user needs analysis, the site map was designed to help illustrate a high level structure of the site.
It also shows how the various pages are related to each other.


Site information architecture

User Flows

These are some sample user flows for the main features of the site.

Saladaze User Registration Flow

Saladaze User Registration Flow

Saladaze Oder Salad Flow

Saladaze Oder Salad Flow

Low fidelity wireframes

After making some changes to the site map and user flows, low fidelity wireframes were developed that visualize the layout and hierarchy of the page content

Saladaze home page wireframe

Saladaze – home page

Saladaze - customize your salad

Saladaze – customize your salad

High Fidelity Mockups – design exploration

After the low fidelity wireframes were completed and reviewed, the next step was visual design exploration. This involved a lot of research and browsing several design styles and approaches to color themes, typography, photography and design systems.

Saladaze-home page style exploration

Saladaze-home page style exploration

Saladaze- customize salad page style exploration

Saladaze- home page style exploration

High Fidelity Mockups – final design

Following several tweaks and design modifications, the final UI design was developed. This includes logo design and branding, color palette selection, UI component design and so on

Saladaze Mobile App High Fidelity Mockups

Saladaze Mobile App High Fidelity Mockups

Saladaze home page final mockup

Saladaze home page final mockup

Saladaze - customize salad mockup

Saladaze – customize salad mockup