Customer Account Management
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.
Limitations
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
Why using accounts
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.
Looking through usage data
~ 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
How the single account blocked us
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
Researching competitors
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
Insights from competitors 
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...
Exploration
We encountered problems while exploring, but we solved them
Information Architecture exploration
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.
Low fidelity concept
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.
User testing with the low fidelity mocks 
...
With the low fidelity mockups, we're able to get feedbacks from business stakeholders.
Iterating the snapshots of accounts
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 friendly
Mobile driven responsive web design
Old mobile look
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.
Users feeling & design critique
We did an interview with the users to see how they felt about the old mobile AMS.
Mobile Goal
Making it right first
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.
Branding for customers
Different customers, varied branding
Trust building approach
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: Elegant, modern and clear. The language we crafted was able to extend across mobile and web.
White labelling post MVP
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