构建企业产品的故事
一个用以管理商家菜单、商品价格、门店、雇员信息等的商家后台产品
Role: Lead UI/UX Designer
Deliverables: Web Applications
背景： 从桌面软件到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
重新构架新产品
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.
用户管理
价格管理
客户管理
Section 1
店铺管理
How to present store locations and organizations most efficiently
Case Study
店铺管理问题
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.
店铺视图设计
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
模版管理
Provided users tremendous controllability and flexibility
Side Notes
三个主要模版类型
Transaction Panel, Quick Menu & Receipt Templates are the three templates on VE product.
Case Study 1
结算面板模版设计
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.
目标
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
用户采访观察
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
研究： 逐级定义结算面板
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.
设计策略
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
快捷菜单模版
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
发票模版
Transaction Panel templates are used to configure buttons in each of the ordering screen on POS.
Section 3
商品管理
Divided heavy data structure by unfolding it progressively
Challenge
重新设计商品菜单结构
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.
打破旧的树状结构
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 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
设计总结和反思
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