Challenge

Redesign an entire app in three weeks

Company executives made a decision to rebuild their food ordering app using Material Design 3 (M3) + Flutter as the code base, to make future maintenance easier than the current custom-build being used. As part of the initiative they were bringing in an external agency to oversee the initial build of core flows and update the current designs to leverage the MD3 component library.

Due to the length of the agency’s engagement, they weren’t going to be able to update designs for all the screens in the app. Design leadership saw this as a unique opportunity to have our internal design team work on the design updates ahead of hand off to the agency and address some of the experience improvements we had been wanting make.

The catch was that the hand off was happening in three short weeks, which didn’t leave a lot of time to learn a new design system, how to customize it for our brand, and create and test new designs.

 

Research

The team began the work by reviewing our running list of design debts, as well as areas of the experience we’d like to improve and/or redesign, and prioritizing which items we wanted to focus on.

Our choices were also informed by a review of the app’s information architecture. I created a list of all the actions a user could take in the app (as well as future items we knew were in the pipeline for implementation) and organized them into groups before reviewing the list with the team. We created four main categories of actions and after comparing them with a user’s primary objectives when accessing the app, chose our primary navigation elements and determined what our top priorities were for the redesign work.

Some of the areas we chose to focus on include:

  • checkout/ordering process

  • homepage

  • how and when information is surfaced to the user

The team did a quick competitive analysis of similar apps, paying particular attention to how they approached their homepage and checkout experiences to validate/challenge our hypotheses and initial design concepts. Throughout our design process we continued to conduct brief competitive analyses to validate our designs.

 

Ideation + Execution

Before starting to create any designs, the team had to familiarize ourselves with the M3 design system as none of us had ever used it before. We spent quite a bit of time understanding how choosing a custom colour palette reflected throughout the components so that we wouldn’t be handing off designs that required a lot of custom code. Based on my research, I was able to create a “cheat sheet” describing how M3 uses percentages to calculate the background colours of different components that was very helpful in getting the team aligned on which colours to include in our custom palette.

After developing a base understanding of how the M3 system works and what components were available to us, we worked collaboratively to determine the foundational elements for the new designs, ranging from small UI details like corner radiuses to larger UX patterns that would be used across the app to create consistency and reduce mental load for the user.

For the actual creation of designs, the team did a combination of live collaboration on key screens (e.g. the homepage and checkout sequence) and individual work once the key patterns and components had been established to try and finish as many screens as possible before the deadline.

 

Final Designs

Some of the changes that we made for the final hand off versions include:

Streamlining the checkout experience

The previous experience involved a review step where the user could view and edit the items they’d added to their basket, and a purchase step where they could enter a promo code, payment information, and place their order. However both steps repeated all the information about the items in the user’s basket, creating redundancy.

The new experience features a single step where the user can view and edit their chosen items, enter promo codes and payment information, and place their order. This improves the experience by:

  • reducing the mental load on the user (less taps required to complete the same action, only having to consume information once)

  • reduces the perceived length/difficulty of the experience

  • reduces friction if the user wants to edit their order based on pricing information


Changing how users access their basket

Previously, the basket was a conditional sticky full-width button at the bottom of the screen (it would show only if the user had added items to their order). When updating the designs we changed it to a persistent icon button that lived on the righthand side of the top navigation for the following reasons:

  • it follows a known pattern in e-commerce where the basket/cart is accessible in the top righthand corner of the screen, reducing the learning curve for new users

  • it increases the usable area of the screen by removing the sticky button, which would sit on top of the already present sticky bottom navigation

  • a persistent presence and location creates predictability for users and reduces their mental load



Improving the order confirmation screen

While there wasn’t anything that was blatantly ‘wrong’ with the current order confirmation screen, there was a quite a lot of detailed information shown that wasn’t easily scannable and was a repetition of the information they’d just viewed when placing their order. To make the information more digestible we made the following changes:

  • moved most of the detailed information to a digital receipt (accessible from the confirmation page) and presented only the information the user would need to need in order to collect their order

  • increased the size and prominence of the order number, as staff on a recent site visit had informed us that users had difficulty finding their orders during pickup because they couldn’t find their order number within the app

  • improved the hierarchy of the information shown with greater contrast in size and weight of text to improve the readability of the information presented

Redesigning key components of the home screen to improve discoverability

The home screen is very information dense, featuring the main navigation, the user’s location, past orders they can order again, all the locations (called stations) they’re able to order from – along with detailed information about each one, and occasionally promotions. All of this information can be overwhelming, especially when you’re hungry and trying to decide what to eat.

To improve the browsing experience for users and reduce their frustration in trying to make a decision we made the following changes:

  • changed how station hours are displayed so they offer more clarity – instead of just listing the opening hours and letting users figure out if a station was currently open, the new design now explicitly states whether a station is open or closed as well as information about when it will close or be open next.

  • improved information about when an order for the user would be ready – we received feedback that users wanted to know when an order would be ready to help inform their choice of where to order from, even though this information was already presented on the station cards. To help them find this information more easily we updated the copy to make it more specific and made it more prominent on the card.

  • surfaced more details about marketplace stations to reduce user effort – previously, users would need to select a marketplace card in order to view all the different eateries available in that marketplace, which increased both effort and mental load when trying to choose a station to order from. The new design for this type of station card features a list of some of the options available right on the home screen.

  • included items ordered in reorder cards to reduce user effort and friction – the reorder feature was designed to make it faster and easier for users to repeat a previous order (something that our analytics showed happened quite often with our users) but the previous version of the cards only displayed the name of the station, the date the order was placed and the order total. Users would have to select the order or add it to their basket to see what items were actually in the order and then decide if this was actually what they wanted. The new design features a list of the items in the order itself so users can know with a glance which order they want to repeat, which is especially beneficial when a user may have multiple orders from the same station available for reorder

 

Results

Before handing off the updated designs to the agency, we needed to get approval from multiple business stakeholders on the changes. To help support the process we conducted a quick user testing study on a few of the more controversial elements of the new designs. The results were far better than we expected:

  • All 6 participants gave the highest Single Ease of Use (SEU) rating possible (7/7 - very easy to use)

  • Basket icon position and function are clearly understood, meeting guests' expectations

  • “Order again” design is clearly understood and viewed positively

  • Language and wording is clear throughout

We also presented some additional insights we gathered from testers’ feedback for future consideration:

  • testers often referred to the ‘basket’ as a ‘cart’ - in the future may consider changing the icon to a cart to align with expectations or using an icon to represent “Your Order” (the title of the checkout screen)

  • all testers noticed the addition of the Drop-off fee in the pricy summary on “Your Order” after switching between Pickup and Drop-off - there is an opportunity to avoid surprised and build trust by indicating the fee before “Your Order” screen

  • many testers didn’t mention a connection between the Pickup/Drop-off filters and the stations displayed - this may need to be clarified in future iterations

 

Disclaimer: The content shown in the images is not real and has been subbed in to protect proprietary information.