Domino’s Pizza Mobile App Redesign— UI/UX Case Study
Simplifying the UI/UX design for users.
Disclaimer -
I’m not affiliated with Domino’s Pizza Inc. in any capacity and the views for this case study are strictly my own. Since I don’t have full access to all the user data that influenced their current design, this case study is not fully comprehensive. This case study was done to enhance my learning experience and challenge myself to redesign it.
What is Dominos Pizza?🤔
After reading the Brand name you might have already guessed something. “It should be something related to Pizzas ”. Congrats! You are right 😆.
Dominos Pizza Inc., Branded as Domino’s is an American multinational pizza restaurant chain founded in 1961. They have a website and a mobile application for the customers who want to order online and get items delivered at their home without any outside hassle.
WHY REDESIGN?
Recently while scrolling through the internet, I got my eyes on a piece of old news about Domino’s accessibility case it had with a blind man (2016), who sued the Dominos Pizza Inc, after he was unable to order food on Domino’s website and mobile app despite using screen-reading software.
In the case, The Supreme Court decision was in the favour of the blind man and Domino’s had to pay a huge fine for accessibility. This got me thinking, how big of an impact it can have on a business if not taken seriously.
After reading the case study I continued reading more articles on accessibility to learn more about it. Then I had no intentions of making a redesign case study on it.
But on the very next day, I was looking to order something online. So I started downloading a lot of online food delivery applications one of them being Domino’s Pizza.
“You can’t connect the dots looking forward; you can only connect them looking backwards.”
~Steve Jobs~
On opening the application for the first time, I was quite confused with the design decisions taken and the UI/UX design of a company this big.
Now, I might not know the exact stats about how well Domino’s Pizza is doing via its app or how many users are using the app, but I am a 100% sure, that a Redesign would help the app grow much bigger than before.
Let’s Dive deeper!
Problem Statements -
1. I observed a lot of repetitive navigation(with different vocabulary) which can make user confused, which to-use which to-not or what they are about or are they different options? a lot of confusion 😵.
2.They use a lot of posters(fighting for attention) to navigate their users from one screen to another but the text in these posters was barely legible. The text should be clear if it is used for navigating users. This is a big accessibility issue.
This problem can’t be solved even after going to settings and scaling the text because the text (for the designer) is not the same text for a developer. For a developer, it is just an image nothing more than that.
4. A lot of categories in the Menu and a lot of horizontal scrolling. A lot of distinction can confuse the user.
5. Switch in the header to change tabs still can't get this design decision they recently updated this feature.
6. Text with bad contrast with the irregular use of certain symbol/word in of the vocabulary and icons with different colours throughout the application.
Irregular use of icons —
Getting Started - 🏃
When I finally decided to make a Domino’s Pizza app redesign case study, I started first by observing the design system of the current Domino’s Pizza app.
- What typeface they currently use - Proxima Nova.
- Which colour is used where and why.
- How the current content structuring is done.
- Current user-flows.
After that, I started doing competitive analysis going through all the other online food delivery applications, which had decent reviews online.
Competitive analysis is a good practice to gain ample amount of knowledge about a certain industry you do not have much familiarity with.
Wireframing -📝
In the wireframing stage, I tried to implement what I learned through observations and competitive analysis of different online food delivery applications with a pencil ✏️ and papers 📄.
The Redesign -
After spending some time sketching my observations on paper, I moved to the visual design process to make those blurry wireframes that are sketched on paper to clear and highly defined. Also to test out where a colour works & where it doesn’t.
Home -
Starting from the home screen I minimized the use of colours on the app home screen primarily using white as its background colour. For a brand touch, I add a subtle blue to separate different pieces of content.
Icons and text were primarily using black with different opacities.
Text in CTA’s was primarily white with a green background and vice versa for some other cards.
Removed the Hamberger menu and added an Action bar making options more visible to the users. Removed a lot of repeating navigations that are in the current app to make it look less complicated.
Minimized the use of posters and made them as big as possible for the user to be able to read them easily.
In the current app, they have nowhere mentioned the brand name or logo. The logo only shows up on the splash screen. It can reduce the number of newcomers to the dominos app because the user’s friends or acquaintance will not be able to know what is the app without asking!
Used different colours for menu options to attract users attention.
Menu -
As I stated there are a lot of options in “Explore Menu/Menu”. I simplified it into 5 categories that are shown in the home no more than that. And named the section “Menu” only.
The product cards were quite complex and the information of a particular product was spreading all around the card without following any hierarchy. Most Importantly removed all the text or icon over the images.
Also added filters where users can sort by discount, price, bestsellers (which is a whole another category in the current app), veg, non-veg etc.
Search -
To make it an effortless app I added search option in the action bar, for users to frequently search the item they wanna order by its name which their friends have told them about recently.
Cart -
Then going to the Cart screen where the order is same the visuals are a bit more, text information is more clearer for users.
Again repetitive options in the current design -
- Edit (on the top right)
- Trash icon with 1 and “+”.
What they could have done just having “- 1 +” and a customise option as redesign.
Also maintained the visual consistency in for icon colours and background for users to not feel alienated coming to the cart which is a crucial part for the business.
All the Call to actions Text were bold with either white text with a green background or green text with white fill and green stroke.
Everyday Value Offer -
Everyday Value Offer tab which uses a switch to change tabs current application, I changed it to same as the menu tabs. Added floating cards taking less space. And more visible CTA.
Favourites -
The favourite option in the current application is quite difficult to reach for the user because it comes at the end of that horizontal scroll of the explore menu.
It also has no distinction between combo meals and a singular product in the current application section.
Profile -
In the redesign, I Made it as simple as possible for users by removing unnecessary icons from options.
What more can be done?
Removed all the graphical poster separated text from images as much as possible to make the text scalable according to the user preference.
Conclusion -
My process is pretty much explained in the above picture. Most of the time was spend on iterations. but you should always know how much is enough because iterations can go on forever sometimes😅.
Wanna take a look of the Figma file-
Feel free to zoom In 😄.
And…Let’s wrap!
So that’s pretty much it. This was my entire process of redesigning the Domino’s Pizza Application. Hopefully, you found this article very helpful and insightful. Do reach out to me if you would like to share anything with me.
