Ambur POS Redesign

During some down time after graduation, I was asked to help out at an aunt’s Vietnamese restaurant as a server. They use an app called Amber to do everything in the front of the restaurant and as I was using it on the first day I felt that it was incredibly confusing to use and was excessively complicated. Seeing it as a good chance for me to thoroughly practice the UX process, I decided to redesign it.

In this project I identified the issues (specifically pertaining to taking orders and checking out) and designed solutions for it.

OBJECTIVE:

To identify the pain points in Ambur’s food ordering and checking out system and redesign it for better usability

TEST PARAMETERS:

What: Ambur POS (Point of Sale) App
Who: Existing Ambur users (ie. restaurants/servers)
Why: To verify whether other users encounter the same problems I’ve found and to redesign for the better

TEST TASKS:

I sat down with five individuals and asked them to complete these tasks using a prototype. Tasks were determined based on the duties of the typical user (restaurant servers) and were used to validate that the system needs improvement. During these tests I took notes and recorded issues/ideas on sticky notes

1. Seat and take customer’s order
2. Send to kitchen
3. Ring customer up when they pay in cash

FINDINGS:

ORDERING FOOD:

Issue 1: The assigned colors on the menu appear arbitrary and pose for legibility issues.

This issue was clearly apparent. Once users were given the task of taking down an order they immediately said the different colors distracted them and made it harder to scan the menu.

POSSIBLE SOLUTION: Remove the colors and make all menu items one non-distracting color and design the entire menu a list format for clearer legibility and uniformity.

POSSIBLE SOLUTION 2: Assign one color to each category of food (pho, rice plate, beverage, etc) to differentiate between menu items and increase ease of scanning for items.

CHECKING OUT:

Issue 2a: Paying/checking out process revealed a whole series of problems. Firstly, it was too ambiguous.

“I don’t even know; I can’t figure it out. Where do I press?

Users had absolutely no idea what to do to begin the checking out process when paying in cash. After giving them hints to get them started, they didn’t understand why it was so needlessly complicated.

Issue 2b: The process was too long.

This is the current flow for checking someone out and it consists of 6 steps from start to end.

Vague check out process

Issue 2c: Amount of change returned isn’t clearly shown throughout.

The change amount only appears on step 5 and then disappears after the user selects “change” or “tip”; however, the register doesn’t open until after you hit “print to register”. This forces the user to memorize the amount up until the register opens, but its easy to forget due to all the restaurant distractions.

IDENTIFYING NEEDS

Persona: Meet Catherine

Catherine works at the restaurant as a part time server while also going to school full time.

“I want to do my best when I’m at work but I hate when I can’t do my job well because of reasons outside of my control”

Her core needs are:

1. Take orders quickly: Catherine wants to provide the best service possible and this includes being able to take orders quickly and correctly. Any misorders would mean more work for her and and being too slow results in a bad experience for the customer
2. Work efficiently: Catherine doesn’t have the luxury of taking her time when working at the restaurant. She needs to be fast and efficient, especially with several other groups of people are waiting to be helped.

WIREFRAME

When brainstorming designs I knew that my main priority was clarifying and streamlining the paying process. While ideating I also thought about how to design the menu so that it were easier to understand and decided to explore the idea of assigning a color to each category of food further.

I made a quick paper prototype* just to make sure that my solution made sense and tested it on several people who were tasked with ringing up a customer who was paying in cash. The task was done swiftly with no sort of criticism so I continued on to digital mock ups.

*I never understood why people used paper prototypes until now. They’re SO fast!!

After the payment process, I wanted to focus on the menu. My first step was to pick colors and so the criteria was that it: (1) Does not distract from the existing branding colors;
(2) looked like a unified palette; and (3) was legible with text on top.

I originally thought about using whole blocks of color and having the dish name within the block but felt that was too unrefined and distracting so I started to explore other styles.

SOLUTION

See the interactive prototype

1. Replaced the icons from the original design with a clear call to action prompting the paying sequence.
2. Removed arbitrary color assignments and gave each category of food its own color to ease scanning/filtering.
3. Moved the order details and only showed pertinent information to save space.
4. Order actions (coupon, kitchen, receipt, etc) were moved into an “Order Options” drawer so that the right side could be dedicated to just the menu.

The redesigned payment flow from start to end consists of four steps compared to the six it takes in the original design.

New payment flow: tap on the “Check out” button; choose the payment method (which is cash in this case); enter the amount of money given and tap “ok”; and give cash back to the customer.

Takeaways

This project was super valuable for several reasons. Seeing as it was my first personal UX project, it gave me the chance to thoroughly practice and teach myself a lot about the UX process. It was a small project, but it allowed me to empathize and design for a group that I could directly relate to since I was also a server at one point in my life. And lastly, it reminded me to think critically about every interaction we have within our lives.