Table Turn
Keeping up with fast-paced restaurants
Table Turn
Table Turn is a passion project to redesign Gusano's Restaurant's POS system. It aims to help restaurant staff ring in orders quickly so they can focus on guest experience and increase their tip average.
Responsibilities
Research
Info Architecture
Visual Design
Prototype
Timeline
3 months
Prototype
Background
and Inspiration
I've worked in many different restaurants that have their own unique challenges. But a consistent pain point has always been working with an outdated Point of Sale (POS) system.
During my UX bootcamp, I worked at a busy pizza restaurant and sports bar that had a really crappy POS system. I used this as an opportunity to study and redesign.
UX and Business Goals
01 Decrease amount of time restaurant staff takes to ring in orders
02 Quickly train new staff on system
03 Decrease amount of food remakes
04 Lower food costs
05 Create a better guest experience
06 Increase server tip average
Design Challenge
How might I design a simple and easy to use tool that allows restaurant staff to quickly ring in food orders so that they can spend more time focusing on guest experience?
Understanding
Problem
In a busy restaurant environment, it's crucial to provide the staff with the tools necessary to quickly do their tasks so they can focus on guest experience.
The current solution is time-consuming, confusing and often causes frustration for front of house servers, back of house cooks, and ultimately the guests who are dining in.
Key Paint Points
01 Lack of organization
02 Inconsistent Flow
03 Information overload
04 Confusing ticket layout
What this causes
01 Time consuming
02 Complications with training
03 Special Prep errors
04 Guests wait longer for food
05 Tips decrease
06 Food cost increase
Research and
Analysis
User Surveys and 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.
Survey Highlights
100
%
of servers say their food comes out wrong every week
90
of servers have entered in a wrong order because of POS' confusing layout
%
100
%
of restaurant staff say that the POS system needs to be improved
SWOT Analysis
The Users
I created user personas to better gain empathy for what they might want and need, and to better understand their frustrations. This helped me stay grounded in how to design the best solution for them.
For the MVP of this project, I focused on our server, Tori.
The Users
I created user personas to better gain empathy for what they might want and need, and to better understand their frustrations. This helped me stay grounded in how to design the best solution for them.
For the MVP of this project, I focused on our server, Tori.
Finding the Solution
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.
User Flows
The goal is to map how a user will navigate through editing food items and sending the order.
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.
Lo Fi
Wireframes
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. During testing, users were still able to find their table numbers in the mobile screen without issues.
Tablet Table Numbers and Floorplan
Mobile Table Numbers
Responsive Design Challenges
Visual Design
Following Material Design guidelines, I crafted a brand to use throughout the POS application
Design System
Hi Fidelity
Design
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.
User Testing
The colors of the inactive buttons was confusing to participants.
They weren't sure what the white button represented and it took them some time to figure it out. I decided to go with a gray for the inactive buttons, and it tested to be a better option.
Edit screen v1
Edit screen v2
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
Updating
the UI
I revisited this project about a year later and wanted to freshen up the UI and apply current trends. I decided to stick with dark mode, but enhancing the components and giving it a more modern and up to date look and feel.
Reflections
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.