How to enhance the user experience of a pizzeria app
This project explores my design journey & thought process while redesigning a pizzeria app. I have not been commissioned to do so.
What is Ovenstory?
A homegrown, Indian company specializing in delivering unique pizzas. Located in over 36 Indian cities, the company’s USP is to innovate pizzas through taste & variety, keeping in mind the ‘desi ‘palate.
Why a redesign?
A closer look at each user flow in the current app made me come to the following conclusions:
- Onboarding & signing up -Takes too long & hence drop out rate among users may be high.
- Home page-Doesn’t capture the diversity of the brand & can be made more engaging.
- Navigation between menu categories is confusing.
- Lack of visual clarity-This may lead to an information overload, resulting in users overlooking important data.
- The transition between user flows- The flow from customization to cart to checkout should be seamless.
Getting started
Competitive Analysis
To begin with, I identified competitor products in the food delivery business & studied their designs. I also expanded my research to other e-commerce apps to better understand how to approach the redesign from multiple angles.
Gathering user perspectives
After revisiting the list of features that I felt needed improvement, I decided to speak to some friends about their views on the app.
Defining the problem
After gauging that others had similar pain points as mine, I began defining the problem statement & the possible solutions for each user flow.
Wireframing & iterating
I sketched out preliminary solutions of how I felt the overall experience could be improved. In doing so, I understood the methods to improve on existing features & how new ones could be incorporated.
I have iterated every component on the screen several times before achieving the desired output that I was pleased with. This included developing multiple approaches to rethinking the same design problem. Every user flow & component was iterated several times before finalizing on the 55 final screens. I have included a link to my Figma file.
Onboarding-A quick introduction
With a food delivery app, the reasoning behind why a user would download it is straightforward: to order food quickly & to eat.
The purpose behind an onboarding screen is to educate a user as quickly as possible. It is essential to keep the process short. After all, the menu is what a user is chasing.
Problem
Having 3 onboarding screens before signing up or logging in is a bit of a drag. Further, the information displayed doesn’t fully capture the brand’s USP.
Solution
My redesign promotes the brand & sheds light on what a user can expect from the app on a single screen.
Sign Up
The current app follows a 3 stage process:
- Adding mobile number
- Verification of mobile number
- Adding name & email details
I decided to retain the same flow but added greater emphasis to the CTA’s. I also wanted to de-emphasize the text fields, to make the CTA stand out more.
Location Details
Giving permission
Currently, the app merely prompts the user with a modal to grant location access. If the user denies permission, the user is repeatedly prompted with the modal to grant access.
However, I have designed the screen for 2 cases.
Adding the address
Problem
The app auto-detects the user’s current location & displays the home page immediately after. Address details are only added before checking out. This makes the checkout process longer which can be inconvenient.
Solution
The user must input address details before proceeding to the home screen. It is essential to phase out the stages of data collection from the user, without making the experience overwhelming.
Home Screen-Showcasing diversity
- From a user’s perspective- The home page must provide the user with a bird’s eye view of what the restaurant has to offer.
- From a brand perspective- The items listed on the home page must represent the company’s USP & are hence appetizing enough for the user to order.
Problem
There are only 2 sections on the home page:
- The navigation bar contains a hamburger menu & a button to edit the location
- A display of cards as food categories
This is an insufficient number of data points for the user to make a decision. I also felt that the brand wasn’t tapping into its full potential. There were several features that I felt needed improvement:
- Complex & unconventional navigation- To transition from the home page to the menu, the user must tap the category card & press the back button to return. Having a tab bar simplifies navigation. Also, a hamburger menu conceals information from the user, which can be easily avoided.
- Brand USP not highlighted-The menu features a variety of unique items for various group sizes. Categories like-Pizza parties, group serve combos, BOGO, categories that distinguish Ovenstory from others but are not brought home.
- No CTA for the user to act on -Currently, the user must tap the card, enter the menu screen & then add the item to the cart. This is not very user-friendly.
- No listing of bestsellers or item rating-This usually helps users gain an insight into the popular sellers, simplifying the decision making on what to eat in times of confusion.
- No indication of price-This is a critical data point for a user to decide if he/she would like to explore the item further.
- No indication of available offers-From a brand’s point of view, these can incentivize users to spend more & even increase customer loyalty.
Solution
After many iterations, I had an epiphany:
Visual hierarchy is integral in defining different sections of a screen at a glance. This helps in reducing the cognitive load on a user.
To achieve this, each section of the screen had to be redesigned. This made me design new categories to better highlight the menu. As I proceed, I will further explain my solutions through the different components of the screen.
1. Navigation Bar
In the current app, the navigation bar is not fixed to the screen while scrolling. I decided to fix the navigation bar to the top of the screen to enable easy editing of address during the scroll journey. Also in the current app, the user cannot search for items on the home screen. I decided to change that to improve user flexibility
2. Redesigning the information architecture with new categories
I approached this section by assuming that the same template could be uniformly applied to the listings under each category. The name, price, image, CTA & possibly a product description were all that had to be designed, right?
After diving deeper, I realized that this one size fits all approach could not work.
The data points a user looks for while browsing through different sections is not the same.
This was an important starting point for me to redesign the user flow. In the current app, the home screen only contains category cards.
3. Popular section
If a user does not want to browse through the entire menu, the best sellers section is a useful feature. Further, if the user is unclear on what to order, knowing that several others also picked the same item is a comforting factor that users usually rely on.
After my preliminary iterations, I knew that the card had to be large enough to grab a user’s attention.
I decided to use a carousel to display multiple listings, as a carousel allows multiple pieces of content to occupy a single screen.
Other useful data points that are captured on the website but missed out on the app, namely the ratings & spice level feature have been added.
Hierarchy of data points:
- Primary: Food photo, name, price & CTA
- Secondary: Veg/non-veg symbol, rating & spice level
- Tertiary: Copy & customizability
4. Pizza Parties
This is the big-ticket item on the menu i.e. the most expensive. A pizza party caters to a variety of group sizes & typically consists of multiple food items.
Currently, a user has to tap the ‘pizza parties card’ to view all the listings. There is no mention of the following data points:
- Image of the food
- Name of the pizza party
- Price
- Copy
- The ideal group size
- CTA
Further, to simplify the process of adding an item to the cart, my solution is to have 2 user flows to increase the discoverability of the listing while simplifying the user experience.
Since pizza parties are unique to Ovenstory with the potential to draw in the big bucks, I listed it after the popular category. Just like in the previous section, I used a carousel to display the listings.
5. Offers
Improving the discoverability of offers can greatly benefit the user. Currently, there is no mention of ongoing offers on the home page.
6. Weekend Binge-Reorganizing combo options for groups
Apart from pizza parties, Oven story has 4 combo categories catering to different group sizes:
- Combos for 2
- BOGO
- Group serve combos
- Value combos
As mentioned earlier, the home page cards do not give a user an idea of the price point or the product copy. The ‘weekend binge’ category is a new category that I designed to showcase combos for groups of 2 or more.
While designing new categories, I also had to keep in mind the overall flow of the entire home screen.
7. Classics
From my preliminary iterations, I decided to showcase the current categories listed on the app through the classics category. This is particularly useful to a user who knows exactly what they want to order & serves as an alternate means to access the menu listings, within the home page.
8. Pastas with a Twist
Playing on the design of the cards listed under the ‘weekend binge’ category, I tweaked the design to showcase different data points, namely:
- Image of the food
- Name
- Price
- CTA
- Rating
- Veg/non-veg tag & spice level
The reason I decided to retain a similar card design was because multiple types of card variations can create a sense of disarray & can lack overall visual cohesion.
9. Table for one
Following a similar pattern to the ‘classics category’, the table for one as the name suggests contains a curated set of meals for a single user.
10. Top sides
This category features a list of the best-selling side dishes on the menu.
11. Delectable desserts
Adding a carousel of desserts at the end of the home page seemed like the obvious choice. The data points in this category are:
- Image of the food
- Name
- Price
- CTA
12. Adding a tab bar
Navigating between different sections of the app is confusing. The current app does not have tabs. So I substituted the hamburger menu with a tab bar at the bottom.
Menu Screen-Facilitating Quick Decision Making
- From a user’s perspective-Listings need to be concisely presented with the utmost clarity, for the user to browse through.
- From a brand perspective-If, a user has clarity in his/her decision making, the ordering process will be quicker, thus leading to better conversion for the company.
Problem
Currently, when a new user taps a category card on the home screen, they are prompted with the following before they can proceed:
- Incorrect instructions for browsing the menu-If a feature needs to be explained, it suggests that it is unintuitive for the users to grasp. I have explained the current design below.
- Complex navigation-As mentioned earlier, the back button is the only way a user can transition from menu to home. The hamburger menu needs a redesign as well.
- Menu categories block the listing- By tapping the menu button, the user can switch between multiple food categories. This list of categories covers a large part of the screen.
- ‘Veg only’ signifier is unintuitive to use
- No option to compare multiple listings- Since the listing is designed such that a user can only view 1 listing at a time, drawing comparisons between multiple listings at once is not possible.
- Enlarged image size-This data point is instrumental in shaping a user’s thought process. Currently, the image size is stretched so large that it does not fully capture the item. This can be problematic especially when multiple food items are displayed, like in the case of combos.
- Food title & copy need to be crisp
- CTA is unclear-Currently, the CTA is lost within the image. This needs to be emphasized more.
- No mention of ratings/best sellers-As mentioned earlier, ratings can help in providing conviction to a user’s decision.
Solution
The screen must be designed such that it does not overload a user with information, hence framing a clear interaction path. This clarity in thought translates into easy decision-making, thus translating into quick conversions.
The more complex the interface, the more is the cognitive load on the user, resulting in lesser user engagement.
1. Navigation Bar
2. Redesigning the information architecture with new tabs as categories
I found a discrepancy between the listings on the website & app concerning the listings. So I decided to list all the website categories. These names may seem ambiguous & confusing to a user. Many questions came to my mind:
FAB vs Tab bar
FAB: This makes it easier to assess one’s options with a single tap. However, while viewing the categories within a FAB, the menu listings can get hidden. Also, if there are multiple categories added at a later date, a user will have to further scroll within the FAB.
Tab bar: Because of the nature of a tab bar, it does not conceal a menu listing. However, all the categories cannot be viewed on the screen at once with tabs. A user must scroll sideways to view all categories.
I had to assume what could work better. I decided to use a tab bar so that even while navigating through categories, the menu listings could take focus.
3. Redesigning the listing to view multiple options
By simplifying the process of viewing multiple listings, the user can compare items & take a quicker decision.
4. Redesigning the ‘veg only’ signifier
5. Creating a favourite’s section
If a user stumbles upon a listing that they like & want to revisit later, the favorites button comes in handy. This can be useful when a user is unable to make up their mind on what to order. After adding items to favorites, the user is notified. I have used materials to add depth to the snack bar.
Customization of Menu Items
Certain items on the menu can be customized based on the user’s preferences. When the CTA is tapped, a customization modal appears. This ensures that the user modifies the order based on his /her tastes, before proceeding with other tasks.
The most important data points in this stage are:
- Item name & base price
- Add-on name & price
- Veg/non-veg tag for the add-ons
- Quantity
- CTA
Problem-Customization of a single item
- Price is not highlighted
- No mention of required & optional tasks-If a user is selecting the ‘base’, the ‘extra’ tab can still be viewed by the user. Ideally, the app must ensure that the user selects the base before proceeding. Otherwise, the user may overlook a required field.
- The title name is not fully displayed
- CTA does not change-If a user has not selected his/her preference, the CTA needs to look disabled. This will imply that the user cannot proceed to the next task, without completing the current one.
- Copy must be fully displayed
- The selected item needs affordance-This is so that a user can distinguish between a selected & unselected item.
Solution
It is important to segregate the required tasks from the optional ones. In the current app, the sections are navigated through tabs. As mentioned earlier, this can lead to a user overlooking a required task.
Problem-Customizing multiple items
Let me explain with an example:
Claire has added a single Spanish Sunshine’s pizza to cart. Now she wants to add 3 more: 2 with a peri-peri cheese base topped with onion & jalapenos; 1 with a chipotle cheese base & a side -cheesy chicken meatballs. What should she do ?
Currently, the app permits too much flexibility with the customization of multiple items. While the intent is useful, it can lead to confusion in the user’s mind. There is one major reason for this:
- Too many conflicting CTAs: The quantity stepper, ‘add to all pizzas’ button & ‘pizza number’ button are all competing with one another for the user’s attention.
Solution
I decided to stick to a single user flow by retaining the customization user flow that I had designed, without making any alterations to it. By retaining the same user flow, there is minimum ambiguity in the user’s mind.
- Quantity stepper- After customization, if the user wishes to increase the quantity of the customized item, he/she must tap ‘+1’ on the quantity stepper.
- Adding a modal-By doing so, a modal reviewing the current customization is displayed. Primary CTAs are adjusting the quantity & adding to the cart. Secondary CTA is to ‘customize new’.
Case 1: If the user wishes to increase the quantity of the customized item
The quantity stepper & ‘add’ CTA enable the user to do so.
Case 2: If the user wishes to customize the same item with new add-ons
The ‘customize now ’ button redirects to customize the crust, add-ons again.
Search Flow
In the current app, the user can only search for items in the menu. The home screen doesn’t allow the user to search. I’ve redesigned this to permit a search in the menu & home screens.
Cart
- From a user’s perspective-The main intent of the cart screen is to highlight the order summary with a detailed break up of the bill.
- From a brand perspective-To provide a framework for users to review the order while providing relevant data for the user to act on. By doing so, the company can strive to improve the overall ordering experience.
Problem
Currently, the cart screen only displays the order summary & bill. Many relevant data points that should be on the cart screen are currently displayed in checkout. The following are improvements that can be made:
- The total payable amount is not highlighted-Further, the detailed break up of the bill should be displayed. This is so that a user can alter the order by adding/removing items & see the updated bill.
- No modal to confirm that an item is deleted from the cart- If an item is removed from the cart, the app does not prompt the user to confirm that the item is deleted. If a user accidentally deletes an item from the cart, he/she must add the item from the menu again.
- The ‘featured item’ carousel is highlighted more than the items in the cart which can be distracting.
- Checkout CTA is not highlighted
- No display of offers
- ‘Tipping the rider’ feature should be in the cart screen, not checkout.
Solution
Currently, the app merely provides an order summary with a carousel of add-ons. The overall experience of the cart screen can be enhanced by adding new features, to further personalize the order as per the user’s needs.
By going the extra mile in curating a user’s order, greater customer loyalty can be built.
1. Order Summary
The main data points relevant to a user are:
- Name
- Price
- Quantity
- Preview of the food item
- Customization data
2. Restaurant instructions
This editable text field is placed below the order summary, to catch a user’s eye. While reviewing the order, if a user has any special instructions, he/she will remember to make note of them. If the text field was located further below on the screen, it could be overlooked.
3. Pocket-friendly treats
4. Tip your rider
Currently, this feature is listed on the checkout screen. But since the detailed bill amount is displayed in the cart section as per the redesign, this feature has been relocated as well.
5. Offers
The current app does not display the relevant offers on the cart screen. This makes discoverability more difficult. I decided to add a carousel of relevant offers for the user to select from & easily upsell.
6. Item total
The current app displays the bill breakup on the checkout screen. If the user wishes to add/remove items from the cart, the user should be able to view how the total bill is being updated.
Checkout
The checkout screen must provide a quick overview of the order & delivery details before the user can make the final payment. The most important data points during checkout are :
- Total payable amount with the order summary
- Delivery address
- Contact details
- Delivery method
- Delivery time
- Payment methods
Problem
Although almost all these data points are displayed, the sequence of arrangement needed to be altered.
- Tip section-Currently, this section is given primary importance in the checkout screen.
- Detailed bill-As mentioned earlier, this needs to be displayed in the cart section. So that a user can see the total amount changing as they add/remove items.
- Modal to select delivery time- If the user taps ‘schedule delivery’, the user is prompted with a modal to select the delivery time.
Modals should be used only when necessary as they may make a user lose sight of the current task at hand.
- Modal to select delivery method- As mentioned, there may not be a need to provide a modal for this.
- The delivery address-This section is placed at the bottom of the screen. Furthermore, the CTA to pay is displayed only after the address is added. Adding address details takes time & the user would not want to complete such a long task before paying. If the address details had been requested earlier, this task would only have to be reviewed or edited.
- Checkout doesn’t allow selection of payment-Once the address details are input & the CTA to pay is selected, the user is redirected to a new screen to select the preferred mode of payment. This could have been integrated with the same screen so that all checkout details could be reviewed at once.
Solution
I decided to rearrange the IA to ensure that certain features were highlighted more than others.
By doing so, I had clarity on how the screen needed to be redesigned.
And that’s a wrap!
Key Takeaways
Learnings:
- I dissected the design from two lenses-that of customer experience & business goals.
- Each section of the home page needs to be designed uniquely, capturing relevant data points.
- Competitive analysis sets the foundation of the design process.
- I designed all screens for iOS & had to get accustomed to HIG.
Challenges:
- While doing analysis, it is important to gauge why an interface has been designed the way it has, the possible & to understand the designer’s intent.
- Final iteration? What is that! :)
Do message me on Twitter or Linkedin to discuss further.
