5 Weeks
UI/UX Designer
Motion Designer
Maggie Ma
Proud Taranat
Adobe Illustrator
Adobe After Effects
What is Umi?
UberEats is currently one of the most popular food delivery apps on the market that millions of people frequently use. But for those who are multitasking, visually or physically impaired, ordering through a mobile app can prove to be difficult. Umi, is our mobile-based CUI that we designed for UberEats to imagine how we might tackle that problem within UberEats’ existing company ecosystem.
UI/UX, Motion, CUI Designer
In this exploration of how might a CUI be incorporated in an existing design system, I focused on the UI/UX and visual design of the conversational user interface (CUI). In addition, I took part in the design and animation of the motion states and promo video for the CUI prototype.
For this video, we wanted to showcase how Umi integrates with the existing UberEats app. In this example, we focused on Alex, a busy working mom driving home with no time to cook, and Eric, the storeowner.
We wanted to present both the customer and the store owner’s perspective in a food pick up scenario to show how Umi can be integrated within the greater UberEats ecosystem. In order to do so, we needed to take UberEat’s existing screens + style and alter it to better fit an entire CUI system in the ordering process.
01/ Novel CUI Features
Final Motion States
As a CUI meant for people who are potentially distracted while using the app, we wanted to make sure the CUI motions were simple, distinct and clear. We also wanted to make sure that it fit with the existing Uber brand, so that it could be applicable to not only UberEats but Uber itself potentially.
Starting up Umi
When a customer opens up UberEats, they can immediately start up Umi to help them through the food ordering process. Based of known user preferences, Umi can help search for favorite stores nearby, and provide information for pick-up wait times.
This allows the customer to decide what restaurant is most convenient for them when they’re busy (in our scenario, they’re driving home).
Ordering Preferences
When ordering food at a restaurant, Umi can help users by giving restaurant recommendations based on diverse user inputs such as cravings, ratings, price, distance, and time. Umi can also keep track of the customer and their friends/family’s preferences and dietary restrictions for personalized and efficient handsfree ordering.
From that, Umi can also create preset lists of food so users can order their favorites over and over again.
Composing Order Notes
When placing an order, Umi is able help the user to compose preset notes with user taste preferences – such as spice, sodium and sugar levels or any food allergies.
Handsfree Messaging
After or during the food ordering process, Umi can send messages to friends and family – even if the user is busy on the wheel. Then from the friends/family messages, users can add their additional items to the card accordingly.
Payment/Pickup
Once an order is ready to be placed, Umi can help with handsfree payment with a prelinked card. Umi can also facilitate the interaction between customer and restaurant to deal with issues related to order pickup, edits, payments and cancellation.
With real-time location and traffic data, Umi keeps both the customer and store updated on the pickup.
Managing Orders
As a store owner, having control over a existing and incoming orders is extremely important. With the help of Umi, it can help alert store managers of any new orders, pickup delays, or even missing ingredients for an item. It can also manage all order cancellations and refunds accordingly.
To access Umi on screen, all it takes is a swipe from the side of the screen. Off-screen, Umi can also help frontload conflict management between customers and the store so customers don’t have to call during peak hours.
Reviewing Ratings
After store hours, the store manager can easily review the customer feedback given throughout the day or week. Umi can help the store be more conscious of frequent reoccuring issues and requests from both new and returning customers to help increase customer satisfaction and revenue.
Responding to the Customer Feedback
A novel feature we wanted to incorporate on the store owner’s front was to give the ability to respond to customer feedback in a faster and more efficient way.
With the help of Umi, store owners can pull up abnormally low ratings and directly select a preset response. They can also write out their own reply if they choose so. On top of feedback, Umi can also provide business tips related to their responses to feedback.
Store Analytics
Besides viewing and responding to customer feedback, Umi can also compile the feedback and store performance into data that the store owner can review each day. On top of that, Umi can provide business insights and advice based off performance data to help improve store performance in context of other competitors.
This way, store owners can multitask closing up the store while listening to daily, weekly, or even monthly business summaries.
02/ Research + User Journey
How did we land on UberEats?
In the brainstorming process, we conducted research on a large variety of industries and companies. Amongst all of them, we narrowed down to three, and then one: UberEats. As we dug deeper into that industry, a big pain point we noticed is that ordering from a mobile app is less accessible for those who are multi-tasking or visually and physically impaired.
With that in mind, we decided we wanted to focus our CUI design to allow more ways for users to order hands-free via speech. This led us to ask ourselves:
How can we introduce a CUI assistant into the existing food ordering ecosystem to heighten the ordering experience?
How did we determine the value of a CUI within UberEats?
With the interest within the food service/delivery industry, a lot was poured into the research to better understand the stakeholders, the potential value that customers and businesses would get, and most importantly, types of novel situations that the CUI would provide.
We then condensed our findings, listed out the significant points, and then rated it out of 10 how likely we thought people would find it useful (we rated other companies we researched as well).
How did we determine the CUI opportunities within UberEats?
Taking the bullet points generated from the previous exercise, we elaborated on the opportunities the CUI could have in the UberEats food delivery space. We specified the process into three parts: 1) Before ordering 2) During ordering process and 3) After ordering. In addition, we sketched out some dialogue examples for each part, and narrowed down our proposal:
To build a mobile-based CUI within UberEats to allow for a personalized, hands-free food ordering experience for busy and driving customers.
How does Umi fit in the existing ordering process?
To better understand how we want our CUI to integrate, build upon, and have positive impact on the existing UberEats ecosystem, we needed to research and understand the existing relationships between customers, store owners, and even drivers.
For the scope of this project, we focused on the storeowners and customers by mapping out 2 scenarios over the same timeline, and inserting Umi’s interaction points in a green highlight. For the customer, we also created 2 potential scenarios they might need Umi for in their food ordering process.
User Journey Map
The user journey map details the step by step actions taken by a customer and storeowner across the same timeline. With the customer, we detailed two possible scenarios when order food.
Take a closer look by zooming in and out of the Figma view! Clicking on the bottom left board title can also open the view in a new window for easier navigation.
03/ CUI Dialogue Framework
Designing CUI Dialogue
In addition to the industry research, we also deeply researched existing UberEat frameworks to create our CUI dialogue for all sorts of scenarios in the food ordering process. What’s important here, is that this allowed us to map out all potential conversational paths the user might take, as well as tone of CUI, actions of the CUI and novel actions the CUI can provide.
Customer View
Store Owner View
Additional Dialogues
03/ CUI Design Process
Brainstorming Designs
At last the fun part! Based of visual research of UberEat’s existing brand, we all braindumped CUI designs in the form of Figma sketches. From there, we narrowed down to a simple Uber logo-inspired design as we thought it would provide us the most flexibility and adaptibility.
Once we settled on a design, we then moved onto creating the various motion states the CUI would turn into for different scenarios. For example, if Umi didn’t catch what the user said, we needed to make sure the “clarifying state” is distinctively different from the “processing/loading” state.
Using Adobe After Effects, we finalized the design and animated our motion states. This then allowed us to move forward in creating our promo video to help put these states in context of our CUI use cases.
04/ Promo Video Design Process
Dialogue
For our final animation, we wanted to highlight the ecosystem of Umi’s services within UberEats. We introduced two personas into our animation, Alex (customer) and Eric (store manager) to demonstrate Umi designed for phone as well as iPad.
Illustration Process
To begin our animation process, we drafted various iterations of our script, highlighting Umi’s novel features and user situations.
We then began storyboarding our individual sections of the video (see our first sketches on the right!).
Moving to After Effects
After the sketches, we then began to introduce fidelity to sections of the video — starting from first sketches to wireframe, and then to colored illustration. Illustrations were all done in Figma, all in the order of the script, then transferred to Adobe After Effects.
Here’s the final video!
After days of collaborative file sharing and animating, we finally finished our CUI showcase video :)
And it’s difficult! It’s hard to predict how users might verbally respond, and there’s always so many different paths and combinations of interactions to be considered. However, the soft skills I gained in learning conversational UX and technical skills in practicing motion design really helped me open my eyes and gain confidence on what I can do in the future!
A lot of work was done in such a short time, and for that I’m so grateful for my team in being so wonderfully creative and open to pivots - allowing for effective and efficient problem solving.