Digital Ordering
Digital Ordering is NCR’s next generation online ordering solution for NCR restaurant customers. The solution is a part of NCR hospitality eco-system and consists of a customer faced portal and consumer faced online ordering apps.
I was involved in the design of the consumer faced Digital Ordering web app (known as Digital Ordering) and mobile app (known as Digital Ordering App), as well as the customer faced Digital Ordering Portal (DO Portal).
As a UX/UI designer, I support defining business requirement, structuring the information/UX architecture, building user flow/interaction, creating the user interface and ensuring the experiences are measured for usability, quality, and scalability.
Background
The Next Generation Online Ordering Solution
In 2019, I was assigned to the project of designing the next generation off-premise food ordering solution for NCR’s restaurant customers.
NCR has been providing Online Ordering solutions, which is known as Aloha Online Ordering, to customers around the world for over a decade. The customers vary from nationwide chain restaurants like Firehouse Sub, Texas Roadhouse and KFC, to local cafes with just one or two store locations. The ultimate goal for our new product Digital Ordering is to create a new online ordering platform with improved experience for both restaurants managers and end users.
A sneak peek of our legacy product with different customers.
The Challenge: Design One Solution for Various Customers
Various restaurants are in need of online ordering platforms. Available order methods, type of menu and foods, flexibility of food customization, and checkout preference can impact the ordering flow. Seeing a sneak peak of our current customer ordering websites, we could feel a huge difference, especially in food customization flow and checkout flow.'
How do we create an online ordering platform that could meet the needs from different customers? While it seems simple to provide the answer “make it customizable”, the question remains with what pieces we should prepare. The outstanding challenges are to consider various use cases and provide scalable functionalities and UI.
Info Graphic: Restaurants will customize NCR’s white-labeled online ordering website.
Design Approach
Design Process
Working as an end-to-end UX/UI designer in Digital Ordering project, I have been involved in the early roadmap defining phase and participated in the whole design process for several main features. Generally, the design of each feature / project follows the process of Discovery, Analysis, Design and Testing. Especially, there are several specific tactics which facilitated our decision making and design success.
Empathize with Stakeholders
To fully understand the scope of this project, our team started the project by talking with our stakeholders, including Product Managers, Professional Service team and 5-6 Aloha Online Ordering customers with different business sizes. We also kept close relationship with the stakeholders during the whole design process for feedback.
From the stakeholders, we concluded several outstanding frustrations / pain points from restaurant side:
The ordering site is growing with functionalities lack of well-planned information architecture, some features are squeezed randomly on a page.
Customers would like to brand the ordering site with their own color/fonts/images, but it is time and effort consuming to brand the online ordering site.
Current ordering site is not responsive nor compliant with accessibility requirement.
Define the Scope
Our team created a sitemap for Digital Ordering based on existing Aloha Online Ordering features and collaborated with the product team and architects to refine the structure. In 2020 and 2021, I kept updating the sitemap with progress, new features and priorities.
Sitemap 2019
Sitemap 2020
Understand User Behavior
The users of Digital Ordering platform are general restaurant guests. Therefore, when it comes to the specific features, we conducted surveys and interviews. Another approach I initiated was to query the real ordering data to understand user behavior, seek design insights and validate design decisions.
For example, by analyzing users’ ordering locations, I found that people keep ordering from at most three store locations even for restaurants with dense locations at the same place. Knowing this, we provided a “recent location list” and save users from searching for restaurants.
We also embed analytics tool to track friction points on our legacy Aloha Online Ordering platform. After Digital Ordering went live, we implemented the same analytics tool for a pilot customer. I proposed design changes according to the analytics results and the recording sessions.
Order data analysis
DESIGN OUTCOME
Improved Ordering Experience
Overall, the user experience of Digital Ordering consumer side is enhanced with clear information hierarchy and visual affordance.
Scalable and Modular Features
To make Digital Ordering compatible with restaurants with different business scales and cuisine types, we recreated the ordering flow based on the new information architecture with flexibility and scalability.
One approach was to create scalable components. In the food customization flow, each modifier option is designed as a card with essential information, optional information and user action. While the design covers customization scenarios for a wide range of foods, it remains a consistent look and feel.
Checkout flow is the example of another approach, which is to design a “modular” solution for sub-flows with varying business requirements. Customers could turn on and off any non-essential features through the ordering flow, and configure the features as needed.
Assisting White-label
To facilitate customer onboarding and minimize the effort of complex CSS branding work, our design and product team defined several white-label variables including branding color, header fonts and light / dark mode. All the variables can be customized by our customers through Digital Ordering Configuration Portal.
To standardize the use of color and fonts, I also keep maintaining the style-guide and the components library.
Impact and Further Steps
Better Feedback, Better Conversion
Since Digital Ordering went live with the pilot customers, our team has been contacting with the pilot customers for the feedback. According to our customers, Digital Ordering provides modern interface and better experience, and several features including Dine-in and Curbside also help with the business during COVID!
One of our pilot customers’ ordering site were also tracked with analytics tool to inform future improvement. Compared with legacy Aloha Online Ordering, Digital Ordering was 12% higher* in conversion rate on desktop.
Keep Watching, Keep Working
Reflection
Digital Ordering is a part of NCR’s hospitality eco-system and the development team need to handle API and data from multiple resources like POS and third-party providers. Therefore, it is very important to visualize the information structure / workflow and communicate with the developers before devoting to the refined pixels. I worked closely with the development team to understand how everything’s working and what’s the feasibility to make sure I provide practical design.