用户账户管理系统
Discover customers’ expenditure habit on food
Role: Lead UI/UX Designer
Deliverables: Responsive Design
什么是 AMS
AMS (Account Management System) is a customer-faced product that helps users manage their spending on food in hospital cafeterias, school dining areas, senior living restaurants etc. that are powered by Volante products.
产品局限和目标
An ongoing problem in the Volante AMS was that it only allowed users to manage a single account. In the account management industry, it's a common practice to include multiple accounts. Our clients were requesting this new feature and complaining how much the previous design limited the growth of businesses. After talking with the clients and internal stakeholders, my team set up 3 initial goals for the redesign:
1. Enable multiple accounts
2. Mobile friendly
3. Rebranding the product
🔍 Accounts Research
Validate the first goal by digging deep into the customers’ world
用户为什么使用Volante的账户系统
We looked into users from hospital, school and senior living, who are our major clients types. They all have their own reasons of buying food through the accounts in our system. Here are the purposes we found:
1. Using accounts for convenience (sharing with families or friends)
2. Using accounts for efficiency (payroll deduct, meal plans, autoload)
3. Using accounts for saving money (collecting points)
Since we provided multiple accounts to customers already, it indeed doesn't make sense to only allow them to manage one. The question then came to how we could provide an inclusive product for all clients.
透过用户使用数据
~ 80% percent of our users have more than 1 account
2 is the average number of accounts users have
6 is the max number of accounts users have
Insights for designing 💡
1. Enabling multiple accounts is a must
2. Different types of users led the way to a resilient product
3. The data provided a new scope for designing accounts
Further Exploration
单一账户在现有架构中的问题
To achieve the new scope, we mapped out the sitemap for better understanding. Clearly, the entire site was built upon the fact that one user can only manage one account. We interviewed the support team to identify the following blockers:
1. Structure needed to be adjusted to enable multiple accounts
2. Autoload was in an irrelevant section of loading funds
3. Payroll deduct needed be a dynamic function
Inspiration
竞品研究
Products managing accounts and money spending were diverse in the market. We researched a bunch to make sure we were building products aligned with users' mental model. Also, we got inspirations on how to restructure the sitemap properly.
League Health Benefits
Presto Cards
来自竞品的启发和思考 
1. Snapshots of accounts provided clear overview of account info
2. Quick way to load funds & view details
3. Easy way to switch between accounts
4. Using industrial languages like cards, wallets...
探索
We encountered problems while exploring, but we solved them
在新目标下探索新的信息结构
Researching competitors like League Health Benefits and Presto Cards led me to begin restructure the sitemap under the scope of enabling multiple accounts. We reviewed the new sitemap with the team to make sure we're aligned on the new structure.
初步线稿设计
Researching competitors like League Health Benefits and Presto Cards led me to begin restructure the sitemap under the scope of enabling multiple accounts. We reviewed the new sitemap with the team to make sure we're aligned on the new structure.
内部评审和反馈 
...
With the low fidelity mockups, we're able to get feedbacks from business stakeholders.
根据用户反馈修改账户卡片
When viewing the cards of the accounts, users said that it's hard to read the information given that they all looked so different. So we did 3 iterations to make sure the final design can provide the best readability and consistency for the users.
更友好的移动端设计
Mobile driven responsive web design
旧的移动端形象
Before redesign, the mobile AMS was purely a simple shrink of the web version and had a lot of usability issues, which was a big ignorance of the fact that 90% of ours users manage their funds via mobile. Our client also wanted this product to be more intuit and friendly to their users on mobile.
用户反馈的感觉和设计分析
We did an interview with the users to see how they felt about the old mobile AMS.
Mobile Goal
统一响应式设计规范
Through analysis the interview results and discussions, we realized that our product lacked of proper responsive design for mobile devices. In MVP, we needed to make the mobile version right first instead of adding a lot fancy functions considering the tight time frame.
In conjunction with the low fidelity design, we set up some unified standards to guide the responsive design, such as breakpoints, grids and layouts.
重构品牌形象
Different customers, varied branding
建立对产品的信任
Another approach we took was to enhance the product image. We all knew that how a brand image could build trust among the users. The old AMS was outdated and affected users confidence in our product. With the new branding, we were able to convey the new concept to our users: 优雅、现代、清晰. The language we crafted was able to extend across mobile and web.
MVP之后的任务： white labelling
However, we got feedbacks form some customers that they wanted a different UI system based on their own branding. The deadline was tight and in order to meet the releasing time, we talked with the clients and decided to postpone the white labelling function post MVP.
Thanks for reading ! 😊
Made with 
in Toronto I ⏰ 2017 – 2020