Case Study: Blackjack for Apple TV
Blackjack is a mobile game that simulates real-life blackjack, including splits, doubles, and insurance.
For the Blackjack team, a new touchpad remote for the Apple TV was a dream come true. The team obtained a development kit to build and test apps a few months before Apple made the formal announcement.
With the exception of a few pre-installed Apple TV apps as a reference, the challenge was to design ideas and turn them into reality for a device that had not yet been released.
Senior Lead Designer
UX Design: wireframe flows, low fidelity prototypes, usability testing
UI Design: visual, interaction, and motion design, technical documentation, presentation
Photoshop, Balsamiq Mockups, Illustrator, Adobe Animate, Adobe After Effects
The three pillars for a focused experience when developing for Apple TV were: the experience had to be immersive from the moment the user opened the app, simple and intuitive, and easy to navigate.
Knowing users might most likely have a television in their living room, it was important to understand their mindset while building the app. Users tend to be in a more relaxed state, and that meant the app had to give them a laid-back experience.
This immersive experience was brought about by using diegetic UI so it seamlessly fit into the environment. Any non-diegetic visuals like onboarding had to be kept to the bare minimum to not take away users from the immersive experience.
Unlike the Blackjack mobile app, a very large percentage of users might not have their television sets on mute. This was an important consideration so as to engage users with a sensory experience by playing relaxing jazz music, and meta experiences like crowds cheering when the player wins a hand.
Because of the vast canvas afforded by televisions, the experience had to be focused on what mattered most: bringing people to their game, and simplicity is the key to that. Unlike the Blackjack mobile app, the Apple TV version had to provide users with just enough information and feedback so as not confuse or frustrate them. Any onboarding had to be kept to a bare minimum.
The information architecture had to be revised in comparison to the existing Blackjack mobile app in order to contain all relevant features while removing those that were unnecessary.
Clicks, taps, and gestures were the three types of inputs available on the device.
The game was initially built for click input in order to target standard input through a remote.
Because the tap and gesture-based input mechanism was so ubiquitous on Apple's mobile devices, it was also considered a secondary method of navigating the program.
It was an iterative process that began with napkin sketches and culminated in a direct representation of the user experience.
Before the design process began, user flows for the core loop experience for a typical user were penciled out to give the design a clear overview of the product's functionality. Wireframes were used to provide the groundwork for the app's structure and assist the team to get on the same page as soon as possible.
The development kit and the ability to make designs, test, and iterate quickly on a television from the start helped the team significantly reduce development time.
Player buys insurance during the core loop
Player Splits their cards
Due to the unreleased status of the development kit, external play testing was not feasible. To gather valuable user insights, I organized an internal usability test involving company volunteers.
During these sessions, we observed new user patterns and identified unanticipated pain points. Through careful analysis, we pinpointed two primary challenges that required immediate attention.
To address these challenges, we implemented iterative design changes, focusing on enhancing usability and overall user experience. Over the course of two iterations, we successfully resolved these issues, resulting in a significantly improved product.
The app was created with button inputs in mind first, and gesture swipe inputs second. However, a large number of participants preferred to navigate the app by swipe.
It was much easier to swipe between buttons if they were all arranged in a horizontal pattern. To accommodate this more natural input pattern, the UI layout was redesigned to place buttons side by side so that users could easily navigate between them.
Figure out a way to let users know where they are on the UI.
To enhance user interaction, Apple TV's native apps feature elevated elements on a separate plane. The buttons were redesigned with a consistent design language, incorporating elevated states, high contrast, and visual feedback. A swift 10-millisecond transition animation further reinforces the sense of immediate button selection. This refined interface design aligns with Apple TV's fluid interaction, resulting in a more intuitive and native app experience.
It was a new challenge to design for a device that is a vital part of our living room experience and has the ability to bring people together.
Transitions should be slowed down sufficiently on a large screen to minimize jarring interactions. On the other hand, lightweight interactions such as button selections and confirmation clicks, were sped up to feel quick and responsive.
Legibility is critical when it comes to accessibility. This entails changing button sizes, font sizes, and weights, as well as working with a limited palette of broadcast-safe colors.
To minimize screen UI-loss and fit older televisions, use traditional film techniques such as title-safe and action-safe regions.
Get in touch at
California, USA