FREVER
Character Editor: Boosting Revenue by 8%
The character editor, or wardrobe, is a key feature of the app, generating most of the income from users. However, it suffers from several significant usability issues, and the design feels outdated after Frever’s shift in design style.
To address these challenges, I led the UX design efforts, focusing on resolving usability problems. At the same time, I redesigned the wardrobe flow and introduced new features to enhance the overall user experience.
Role: UX/UI design
Timeframe: Oct 2020 - Sep 2023
Team: Niklas, Ruizi, Joakim
Context
& Challenges.
Premise
The wardrobe is a key feature where users can purchase clothes, makeup, hairstyles, and more. It's essential because users not only spend most of their in-game currency here but also invest significant time customizing their styles.
However, the wardrobe design has several serious issues...
It lacks a structured category system, doesn't offer a smooth shopping experience, and has a design style inconsistent with the rest of the app. Therefore, a redesign of the wardrobe is urgently needed.
Heuristic
Evaluation.
I began by evaluating the old wardrobe design using Heuristic Evaluation, supplemented with feedback from user interviews. The assessment revealed several major problems that need urgent resolution.
Problem 04
No separate category is provided to store owned assets, making it difficult for users to find them.
Restructure.
To create a more structured and intuitive experience, I began by reorganizing the category system in a logical, user-friendly manner. This involved analyzing how users naturally navigate and search for assets, and then restructuring the categories to align with these patterns. The goal was to ensure that users can easily find what they’re looking for, improving both usability and overall satisfaction.
Wardrobe Category Restructure
Testing
& Iteration.
At this stage, I conducted two rounds of user testing and subsequent iterations.
Round 1: Focused on gathering usability feedback from users to refine the design and enhance key features. This process led to significant improvements, as shown in the 'Before' and 'After' comparisons.
Round 2: Aimed at defining and solidifying the design style, ensuring a consistent visual experience across the entire app.
Testing & Iteration 1.0: Usability improvement
Before
After
Before
After
Before
After
Testing & Iteration 2.0: Which design style is better?
Result: The dark background is more consistent with the rest of Frever, and the gradient stage background behind the character makes the overall appearance more appealing.
Final Design.
After testing and iteration, we finally nailed the design. The final design resolved all the identified issues by adding new features, changing the flow, and tweaking the details, which improved overall satisfaction with the character editor.
Customize DNA: Fine-Tune Your Character's Details
Using the adjustment slider, users can precisely modify bone structure. In the DNA section, users can alter body type, face shape, eye shape, eyebrows, nose shape, and mouth shape, allowing for detailed customization of their character.
Apply Makeup: Enhance Your Character's Look
Choose from a wide range of makeup options to make your character look more stylish and attractive.
Change Styles: Create Your Unique Look
Mix and match clothes to design your own styles. Choose from a diverse range of collections and use the 'Owned' and 'All' filters to quickly locate the assets you need.
Seamless Shopping Experience: Buy What You Want
Enjoy a polished shopping cart that enables users to shop as long as they like. A seamless shopping experience is guaranteed.
