TALE AI - Home Page Design
GAME UI/UX DESIGN
Timeline
2023 - 2024
Company name
Onto Inc. (Beijing Yujing technology company)
Founding UI/UX Designer
My Role
UI/UX Designer, Product manager, 1 Developer
Team
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 home page, 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:
Research
Wireframe
Prototype
Testing
Research
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.
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.
Our target users are Gen Z, who are tech-savvy and have a strong interest in advanced technology and gaming.
15–26 years old
List of Ideas
We want this website become more intuitive and engaging; designs should include mobile devices, tablets, laptop and desktop computers.
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.
Game Page Redesign:
Focus on creating a more story-driven design for an immersive user experience that deeply engages players.
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:
If you are interested in Landing page design, please click here:
Go to Landing Page Design
Wireframe
We want it to be clearer and more intuitive for users.
Home page wireframe
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
Prototype
Design System
To ensure consistency and efficiency across the platform, we created a design system that included reusable components, standardized UI elements, and clear design guidelines. This system streamlined development and delivered a cohesive user experience.
Home page – Banner Design
Animated Prototypes
Using Photoshop to create a more playful and attractive game image
Creating small interactions for the button on the banner to make it more dynamic and interactive
Testing
We conducted several rounds of user testing on our homepage and continuously tracked data to evaluate the performance of each feature. Overall, the results were very positive—most users gave encouraging feedback about the game experience.
However, one issue stood out: the click rate on the “Creation” button was noticeably low.
Why does the “Create Games” button so important?
In our game, we have two main functions: creating games and playing 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 plot 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.
On the header, there is a "Create" button that allows users to create any story they want.
After you click on the “create” button, a pop-up window will be opened.
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.