Project Overview
The product
MYPIZZA is a regional pizza maker located in a suburbs metropolitan area. Mypizza helps customers select, customize and build their own pizza before placing the order online. Offers both delivery and pickup service. Mypizza targets customers like commuters and workers who lack the time and ability to prepare pizza.
Project duration
July 2022 to September 2022.
Project Overview
The problem
Busy workers and commuters don't have time to make pizza at home and looking for pizza maker, providing customization option like building pizza before placing order online, offering both pickup and delivery service.
The goal
Design a responsive website for MYPIZZA that allows users to easily build and order pizza online. Offers both the pickup and delivery service.
My role
UX designer, designing a responsive website for MYPIZZA from conception to delivery.
Responsabilities
Conducting interviews, personas, paper and digital wireframing, low and high-fidelity prototyping, Conducting usability studies, accounting for accessibility, and iterating on designs. Determining information architecture and responsive design.
Understanding user
User research
Personas
Problem sttatement
User journey maps
User research: summary
I conducted interviews and created empathy maps to understand the users I am designing for and their needs. A primary user group identified through research was working adults and commuters who don’t have time to prepare pizza and prefer to order their own pizza online. But research also revealed that the time was not the only factor limiting users from cooking at home. Other user problems included obligations, interests, or challenges that make it difficult to get groceries for cooking or go to restaurants in-person.
User research: pain points
Time
Working adults and commuters are too busy to spend time on meal preparation
IA
Text-heavy menus in websites are often difficult to read and order from.
Accessibility
Platforms of ordering food are not equiped with assistive technologies.
Personas:
Ahmed
Problem statement:
Ahmed is a busy professional who needs to customize and order pizzas online because he doesn’t have time to cook himself.
User journey map
Mapping Ahmed’s user journey revealed how helpful it would be for users to have access to Mypizza website.
Starting the design
Sitemap
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper wireframes
Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes will be well-suited to address user pain points.
For the home screen, I prioritized a quick and easy ordering process to help users save time.
Stars were used to markelements in the sketch that would be used in the initial digital wireframes
Digital wireframes: Screen size variation (s)
Digital wireframes
Easy navigation was a key user need to address in the designs. In addition, equipping the website to work with assistive technologies.
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
The website offers several possibilities to contact Mypizza : mailing, calling, or getting to the location in-person.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of selecting, building and ordering pizza online, so the prototype could be used in the usability study with users.
Usability study parameters
Study type
Unmoderated Usability study
Location
Casablanca, Morocco, remote
Participants
5 , one with visual impairment
Lenght
20 minutes-30 minutes
Usability study : findings
I conducted two sets of usability studies. The results of the first study helped guide designs from wireframes to mockups. The second study focused on high-fidelity prototype and revealed which aspects of the mockups needed to be refined.
Round 1
Navigation
Users want to order pizza quickly because they do not have time.
pizza customization
Users want more customization options to build their own pizza.
info. architecture
Users want to improve the pizza building process.
Round 2
Address
“Postal code” is unnecessary in the information details to order pizza.
Functionality
“Build your own pizza” functionality is confusing.
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups: screen size variations
Mockups:
Early designs have the Postal code or zip code in the information details to complete the ordering process, but the first usability study revealed that this information is unnecessary, so it is removed.
The participants had trouble to build their own pizza. When they click the pizza size, sauce and topping dropdown buttons, nothing happens. So after the usability study, I added two pages to complete the pizza building process before ordering online.
Mockups
High-fidelity prototype
The final high fidelity prototype presented cleaner user flow for building a pizza and checkout. Pizza. It also met user needs for a pickup or delivery option, as well as more customization.
View the Hi-fi prototype :
Accessibility considerations
Navigation
Used icons to help make navigation smooth and easier.
Shapes
Used shapes, and toppings to help all users better understand the designs.
Visual design
Used clear colors contrast, various typefaces and scaling for more accessibility.
Going Forward
Takeaways
Next steps
Takeaways
Impact
The website make users feel like Mypizza website really thinks how to meet their needs.
One quote from feedback :” In mypizza website, the pizza is burning.”
What I learned
While designing Mypizza website, I learned that the first ideas are only the beginning of the process.
Usability studies and peer feedback influenced each iteration of the app’s designs.
Next steps
Usability study
Conduct another round of usability studies to validate that the user's pain points have been effectively addressed.
Research
Conduct more user research to determine any new area of need.
Let's connect
Thank you for your time reviewing my work, Mypizza website! If you would like to see more or get in touch, my contact information is provided below. Email : [email protected]
