POS Food Ordering Redesign
A touch-based POS product for food and products ordering
Role: Lead UI/UX Designer, 2020
Deliverables: Tablet Design
Background
Over the last few years, Volante's Point of Sale system has grown tremendously. Along with the development of the enterprise management tool, our design team worked on the overhaul of the point of sale software.
Discovery
What was in place
I led a series customer interviews & design workshops to get new design approaches . The biggest complaint we got was that our POS software was powerful but cumbersome. It took a lot time for our clients to train new employees. Our sales team also responded that previous POS styling was not appealing in the market.
What our users said...
I led a series customer interviews & design workshops to get new design approaches . The biggest complaint we got was that our POS software was powerful but cumbersome. It took a lot time for our clients to train new employees. Our sales team also responded that previous POS styling was not appealing in the market.
Discovery of competitors
Since there are already a lot POS products in the market, we did a competitor research on the major ordering screen and critiqued the pros and cons of them. Here are some key insights:
Design opportunities & challenges
Opportunities 
1. Major functions were there so we could spend more time on exploring UX details
2. It's a chance for us to evolve design language
3. We could help our clients cut cost by improving the efficiency of using the product
Challenges 
1. We need to find a balance between changing the design but not affecting the habits of users.
2. The timeframe was tight and we only had two designers working on it
3. The POS market was already competitive and we need to figure out a fresh design
Present to the stakeholders
To align the stakeholders at the beginning, we presented to them about we discovered in terms of competitors, problems and our users. This was an efficient way to demonstrate our ideas and give them confidence on our future design strategies.
Content
What are in food ordering flow
Ordering is the task that users mostly worked on and it's what most of their training time was spent on. We divided this big task into three major steps, which are "Adding items, Selecting options & Check out" so as to dig deeper into the design. To better communicate with the team, we used internal terms Quick Menu, Options and Check out on Transaction Panel.
Usability design
Quick Menu Design
Explore Quick Menu with design options
One thing we noticed from competitors was that there were so many different ways of designing the quick menu: highlighting the categories by UI, showing items with thumbnails, you name it. Rules they share were having Quick Menu on the left and items in grid. In order to align the team and get more insights out of internal users, we brought up three options with different focuses for team discussion and brainstorming.
Option 1
Improve readability by enhancing contrast on the screen
Option 2
Minimize category section to 7 tabs
Option 3
Using icons and shadows in category area
Test design options with users and stakeholders 👨👩...
Users felt strong about the approach with dark categorization area and said it's much easier to read and view than before. Although they like the using of icons and shadows in option 3, they worried that may be distracting when they were busing ordering items on the screen. And front-end team also mentioned it might slow down the loading speed. For option 2, they're not sure since it changed the current layout the most and may not fit our scope.
Final design
Options Design
Mapping Options UX problems in detail
At first glance, this screen was full of information. The goal was to simplify the option screen.
Insights for designing 💡
~ Option item tiles is the major design pain point
~ Simplifying the content to help reduct cognitive cost
~ Design for multiple Option sets scenario
Design Strategy
Optimize the option item tiles
Design Strategy
Simplify screen content
Showing users selections and how many they can select was crucial. However, the old copies and the badge design was confusing. The format of the two copies in two scenarios were not consistent at all.
What the users really wanted to see was the selected number and the max limitation of it. Minimum number was a conditional limitation.
To help with the understanding, I simplified the copy with the help of content writers and displayed the minimum by a small popup once it's set up.
Design Strategy
Provide more contextual info by micro animation
During our user testing with internal users, they told us that they felt lost when there are more than 3 option sets associated with a main item. Although it's possible for them to get used to it after a while, it's definitely confusing for first time users.
I talked with our Product Owner to see if we had enough resources and time to improve this. Our Front End team reviewed the prototype and agreed that it's not hard to implement.
Test with users and stakeholders 
...
After we tested with the users, they said the transition between the option sets were a bit slow, which might lower the ordering speed. Thus, we reduced the transition animation from 0.4s to 0.2s accordingly.
Design solution
Thanks for reading ! 😊
Made with 
in Toronto I ⏰ 2017 – 2020