Yuwan app
App Redesign
Over time, Yuwan’s UI design standards remained outdated and didn't receive the attention they needed. With the app's continuous growth and expansion, it became imperative to revamp the visual aesthetics to resonate with younger users.
What's Yuwan?
"Yuwan" is a Chinese social app targeting young people aged 20-30. Launched in 2015, it emphasizes voice interactions, primarily through multi-user chat rooms, with dynamic feeds, one-on-one chats, and in-app games as complementary features. (Similar products: Clubhouse, Yubo, Yalla)
Goals
While keeping the logic and functionality unchanged and avoiding excessive utilization of resources from other departments, design a professionally attractive app interface to enhance the app's taste and tone.
My Role
-
Led the design team in a comprehensive redesign
-
Collaborated with other designers established new design standards
-
Designed a new App logo and updated the VI (Visual Identity)
-
Advanced the development of the design system
-
Collaborated closely with the development team for gradual system modifications during version iterations
Team
-
1 x Product Designer（Me）
-
1 x UI Designer
-
2 x Developers (1 iOS Developer, and 1 Android Developer)
Duration
Long term ongoing
Yuwan Users
Target users are primarily women, creating a female-friendly & visually appealing app interface is a key consideration.
style exploring
Design iteration map
Narrow Design Mission
We broke down the app redesign process into manageable stages and incorporating UI improvements into the regular feature development cycles, rather than treating UI as a separate, isolated task.
Process
Style Exploring
-
Internal Feedback and Confirm Style
Due to the lack of game engine development expertise in our development team, we opted for a fixed single-page non-scrollable interface design. To maximize furniture placement, we designed the room in a loft style with furniture arranged using fixed coordinates.
Challenge
Every element is non-removable
The interface elements are complex, and some of them cannot be removed. There are more than a dozen elements that cannot be removed from the entire room list. Design optimization is the only way to improve the situation.
Due to the large number of pages that need redesigning, you have decided to categorize the app's pages into different levels, starting with the first-level pages.
Your company does not allocate a separate development version for visual and UI updates, so each UI redesign is integrated into the ongoing version's feature iterations.
color theme exploring
Animation
Time & Development Resource Limited
-
Due to the large number of pages that need redesigning, we have decided to categorize the app's pages into different levels, starting with the first-level pages.
-
The company didn't allocate a separate development version for visual and UI updates, so each UI redesign was integrated into the ongoing version's feature iterations.
Final Design
Bright / Dark Mode
-
Organizing and categorizing elements to create a logical structure within the interface.
-
Establishing a hierarchy of information, making sure that the most important information is prominently displayed.
-
Selecting and setting colors that are comfortable for users in both light and dark modes, ensuring a consistent and pleasant visual experience across different interface themes.
Design Guidelines
In the design process, we have created a new set of design guidelines, which refer as " Yuwan Design Guideline 2.0". These guidelines will be applied in future updates and iterations of the app, ensuring consistency and a cohesive design approach throughout the app's development.
Iterations
Over the past year, we have gradually updated the first-level interface, and we have now progressed to the second-level interface. However, some minor details still retain the original design from the initial version of Yuwan. Typically, for interfaces where the logic remains unchanged and the usage frequency is low, we consider deleting them in the future, without further modifications based on the design guidelines.
Impacts & Insights
-
The new UI design has enhanced Yuwan's overall clarity and simplicity, improving the user experience, especially given the app's numerous functions and labels. The updated UI aligns Yuwan's style with modern youth preferences, earning praise from users and stakeholders.
-
As the design standards are more widely implemented across the app with each update, even more complex functions can be promptly addressed. However, recent updates have focused on increasing revenue and gameplay, resulting in a more complex app. This complexity poses UI design challenges. To ensure smooth usage of new features, there's an urgent need to optimize and remove outdated functionalities.