Story of Building an Enterprise Product
Product for users to manage menus on POS and Kiosk across stores.
Role: Lead UI/UX Designer
Deliverables: Web Applications
Platform change: switch to cloud web
From 2018 to 2020, I contributed to this cloud-based enterprise product, which has been in the market for over ten years. Our major task is to roll out a new version for web instead of the old desktop software under the following goals:
1. Restructuring the entire product
2. Building a robust system to satisfy the requirements of users from different levels and verticals
3. Solving business problems for clients such as Compass Group, Morrison Healthcare etc.
4. Rebranding the product and building a new design system
Define the new product
Volante enterprise is a product aiming to help managers organize and manage the food service at the end level. In order to get an overall picture of the product, we firstly identified six types of controls we would design for. I provided design solutions for Store Management, Menu Management and Templates Management.
User Management
Price Management
Customer Management
Section 1
Store Management
How to present store locations and organizations most efficiently
Case Study
Store management problems
The biggest challenge of this product to understand complex business levels of our clients, who often own more than 100 stores through different countries and regions. And they want strong controllability over their local stores, brands and customers.
Store Views
This feature consists of two views: Map view allows users to view stores by countries, provinces and cities in both Canada and States while Tree view explains how all the stores are organized from top to bottom.
Final mockups of Store Management, Updated version 2018.12
Section 2
Template Management
Provided users tremendous controllability and flexibility
Side Notes
Three templates types
Transaction Panel, Quick Menu & Receipt Templates are the three templates on VE product.
Case Study 1
Transaction Panel Template
Transaction Panel templates are used to configure buttons in each of the ordering screen on POS. It's an efficient way to avoid repetitive work when similar buttons and layouts are needed at the end level.
Goals
1. Redesign to make it work smoothly on the web
2. Make the whole feature more intuitive
3. Extend existing scope to provide more possibility
User interview insights
1. Enterprise user can only create one template under each mode type.
2. Lack of clear layout and interaction pattern
3. Right click doesn't work very well on web applications
4. Hard to find information due to crowded interface
High-level Research: Define Transaction Panel from end to end
For enterprise users, they need to be able to control how the ordering screen look like across stores and their terminals, which brought forth the idea of template. For store users, they need to customize different templates for terminals users and quickly update them. For POS terminal users , they order food and do the daily tasks on the panel but don't participate in configuring it.
Design Strategies
Strategy 1
Create a clearer layout by defining the space
There wasn't a clear path of selecting, moving and editing buttons in the old design. With the new layout concept, it becomes more resilient.
Strategy 2
Optimize the flow of finding buttons by categorization
With more than 100 buttons/actions in the list, it’s overwhelming for users to view and find them. After analysis, we realized they can be grouped in 4 types by use cases: configuring menu, transaction, admin & general. We referred to the psychology that how humans categorize things in the strategy. It not only reduced the cognitive cost but also provided a clear path for them to find the targets.
We tested 3 different options regarding how to display this new grouping hierarchy and finally we picked option 2 because it matches with users current expectation the most and they think the button styling is easier to interact with.
Strategy 3
Make customization more intuitive
After interviewing with our users, we got the business requirements that this function, like Quick Menu, should be customizable. Here are 3 major factors we took into consideration based on tasks users need to accomplish:
Factor 1: Moving buttons around the panel
Solution: Drag and drop
Sample screen
Factor 2:
Changing layout of the panel
Solution:
Editing colours and fonts in details area
Factor 2:
Altering UI of buttons such as colours and fonts
Solution:
Editing colours and fonts in details area
Case Study 2
Quick Menu Template
In conjunction with Transaction Panel, Quick Menu is where cashiers and bartenders order food for their customers.
Edit Button Details
Change template grid
Delete Buttons
Case Study 3
Receipt Template
Transaction Panel templates are used to configure buttons in each of the ordering screen on POS.
Section 3
Menu Management
Divided heavy data structure by unfolding it progressively
Challenge
Redesign Menu Structure
Menu is where our users do their daily tasks and it contains multiple levels of management. Concepts are used to manage brands while divisions represent stores at different places. Items in the category grouping are the last level of this structure. The old tree structure requires a lot clicking and is very cumbersome when there are numerous concepts, divisions and categories.
Broke old structure
After mapping all the scenarios of those four levels we adopted a progressive disclosure strategy. We broke this structure into four parts and display to users as they dig deeper into the menu. By using the breadcrumbs and backward on browsers, they can easily switch between these levels.
Final mockups
VE Design System
Design System is an ongoing process...We started with small components and gradually build our systems based on user scenarios, which ends up improving the efficiency between designers and FE tremendously.
Sample guidelines and components
Takeaway
In this journey of building an enterprise product, I've learnt how to think from a higher level and build a robust system to satisfy different clients' needs. Talking to users and receiving feedbacks from them really made me feel how a better designed product can change people's lives.
Thanks for reading ! 😊
Made with 
in Toronto I ⏰ 2017 – 2020