Hanx101 Trivia

Hanx101 Trivia is a trivia game narrated by actor Tom Hanks, on the Apple Arcade launched on 2nd September 2022.

The game lets players test their knowledge across a variety of categories and multiple game modes— to become the ultimate trivia master.

It is supported on platforms including iOS, macOS and tvOS.

Official Website | Official Trailer

Visual Design / UI Design
2020-22

My Role
I designed the visual identity for this game, drawing inspiration from Tom Hanks's movies and persona. And, I also worked on the user interface and experience for the Hanx101 Trivia.

Team
Abhishek Das (UX Designer)
Nandini Gupta (Visual Designer)
Lisa Francilia, EA (Art Director)
John & Rheea, Vincent Studios (Animators)
Ananya Ghosh (Illustrator)
Suyash Sharma (Illustrator)

The Man Himself!

Hanks's Vision -> Hanx101

Tom Hanks is one of the most popular and recognizable film stars worldwide. Fans can identify with many characters he has played. Hanx name is synonymous with Tom Hanks. He signs all his social feeds with the word Hanx making anyone familiar with the ‘Hanx’ signature. The Hanx logo and persona appear throughout the entire game making reference to many of his movies.

Hanx101 depicts Tom’s love of nostalgic items and quirky habits and juxtaposes them in a modern, graphic style. Hanx101 is a project incorporating Tom's passion for trivia questions across multiple categories. '101' is synonymous with 101 game mode where a player has to answer 101 questions to complete the mode.

Goal

Drive Long Term Retention through a unique Social cooperative gameplay and Trivia experience.

Based on the competitive analysis it was observed that Trivia games have a sizable audience but long-term retention is poor. This is mainly because Trivia games are memory based and the difficulty level is high. You either know the answer or you don’t.

With Hanx Trivia 101, we intend to build a game that appeals to casual players as much as to the core trivia experts.

Features

Reduced Difficulty

Co-op Games

Wildcard Play

Hot Streaks

Fun Topic Categories

Moodboard & Inspiration

The game has Hanx inspired, a family-friendly focus which becomes apparent with the retro-modern visual style.

The combination of retro styles with more modern-day design elements was a challenge to creatively blend the past and present. They are colourful, polished and use animation to guide the viewer through the game.

While Tom has an appreciation of retro things he wanted a modern and simple app-like feeling to Hanx 101. Visually we choose flat 2D art, pulling inspiration for many of the visuals from Tom’s well-known iconic movies. The UI is modern and graphic with the use of simple icons mixed with classic postcards and stamps to pay homage to Tom’s love for typewriters. Our colour choices have a modern yet retro feel.

Game logo

The logo design is very much in line with Tom's minimal quirky style.
'Hanx' is custom designed to bear a resemblance to Tom's signature with curves and extended lines. The slant in '101' guides the eye to 'Trivia' at the bottom.

Iterations

App Icon

The icon is designed to provide strong visual consistency and messaging in line with the game theme.

iOS/macOS icon

tvOS icon

Iterations

Hanx101 climbed to #3 in the Apple Arcade charts

101 Saga Map

101 saga map was one of the most challenging aspects to design because it is the primary trivia challenge mode wherein a player must answer 101 trivia questions to win rewards. There are 20 tiers on the map; each tier will have questions on any topic.

This mode was specially requested by Tom, so the idea was to reflect 'him' in a way. After multiple discussions with the team, agreed upon decision was to create isometric subsections representing Tom's movies - Saving Private Ryan, You've Got Mail and Forest Gump. The tiers are placed inside the map for the player navigation.

Each map subsection contains elements from the movies to pay homage to Tom's work.

Inspiration

After hours and hours of discussions, the concept of showcasing Tom's movie artefacts got finalised.
Idea - To create a map version of famous objects from selected movies and capturing prominent movie scenes via graphics.

Map Interactive - Drag to move, scroll to zoom in/out, double click to reset size.

Subsection 1

Movie

SAVING PRIVATE RYAN

Silhouette

Helmet

Movie Easter Eggs

Czeck hedgehogs

Normandy beach

Building ruins

Medical tents

American fighter plane

Tankers

Lighthouse

Sacks

Guns

Work In Progress/Iterations

Subsection 2

Movie

YOU'VE GOT MAIL

Silhouette

Mail Box

Movie Easter Eggs

Typewriter

Buildings

Spring trees

Macintosh

Laptop

Yacht

Cordless Mobile

Work In Progress/Iterations

Subsection 3

Movie

Forrest Gump

Silhouette

Ping Pong Paddle

Movie Easter Eggs

Chocolates

Bus

Bench

Bubba Gump Cans

Crowd following Tom

Mailbox

Feather

Signage

Work In Progress/Iterations

Stamps & Animations

Stamps are the main visuals for the players to understand progression. Each stamp has a nod to the movie from Tom Hanks much like easter eggs and ties in overall with the change to UI when the player progress in the game.

The animation is used to link the stamps together as they will transition from one scene to another when you complete a chapter.

The Post

Splash

A Beautiful Day in the Neighborhood

The Terminal

Captain Phillips

Joe Versus the Volcano

Sleepless in Seattle

Big

Apollo 13

The Man With One Red Shoe

A League of Their Own

Stamp Animations

Topic icons

Trivia topics are communicated by the use of simple vector icons. In order to create excitement for the player as they get ready to go to a trivia battle, quick topic animations let the player know what topic they will get next before the questions start.