Table Turn
Table Turn
Hamboards Landing Page
Engaging the right users to increase conversion rates
Hamboards Landing Page
Engaging the right users to increase conversion rates
A little background and inspiration
I’ve worked in many different restaurants that have their own unique challenges. But a consistent challenge I have faced in many restaurants is their outdated Point of Sale (POS) system. POS systems have seen my darkest moments of frustration, panic and confusion, and they never seem like a priority for upgrade and often become overlooked. The POS system that I used as a front of house server and bar tender was a good opportunity to study and redesign.
The Problem
Restaurant servers need the ability to quickly and efficiently ring in and edit food orders
in a fast pace and busy environment.
This ugly thing is not cutting it:
Some obvious issues:
-
Lack of item organization
-
Confusing ticket layout
-
Cluster of buttons
-
Inconsistent and confusing flow
What this causes:
-
Longer time spent ringing in items
-
Kitchen overlooks special prepped items
-
Causes frustration, confusion, anxiety
-
Training new staff on POS is time consuming
-
Wrong food is made
-
Guests wait longer for food
-
Food cost increases
-
Guest experience effected
-
Server tip decreases
Goals and Business Strategy
Redesign into a simple and intuitive product. Some goals I’m hoping this would accomplish:
-
Decrease amount of time servers spend ringing in orders
-
Eliminate frustration and confusion interacting with POS system
-
Easy and quick training for new staff
-
Ticket Design eliminates overlooked items in kitchen
-
Decrease amount of food remakes
-
Lower food cost
-
Increase server tips
-
Create better costumer experience
Core Functionalities
Organized Ticket Layout
For both servers and kitchen staff, this ticket layout makes edited items visible and organized.
Edit Page
Easily and quickly edit items upon guest’s requests. Logically organized so servers can glance at the screen and find items quickly.
Hand Held Device
Allows for mobility and taking orders directly at the table. Users can perform the same tasks between both tablet and handheld device.
Product
Definition
The Process
I followed these key phases for this project
Research
Plan
Design
Prototype
User Interviews
I conducted user interviews and surveys to better understand how the restaurant staff used the POS system. I wanted to identify any consistent pain points and uncover behaviors or workarounds.
100
%
of servers say their food comes out wrong
every week
of servers have entered in a wrong order because of POS' confusing layout
90
%
100
%
of restaurant staff say that the POS system needs to be improved
Honestly, YIKES.
Competitive Analysis
I researched the market and found that the top companies in the game right now are Rezku, Toast, and Touch Bistro. Reviewers are excited about cloud based POS systems versus old school legacy terminals because of their ability to access information from anywhere, more secure networks, and mobility.
This redesigned POS targets the pain points that are specific to Gusano’s restaurant. Although other POS systems are some what customizable to fit different restaurant’s needs, my goal is to completely tailor this redesigned POS to fit Gusano’s needs.
User Personas
After analyzing the survey results, and conducting user interviews, and created personas to represent each staff position of the restaurant that this redesign is aiming to affect: Servers, Cooks, Hosts, Managers.
User Stories
The goal is to figure out what Tori’s persona would want to achieve with the POS system.
I define the broad features, or epics, that Tori would want, then further broke those down into more specific features.
Journey Mapping
The goal is to lay out Tori's current interaction and process when using the POS system. This helps identify where the pain points lie and how I can solve for them.
Current
New
User Flow
The goal is to map how a user will navigate through editing food items and sending the order.
Low Fidelity Wireframes
At this stage, I was laying out the basic structure to the screens. I wanted to only focus on the logic and organization of the components before adding any colors or branding.
A challenge I faced was designing responsive screens that can accomplish the same tasks, while also designing an intuitive flow that fits the real estate of the different screen sizes.
Because the screen on a mobile device is a lot smaller than the tablet, I decided to eliminate the display of a floor plan and instead only display the user’s tables. However, on the mobile screen, users still have access to the same functionalities of the tablet design, like real-time ticket times, adding a new table, transferring a table, picking up a table and viewing all checks.
Responsive Design Challenges
Tablet Table Numbers and Floorplan
Mobile Table Numbers
Usability Testing
This screen shows the ticket order and the selected food item's edit options. Initially, I thought having this information on the same screen would be helpful for users. But during testing, users had to scroll A LOT to get through all of this information.
A lot
Of
Scrolling
Became
Super
Annoying
A solution to better organize the screens were to split the information, the ticket and the menu, into two separate screens.
Users were used to using bigger screens for ringing in orders, and have always seen the ticket open and updating as they navigated and edited menu items. Because of the decision to introduce a new concept that separates the ticket from the menu, it was crucial to guide them through the flow with obvious instruction.
UI and Branding
Following Material Design guidelines, I crafted a brand to use throughout the POS application
Typography
.png)
Color pallet
Design System
Hi Fidelity Wireframes
I began to add color and style to the wireframes, and tested for the best iterations with the users. I used color to help with the organization and grouping of items throughout the app.
Material Design
I studied Material Design Guidelines and applied it’s components throughout the product.
The floating action button helped to navigate to more options on the mobile screen
Other components from Material Design was used throughout the screens
User Testing
When testing the screen that displays the sandwich toppings, a couple users asked what the colors of the buttons meant, which let’s me know that the color choices weren’t the best. At first glance, the purple buttons do look as if they are the active buttons, and the white buttons are inactive:
First iteration: white active buttons
I decided to make the purple buttons the active buttons that represented the toppings already on the sandwich, and chose a gray to represent the inactive buttons. This made a lot more sense and users understood the concept a lot quicker without asking for clarity.
Second iteration: purple active buttons
I also tested user’s preference of the ‘Add Table’ button. Majority of users preferred the FAB button. One participant said that it was easier to tap because it was closer to her thumb as she was holding the device. Another participant said she didn’t know right away that the square add button was even a button
Prototyping
After designing all the screens, I jumped into prototype mode in Figma and created clickable prototype for both tablet and mobile devices.
Tablet prototype
Mobile Prototype
Reflection
I explored new approaches in this project that have definitely level upped my problem solving process. Before every deliverable, I defined what that specific goal was and what I was hoping to achieve by the end of it. This forced me to focus on the core problem that was defined and kept me within the scope of the project.
I used this project as an opportunity to study Material Design and work within it’s guidelines. I once had assumptions that working within Material Design Guidelines would strip away some creativity, But then I realized that understanding it can actually help with creativity and apply new functionality to the app.
There were plenty of moments when I was confused about how to design certain tasks, especially translating those tasks from tablet to mobile. I researched Material Design components, like the FAB button, and it totally helped solve a lot of the problems I was facing.
Designing a product that I am familiar with put into perspective how much user research is necessary for products and industries I have no idea about. I’ve been a restaurant server for about 8 years and was surprised to learn a lot about other user habits. Consistent communication with users is so very crucial throughout the whole process, cause they are the whole point of all of it.