How can we use an adaptive user interface to improve the user flow of UberEats?
An AUI project.
The Project
Client: UberEats (Academic Project)
Team Members: Charley Zhao, Diana Chun, Juliette Wong, Shibin Michaelraj
Role: UX Designer
The Scope
The fewest amount of clicks. The quickest experience to order food. This project looked at how we could redesign an application by taking advantage of elements of an adaptive user interface. We were asked to consider features like auto-correct and pre-populated fields within the context of our chosen app. Our team selected UberEats because ordering food is a rather personal experience that can utilize pattern to enhance the experience and efficiency of individual users.
The Solution
Utilizing User Patterns: A new Uber Eats interface that keeps track of user patterns to create a delivery app that is catered to the individual and expedites the ordering process.
Order Recollection
The landing page of the application displays commonly placed orders at the top of the screen. The order appearances are based on the time of day the app is opened to align with commonly placed breakfast, lunch, and dinner orders.
Remembering Special Instructions
The redesigned Uber Eats app will remember commonly used special instructions that are both general and location specific. For example, instructions related to food allergies will appear autofilled for all orders while instructions like “extra jalapeños” will appear for relevant orders.
Keeping Track of Searches
The third and final AUI feature is remembering recent or common searches. Currently UberEats does not remember personal searches or commonly searched food items. The autofill recommendations are general or common food items that does not reflect the patterns of the user.
The Process
Understanding Adaptive User Interfaces & Ideation
This particular project was part of a larger course that looked at the role of artificial intelligence in the future of design. We were tasked with selecting a commonly used mobile application that could benefit from a redesign that considered how an adaptive user interface could improve the user experience. The greatest consideration for our team was making sure that the adaptive user interface helped users rather than hindered them. Before selecting Uber Eats as our final application, teammates suggested apps like AirBnb and Venmo. These were all apps that require a substantial amount of personal user input and could see value in utilizing user pattern.
We started by brainstorming several scenarios where a pre-populated field or action could reduce clicks in the food ordering process. From here we also discussed the number of users that might find the feature useful and whether or not it was a necessary inclusion. From my experience, I realized that it would be beneficial if the Uber Eats app could remember special instructions to reduce the number of clicks. I further developed this specific feature during to create a wireframe of what the interaction might look like.
Wireframes & Use Cases
We used our ideation discussion to construct wireframes for our selected features. This provided a visual component and a better way to experience how the features would look in practice. The wireframes were done by designing our new features in grayscale. For our final design we used our wireframes as a base to edit color schemes and fonts that matched the UberEats interface.
Once the wireframes were completed, I created detailed scenarios to demonstrate the use case of each feature. The scenarios were used to demonstrate how the features could be used, and be beneficial, in a realistic setting. While the wireframes can visually show the features, it’s easier to understand the need for a design when a use case is presented.
Order Recollection
Sarah is a frequent Uber Eats customer and orders iced lattes from Uber Eats in the afternoons to keep her awake. However, she doesn’t like that she has to search for Starbucks and reselect her modifications or scroll through her past orders to find her iced latte order. With the redesign, the first section she sees on the home screen recommends the top items that she previously ordered around this time of day. She sees that her Starbucks iced latte order is the first item recommended, so she quickly clicks it. Her typical order has been remembered with size and she reorders with ease.
Remembering Special Instructions
Jane is incredibly allergic to nuts, loves extra jalapeños in her pizzas, and extra balsamic vinegar on the salads. The new adaptive feature makes it possible for her special instructions to be remembered based on frequency of use and on the restaurant she is ordering from. Last night she ordered a salad and the special instructions got pre-populated with the two tags - 1)peanut allergies and 2) extra balsamic vinegar. She left both the tags on and moved to the next page of the check out process. She orders a pizza today and the special instructions get pre-filled with two tags - 1) peanut allergies and 2) extra jalapeños. She clicked on next and moved ahead with the checkout process.
Keeping Track of Searches
It is way past lunch time and Jamie is hungry. But it is a busy day at work. He decides to order in and opens UberEats and goes to search for his favorite type of item; Mongolian beef with no onions! As he starts to type ‘Mo’ on the search box, the new feature remembers his common searches and provides them as options for autofill; Mongolian beef with no onions, Mozzarella sticks, Mocha. He quickly clicks ‘Mongolian beef with no onions’ and orders from a restaurant that has short delivery time. His food is delivered right to his desk in 20 minutes and he can continue working while enjoying his Mongolian beef with no onions. Work just got little better.
Final User Flow for Order Recollection & Special Instructions Feature
Reflection
Prior to this project I had no experience designing an adapted user interface, and it wasn’t until this project that I realized how prevalent these features are. I use capabilities like auto-fill and autocorrect almost daily, but I hadn’t stopped to consider the impact that it had on how I interacted with certain apps. There’s a certain expectation that commonly used information like email and address will be filled out for us whether we’re shopping online or creating a new account. Even if it’s a few seconds, it makes our lives easier but it wasn’t always the norm to expect a pre-filled form. It was this line of thinking that I considered when ideating what future users might come to see as an expectation when interacting with an app or website.