Client Z
Dine-in Tablet Experience
PROJECT DETAILS
Challenge: Clarify hierarchy and consistency of information between device sizes and maximize purchases made by tablet users
​
Solution: Reduce user confusion and increase sales through intuitive user experience and quick accessibility to information
​
Role: Research, Ideation, Wireframe, Prototype
TOOLS
Pen & Paper
XD
Illustrator
InDesign
Overview
Client Z is a provider of various sizes of tablets for restaurants to use to entertain restaurant customers and help them order food. They bring entertainment to the table through a robust menu of games and activities offered to the restaurants’ customers. This is a huge revenue generator and the company places a lot of value on this experience. Client Z partners with game companies to help populate the games menu, however they also design and create games internally as well.
​
Currently, the user experience for Client Z’s tablet series has led to some users becoming confused, and also failed to maximize the purchases made by tablet users, resulting in reduced income from Client Z’s tablet devices overall. We believe these issues stem from the lack of a way to preview content effectively on the devices, accidental purchases by users that often lead to frustration, and users getting lost in the interface due to the lack of a clear content hierarchy.
Approach Strategy
Discovery
We used a featured hero image to center the experience around discovering the content on the tablet first and foremost, bold headlines for navigation between sections of content, and an easy-to-use navigation bar at the bottom that allows users to quickly jump between game categories to more quickly find what they're looking to play.
Convenience
We've also designed our interface to save designers and developers time in the long run, as our design now uses Apple's standard icon sizes for the games in the entertainment section. Client Z will also be able to avoid having to redesign the interface for each new client, as our design uses a clean, familiar interface that isn't specific to one restaurant in particular, meaning that Client Z can now use the same interface across clients and easily update it in the future, if needed, all at once.
Engagement
With our design, we have not only addressed user pain points and common problems, but we have also made intentional choices to save Client Z, its customers, and their tablet users time, money, and frustration overall. Client Z will be able to maximize profits by saving time in design and development. Restaurants will be able to maximize profits thanks to a more prominent call-to-action and a more enjoyable and purchase-oriented tablet interface. Users will have a richer, more engaging experience resulting in fewer headaches, accidental purchases and refunds.
Use cases
As a z tablet user, I want to have fun and be entertained as I wait for my food to come.
​
As a parent and a z tablet user, I want to be able to find age appropriate games for my children so that I can let them play games and learn at their development level and be assured that their needs are being addressed without my intervention.
​
As a member of a large group and a z tablet user, I want to accurately choose activities for the group to do so that I can feel like a supportive and caring host taking care of my whole group's needs and desires.
​
As a middle-aged person and a z tablet user, I want to feel confident in the interface so that I feel comfortable and cared for.
Business cases
Satisfaction
One of the primary goals for our interface for Client Z’s tablets is to design an interface that both maximizes customer satisfaction while driving profits to benefit the client’s bottom line. We’ve identified four primary ways our design will do this, the first being through static advertisements displayed on the ‘Discover’ screen, which are prominently placed right beneath a featured image to maximize visibility.
Investment
Our second way is through encouraging the $1.99 purchase each time a user interacts with the tablet using informational screens to promote each game offered on the tablet, making it both easier for users to see what the device offers, as well as get drawn into wanting to pay for the content they’re previewing.
Partnerships
Our third way is through partnerships with companies, who pay Client Z to have their content featured on the device, which both increases numbers of users making the $1.99 purchase by promoting additional content, and charges companies fees to have their content promoted.
Execution
Lastly, our design aims to maximize the client’s bottom line by reducing expenses incurred by having to work with their designers and developers to create a new, custom experience for each new business implementing the client’s tablet. We designed the interface to instead opt for a more uniform experience across business implementations, with limited, easy-to-use customization options built in that the businesses can control themselves.
Personas
Miranda Mueller
Parent
Age: 43
Location: Los Angeles
Job: Middle School Teacher
Dislikes
-
Her kid not listening to her
-
Driving for long periods of time
Likes
-
Spending time with family
-
Taking her dog on walks
-
Watching shows with husband
-
Sudoku
Needs
-
A way to spend time with family
-
Find a fun way to teach her kid the alphabet
Mary Robinson
Social Gathering
Age: 27
Location: San Luis Obispo
Job: HR Rep
Dislikes
-
Awkward silences
-
Wasting time
Likes
-
Making connections
-
Dogs
-
Friends (the TV show)
Needs
-
Fun activities that stimulate conversations and connections
-
Games everyone can either play or participate in
-
Games to match the mood and group of people
Daniel Hennessey
Middle - Aged Person
Age: 53
Location: San Luis Obispo
Job: Wealth Advisor
Dislikes
-
Large social groups
-
The younger generation
Likes
-
Mountain biking and hiking
-
Keeping up with news and politics
-
Volunteering to help maintain trails
Needs​
-
Games that would be fun for older adults
-
Games to clear his mind
Project Design
We’ve started by creating a more effective call-to-action: making the purchase button both larger in size and clearer in meaning by displaying the price of unlocking access to all of the games in the entertainment screen.
Our redesign of Client Z tablet interface aims to help address these pain points. By having the purchase button on top of the screen, it creates a clear indication that the content must be purchased, but also allows users to explore before committing. We’ve also remedied the accidental purchase issue some users were experiencing by triggering a confirmation pop-up clearly explaining that the user will be charged if they choose to unlock the entertainment on the tablet — and what they get if they do pay to unlock it — as well as giving them an option to cancel their purchase and continue to browse. In this way, complaints should be eliminated entirely about a $1.99 charge on the user's tab at the end of the dining experience, saving both the wait staff and the diners stress, time, and frustration.
​
Our second design solution was to include content screens with additional information about each game offered on the tablet — this addresses the pain point expressed by users about not having a way to adequately preview the content offered before making a purchase, as it allows users to explore information about each game, see screenshots of the game in action. We’ve also included another purchase button on each game’s info screen to increase the likelihood of a purchase, as it’s a one-tap process to jump from learning about a game to actually playing it.
Flow diagram
Flow diagram of the interaction between user and the redesigned interface.
Low Fidelity WireframeS
The pain point of an unclear hierarchy and inconsistent experiences between devices sizes is tackled by using elements that are designed and laid out the same across devices and that they scale appropriately between each screen size, while still maintaining legibility at small sizes.
​
Our solution proposes scaling the advertisement proportionally between screen sizes. In this way, the effectiveness of the advertisement is maximized, and the user experience is more consistent across different device sizes. The advertisement scales between screen sizes to maintain its appearance of being integrated into the interface, versus maintaining a consistent advertisement size throughout, but having it become over-sized on the Mini and too small to effectively stand out on the Max. This way, the experience has a clear hierarchy, and advertisement venues are still prioritized.
Without Scaling
Max Size Tablet
Our Solution
Entertainment Interface
Max Size Tablet
Z Size Tablet
Mini Size Tablet
-
Tap to return to main (restaurant) menu
-
Static carousel page indicator label and tab bar
-
Static section title
-
Tap to trigger "Purchase Pop-up" screen
-
Static carousel title
-
Tap to scroll to next/previous carousel slide
-
Static advertisement
-
Static category title
-
Selected category (static when selected)
-
Game title with icon, title and description; tap to trigger the specific "Game Info" screen
-
Tap to scroll game content area to beginning of category 5
Game Info Interface
Max Size Tablet
Z Size Tablet
Mini Size Tablet
-
Sends user to "Entertainment" interface
-
Static game icon
-
Static game title
-
Static age warning
-
Static game description
-
Activates "Purchase Pop-up"
-
Static images of gameplay in slideshow
-
Reveals more images in slide show
Purchase Pop-up Interface
Max Size Tablet
Z Size Tablet
Mini Size Tablet
-
If tapped in the grayed out area, closes pop-up and brings user to the previous interface from which they came from
-
Purchase pop-up
-
If tapped, user purchases the all access pass and activates "Confirmation Pop-up"
-
If tapped, closes pop-up and brings user back to the previous interface from which they came from
Confirmation Pop-up Interface
Max Size Tablet
Z Size Tablet
Mini Size Tablet
-
If tapped, closes pop-up and brings user back to either the "Entertainment" interface or the "Game Info" interface, depending on which they came from
-
Confirmation pop-up
-
If tapped, closes pop-up and brings user back to either the "Entertainment" interface or the "Game Info" interface, depending on which they came from
Visual design
Color Scheme
#1D3A55
#AE8E64
#DFDDD0
Font Family
Mr Eaves XL Mod OT
