Client:
Dunbar Pizza & Indian Food
Role:
UX/UI Designer, Researcher, Visual Designer
Project Type:
UX/UI Design, Research, Branding, Prototyping
Tools Used:
Figma, Maze,
Year
2022
View Prototype
*This is a project done as part of Designlabs UX Academy
ASTRA Mockup Laptop & Mobile
*This is a fictional project, consisting of fictional destinations.
*The following Background and Goal sections appear in the crawl in the video above.

OVERVIEW

Client: ASTRA
Project type: UX/UI Design, Research, Branding
Role: UX/UI designer, Visual Designer
Timeline: 12 weeks
Tools Used: Figma, OptimalSort, Maze
Background

DINNER TIME

Dunbar Pizza & Indian Food is a single local restaurant in Vancouver that has specialized in serving Pizza and traditional Indian cuisine for 17 years in the Kitsilano area as well as the area around The University of British Columbia.

The Problem

WHERE TO ORDER FROM?

Dunbar Pizza & Indian Food seems to suffer from multiple problems, a few pertinent ones include:

  • Branding themselves, as they have 2 websites that display different restaurant titles and look very different from each other. One site is located here, and their current site as confirmed by the restaurant is located here.
  • On Skip The Dishes, they are "Dunbar Pizza & Grill" while on Doordash they are "Dunbar Pizza & Indian Food"
  • Their Facebook page advertises themselves as “Dunbar Pizza & Indian Grill”
  • Passing the restaurant itself, they have a banner on their window saying "Dunbar Pizza & Grill"
  • Their apparent main website has certain UI problems that could prove problematic, for example; I was able to add x99 chicken to a pizza with no change in price, which definitely sounds delicious, and I'll need to remember to get a Diet Coke with that for reasons.
  • A few of their current coupon deals seem to be glitched in that you can select items not part of the coupon and add them and still redeem the discounted price from the coupon.
Project Goal

FIRE UP THE OVEN

The goal for this project is to create a singular website for this restaurant and to create a unique universal brand in order to not confuse users who wish to order from them. Along with creating a singular website, I wish to target certain problem areas on their current site and utilize user research findings to improve their current ordering process.
Design Process

AND, HERE. WE. GO

RESEARCH

DEFINE

IDEATE

PROTOTYPE

TESTING

1
2
3
4
5
Research Goal
Competitive Analysis
Comparative Analysis
User Interviews & Survey
User Persona
Empathy Map
Product Goals
Card Sorting
Site Map
Task Flow
User Flow
Wireframes
Responsive Design
Visual Design
UI Kit
High Fidelity Wireframes & Prototype
‍
Usability Testing
Affinity Map
‍

RESEARCH

Research Goal

SEEKING GOOD KORMA

The research goal for this project was to better understand users' current food ordering habits and to find out what drives them and dissuades them from ordering food from a restaurant. I also wanted to dig into what features of a restaurant's website were the most appealing and/or unappealing to users and why.
Competitive Analysis

ANOTHER ONE BITES THE CRUST

I conducted a competitive analysis of the major competition around the location of Dunbar Pizza & Indian Food. Alongside the major popular pizza chains, I also focused on other smaller local restaurants that offer a very similar menu of both pizza and Indian cuisine.
Comparative Analysis

THERE IS ANOTHER..

I also proceeded to conduct a comparative analysis of the two websites for Dunbar Pizza & Indian Food that are currently live. I analyzed both sites and compared their strengths and weaknesses to each other which gave me an idea of how I wanted to approach my redesign.
User Interviews & Survey

NAAN STOP INPUT

Time for reviews, I conducted a few user interviews and created an online survey to get a better understanding of user food ordering habits, key motivations, and pain points.
  • Most participants stated that the first thing they notice when viewing a restaurants website is the quality of images for their food followed by the presence of any discounts/deals.
  • Bad reviews and "older looking websites" were common dissuading factors for users.
  • In regards to ordering pizza, the majority of user's immediately stated Domino's because of their affordable prices and deals.
  • In regards to Indian food, most participants stated that they have ordered it before and enjoy it immensely, especially hybrid combinations such as a "Chicken Tikka Pizza". However, they would unlikely order a separate Indian dish along with a pizza.
Some key findings from the survey which was taken by 18 participants are listed below;
47.4%
42.1%
89.5%
73.7%
57.9%
31.6%
Order food from restaurants usually once a week
Utilize 3rd party food ordering apps such as Uber Eats as their preferred way to order food
"Taste of Food" was the most chosen attractive factor to order from a certain restaurant.
"Price" was the second most chosen attractive factor to order from a certain restaurant
Prefer to order food from their mobile device
Find out about smaller local restaurants through 3rd party apps such as Uber Eats

DEFINE

Click to enlarge
User Persona

SAINT HUNGER

We're going to assume Andrew here is a Metallica fan for reasons. With the information gathered from the research phase, I created a user persona, Andrew, to capture the typical user who would most likely order from Dunbar Pizza & Indian Food.
Click to enlarge
Empathy Map

