TALE AI - Landing Page Design

GAME UI/UX DESIGN

Year of Completion

2023 - 2024

Company name

Onto Inc. (Beijing Yujing technology company)

Website: Taleai.io/play

Game website

Problem Statement

Tale AI is an AI-driven text adventure game that allows users to input a few sentences, and the AI generates a unique interactive story for them.

As part of this startup project, my role was to redesign the original website, improving both user accessibility and overall user experience to make it more intuitive and engaging.

Think About Audience First

15–26 years old

Our target users are Gen Z, who are tech-savvy and have a strong interest in advanced technology and gaming.

We can divide the product’s audience into three main groups:

First-time users
Recurring users
Investors

All of them have similar goals, but slightly different needs. More clear guidance is needed for new users and Investors and more efficiency is needed for recurring ones.

Understand Users’ Context

WHEN.

I assume users will play this game when they’re bored and want to create a fun story, or when they’re dissatisfied with the plot or ending of a movie, drama, or book. This platform allows them to rewrite and customize the story to their liking.

WHERE.

Users play this game at home on laptops or desktops, or on the go using mobile devices or tablets, such as during travel on subways or buses.

FEELINGS.

Excited, creative, confused. New users might feel confused about the game and how to start a game.

What are their key needs?

Ensure clear guidance and understanding of the game upon entering the website without confusion.
Allow users to start a game quickly, minimizing time spent on selecting options.
Provide an engaging and immersive gaming experience.

List of Ideas

We want this website become more intuitive and engaging; designs should include mobile devices, tablets, laptop and desktop computers.

Offer a clear and engaging guide for new users to quickly understand the purpose of our games.
Present concise, informative content for investors to gain a comprehensive overview of our products.
Reflect and align with the brand's overall vision.

The landing page should be the top priority, designed to:

Color Selections

#010101

#FFEBD5

#30305B

#C85757

#7870CE

Dark grey and dark purple: create a mysterious, immersive atmosphere that draws users into the gaming experience, providing a sense of depth and intrigue.
Bright purple: adds a touch of energy and highlights important elements
Bright beige: balances the darker tones, offering a neutral backdrop that keeps the interface readable and approachable.
Red: is used sparingly to indicate urgency or to grab attention, making it ideal for notifications, warnings, or key interactions (call-to-action button).

Sketches – Landing page

The landing page mainly includes 5 parts:

Header
Welcome Screen: Brief introduction to the game with an engaging image.
Short Trailer: A quick walkthrough to guide users through the game.
Game Features: Overview of what the game offers.
Diverse Story Genres: Play limitless stories powered by AI.
Be the Creator: Option for users to create their own stories.

Rapid Prototyping for User Testing

The title lacks clarity and doesn’t effectively communicate what the product is about. Users only recognize it as an AI-driven game but don’t fully grasp what we do.
Without watching the video/trailer, it's hard to understand the product’s purpose.
The chat feature feels overly verbose, and its relevance isn’t clear. It needs a clearer explanation of why it’s important.
The page should include more information on how the game works to give users a better understanding of the product.
It typically takes users more than 2 mins to understand our products.

User Testing & Feedback

Opportunities for Landing Page Design

Since we couldn't create a high-quality trailer before finalizing all the designs, we decided to remove the video from the landing page for now. As a result, the remaining content needed to be more easily accessible.

1st Section

“Make the title more informative, and ensure it stands out as the focal point of the hero section.”

Game Section

“Provide a clear demonstration using fewer words and more impactful images.”

Overall Design

"Create more engaging designs that are connected to storytelling and AI."

Revision of 1st Section

Create a more informative, centralized title to help users quickly understand Tale AI.
Use distinct colors to highlight key information and capture users' attention.

Landing Page Style

Utilizing a ripped paper design style to give the impression that you're reading a unique book about our product.
Additionally, incorporating a light beige color to contrast with the background and emphasize key information.

Prototyping

/Story creation

/AI integration

In our game, after Chapter 1 appears, users have the freedom to shape their story by either:

Writing their own creative response
Choosing an AI-generated option

In the refinement process, our goal was to communicate the message as clearly and simply as possible.

We identified the main features of our game as:

Story creation
AI integration
Playing pre-existing games

To help the audience quickly understand our product, I chose to create a GIF/animation rather than a static image, using Figma and Adobe After Effects.