TALE AI - Home 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
Project 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.
Let’s State the Problems!
Following are our original designs:
Original Home Page
Original Game Page
The banner on the home page displayed unrelated information.
The Explore section on the home page is overcrowded with too much information, making it difficult to focus.
Our game is a story-based game, so instead of just chatting, we need to find a way to provide users with a more engaging gaming experience.
Problems:
Think About Users’ 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.
Offer the freedom for users to report any problems or provide feedback about the game.
15–26 years old
Our target users are Gen Z, who are tech-savvy and have a strong interest in advanced technology and gaming.
First-time users
Provide some guidance for users, such as popular games on the banners, so users can start playing right away.
Recurring users
Use algorithms to recommend users the games they might like according to their preferences.
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:
Home Page Redesign:
The banner should be larger and more prominent to immediately capture users' attention, offering more valuable information upfront.
The design should be intuitive, avoiding overly dense content to ensure a clean and user-friendly experience.
If you are interested in Landing page design, please click here:
Go to Landing Page Design
Game Page Redesign:
Focus on creating a more story-driven design for an immersive user experience that deeply engages players.
Let’s start redesigning the Home Page!!
Prototyping – Home Page
The home page mainly includes 5 parts:
Banner - provides recent updates and the most popular games
Pick up from last time - shows the game history, so you can pick up what you played last time quickly
Recommendations - recommend games according to your preferences
Most popular games
Discover Genres - list of different game genres
The banner looks like news, users want it to be more attractive and playful
The click rate for the “create games” button on the upper right corner is low. Seems like users are afraid to create new games.
User Testing & Feedback
Why does the “Create Games” button so important?
In our game, we have two main functions: Create games and play existing games. For many users who come into our platform, they want to create their own stories. Maybe they are not satisfied with a movie plots and want to revise it by using our “Create” feature, or they just want to create a brand new story.
That’s why we want to encourage users to click on the “Create” button and generate their own games.
Redesign Part 1 – Banner Redesign
OPPORTUNITIES
Large title having strong contrast with the background image
A Call-to-action button displaying in the banner, so user can play the game right away.
This banner looks like an article and the image is a bit small. We want to emphasize the game image and game name, and of course, the call to action button “Play now”.
So users can be attracted by the image directly and at the time they are interested in this game, they can click on “play now” to start playing the game right away.
A larger and attractive image displayed in the banner
Final Banner Design
What I Designed:
Using Photoshop to create a more playful and attractive game image
Creating small interactions for buttons to make it more dynamic and interactive
Redesign Part 2 – Lack of Click Rate For ‘Create’ Button
Let me introduce the creation process first!
After you click on the “create” button, a pop-up window will be opened.
On the header, there is a "Create" button that allows users to create any story they want.
In this box, users can enter 1-2 sentences to describe the story they want to create, such as “Create a story in a medieval setting”
Then you can add any keyword you want, such as “magical world”, “anime”, “romance”
Then AI will generate a brand-new story for you. The process is easy and it’s quite exciting to read the story, right?
However, many users are afraid to click on this button.
How can I improve this function??
What about pulling this process out on the home page? So all the users can see it and understand it’s simple!
I added a ‘Create Story’ section below the banner, so users can directly create a new story here!
Additionally, if you're unsure what kind of story to create, you can click the "Get a Random Idea" button, and the system will generate one for you.