ADDITIONAL TOPPINGS

I then created an empathy map consisting of key findings and observations noted from the user interviews and survey in order to further flesh out Andrew's persona.
Click to enlarge
Click to enlarge
Product Goals

PIES AND PIES

Afterward, I created this tasteful assortment of pies to illustrate the various business, technical and user goals that I believed were pertinent to focus on for this restaurant after my initial research phase.
Click to enlarge
Card Sorting

MAKING A MENU

To build an effective navigation, I conducted a card sorting exercise on Maze with 43 cards of various items from the restaurants menu to see how user's would likely group them into given categories.
Click to enlarge

IDEATE

Site Map

FOLLOWING THE RECIPE

With information gathered from my research phase, especially with the input from the card sort I began to map out the hierarchy of the site for my redesign. I also renamed certain items after the research phase and speaking with the restaurant directly, for example, originally they had "Plain Rice" as an item which was very vague, after learning that it was a side of basmati rice I proceeded to rename it "Basmati Rice" for clarity's sake.
Task Flow

COOK, EAT, CLEAN, REPEAT

With my hierarchy mapped out, I created a few tasks that user's would most likely undertake while ordering food from Dunbar Pizza & Indian Food.
User Flow

KNOWING YOUR WAY AROUND THE KITCHEN

To tie in all the mapping, I created a user flow to capture the entire web of how a user could navigate the entire website, with the addition of the quick links to jump to the respective 3rd party food ordering apps on which Dunbar Pizza & Indian Food is located.
Wireframes

KNEADING A GOOD BASE

With my navigation hierarchy planned out, and with the additional information gathered up to this point I created low-fidelity wireframes of the key screens I would want to implement in my prototype for testing and to get a better idea of how my redesign would start shaping up.
Responsive Design

PERSONAL PAN

To visualize responsive design I created the home page for a tablet and mobile screen. I also created additional screens for my mobile layout such as the Pizza Menu and the Pizza page.
Visual Design

ADDING A BIT OF SPICE

I wanted to create a unique brand for this restaurant as that was one of the main things that were missing. I took inspiration from the Devanagari script calligraphy style for "Dunbar" and created a graphic of a Naan with a Pizza slice above it to capture the idea of a restaurant specializing in Indian cuisine and Pizza. Since their current site's logo utilizes the red maple leaf so prominently, I decided to add that to the "D" in Dunbar. I chose Pizza & Indian Food for the green banner underneath. I avoided adding "Grill" as they don't seem to have many "Grill" type items on their menu.
UI Kit

THE PANTRY

With my logo created, and a general sense of what I wanted aesthetically, I created a UI Kit to assist me during my design process.‍

PROTOTYPE

High Fidelity Wireframes & Prototype

FAVA BEANS AND A NICE CHIANTI

Those apparently pair well with certain cuisines.. As for pizza and Indian food, we'll stick to some high-fidelity screens and a prototype made within Figma. I created two main flows which I would then test later in usability testing.
View Prototype

TESTING

Usability Testing

TASTE TESTING

To assess my redesign of the restaurant's website, I conducted unmoderated usability testing of my high-fidelity prototype with user’s on Maze. The main purpose of the usability tests was to assess the overall usability of the redesign - and note any difficulties users face for further revision/iteration.

RECIPE STEPS

  1. Log in, order a small pizza and an Indian cuisine dish, then schedule a pickup and checkout.
  2. Select a coupon and customize it's specific items

‍

Affinity Map

ADD A TIP?

Following the usability test, I compiled the information gathered into an affinity map.  Overall the tasks presented little to no difficulty to the participants and they praised the intuitive straightforward tasks and design.

"Vibrancy of the website made it very inviting"

"Very smooth and seamless"

Well designed and felt familiar to me"

"I like the suggestions for other food to pair with the order"

WINS/STRENGTHS
  • Tasks were simple and straightforward
  • Follows pattern's users are familiar with when ordering food on websites
  • Everything was clearly laid out and labeled
  • Vivid colors/pictures were praised
  • User's liked having the ability customize individual items within a coupon deal.
WEAKNESSES
  • Accessibility may be a concern, especially to those with red-green color blindness
  • Some felt that inputting a coupon code would be a faster approach
  • Inability to see price changes with topping additions unless you scrolled back up to the top of the dish page.
  • Lots of scrolling in certain pages

REFLECTIONS & FUTURE

This was an interesting project, and I personally enjoyed creating the branding for the restaurant the most. Since most of the user feedback from the usability tests was positive for the desktop version, the next step would be to create the full layout on mobile and tablet screens and test those further. I would also like to dig deeper and flesh out the rest of the menu to analyze a users ability to order many more items.

MORE OF MY WORK

Responsive Interstellar Booking
ASTRA
Add a feature
LVL-UP
End-to-End Application
GAIA
© 2023   ZARAR HAFEEZ
Get in touch!