UI/UX design
  1. StarMaker App
  2. Xpeng App
  3. AI Cover
  4. Autohome Game UI

Graphic design
  1. FPV battery packaging
  2. logo design
  3. Pattern design


©2024

StarMaker App


Leading the redesign of a singing App and music community that boasts over 50 million users worldwide is a huge challenge.



OVERVIEW

“For a redesign, what needs to be designed?”

Generally, there are three reasons for a product's redesign.
  1. Business adjustment（Company's strategic upgrade）
  2. Experience improvement （Iteration supported by data）
  3. Unavoidable factors（Policy/boss's requirements）
This redesign involves all three reasons, but is mainly determined by the first two. 
To better understand the business side's considerations and goals, gain more understanding and resonance. Designers should actively intervene from the early research stage, understand technical feasibility and cost from the development perspective, provide necessary support (ensure restoration), and offer innovation points and effect demonstrations from the design perspective in the later marketing stage.
The “global perspective” of designers can prevent excessive focus on “aesthetics” and encourage consideration from the “value” perspective.

PROBLEMS

Business adjustment: Increase live streaming and gaming functions while ensuring singing and community as main functions.

Experience improvement:Many years without update led to lagging experience and visual style compared to similar products, and declining data.

Unavoidable factors: Government in European and American markets requires youth mode; AI development makes management see crisis and requires adding AI genes.

GOALS

Build a Pan-Entertainment Platform Centered on Singing with Multiple Developments in Social Interaction, Live Streaming and Gaming.

MY ROLE
  1. I am mainly responsible for designing the user interface of the product to ensure a smooth and intuitive user experience.
  2. Supervise and assist other designers in completing design tasks, and finish the production of the design system.
  3. Cooperate with developers to reduce redundant elements and decrease the size of the installation package.


SOLUTIONS
To ensure unified cognition and consistent rhythm within our team. Based on past experience, I communicated with two PM and summarized the main process of this redesign into six steps.
“What does the user want? What do we have?”
1、User analysis
To explore what our users want, I drafted a questionnaire and entrusted colleagues from the operation department to send it out.

This questionnaire was collected one week after its release. A total of 7,820 users participated.

Data shows：
  • 23.2% of the users are not clear about the positioning of some functions.
  • 27.9% of the users are not satisfied with the recording function. 
  • 25.3% of the surveyed users are confused about the task function.
  • 21% of the people are not satisfied with the "family" function.
  • 36.2% of the users pay more attention to the number of people in the room.
  • 83.3% of the people are not interested in the room recommendations of the application.


2、Insight

The Confusion of Function Usage
A considerable number of Starmaker users are finding it difficult to understand the app's features. This suggests that the app has serious issues in communicating its functionality. Nearly a quarter of users are unclear about the purpose of specific features, hindering their full use of the app.

Inefficiency of recommendation systems
The extremely low user satisfaction with recommendations, with a staggering 83.3% of users expressing disinterest, raises serious concerns about the app's ability to deliver personalized experiences. This could significantly impact user retention.

The truly appealing elements.
A significant portion of users (36.2%) prioritize room occupancy, indicating a mismatch between user expectations and the current design. This suggests broader design issues that may impact other product features.

3、Let's have a look at old design


We can clearly see the following problems:

-UI Issues

  • Lack of Visual Consistency: Inconsistent styles across different page elements (buttons, icons, fonts, etc.) can confuse users.
  • Inconsistent Page Layout: Variations in page layout can increase cognitive load for users.
  • Information Overload: Excessive information on certain pages can lead to visual fatigue and a diminished user experience.
  • Poor Differentiation between Primary and Secondary Information: Users may struggle to quickly locate the most important content when primary and secondary information is not clearly distinguished.
  • Inharmonious Color Scheme: Inappropriate color combinations can cause eye strain or negative emotions.
  • Insufficient Color Contrast: Some text or icons may be difficult to read due to inadequate color contrast.
  • Unclear Icon Design: Icons may not be intuitive, requiring users to spend extra time understanding their meaning.
  • Inconsistent Icon Sizes: Variations in icon sizes can result in a visually unappealing interface.

-UX Issues

  • Poor Information Architecture: Functions and modules are not clearly defined, making it difficult for users to find what they need.
  • Inefficient Information Hierarchy: Users may need to take too many steps to complete tasks due to a poorly structured information hierarchy.
  • Suboptimal Interaction Design: Button placement may be awkward, leading to less-than-ideal user interactions.
  • Inadequate Feedback Mechanisms: Users may not receive timely feedback on their actions.
  • Insufficient User Guidance: New users may require a significant learning curve to become familiar with the app.



3、Position Brand Gene
Having known what users want, it is now necessary to clarify what we need to continue and what we need to change.

According to my experience, as a singing platform with 5 million users worldwide, it is not appropriate to subvert the previous version rashly and advocate a showy design approach. Every hasty attempt may cause users to lose the long-established trust and cognitive intuition in the brand.

With this problem in mind, I conducted a competitive analysis with two designers. Through research on mainstream singing software in the market, the following information was obtained:


SWOT research has enabled us to determine the brand design direction and focus more on designing for our 
own brand.
Finally, we have screened out the following keywords to guide the direction of our design:



“Make every part concrete.”
4、Position design direction
User characteristics and brand genes are relatively abstract descriptions and often have certain conflicts. At this time, we need to use some concrete means...
For example, Mood board.


Some mood boards classified by function (partial)

This time I abandoned the traditional mood board approach. I hope that this mood board can not only bring visual style consistency to the team, but also enable the team to achieve a consistent agreement on interaction. Therefore, I led two designers to sort out the apps related to our business in the market according to the classification of functional modules. Then we discussed with the whole team, marked out those that best matched our business, and finally integrated them.

4、Design Distribution
Each time a large number of people participate in the meetings, which has caused our progress to be much slower than expected. Timewise, it is a challenge for the whole project.
As a senior designer, based on my experience, first, I will cooperate with another designer and a key project manager (PM). We will conduct a comprehensive redesign of the main functions of the App in terms of business structure, user experience, and visual aspects, and summarize and sort out the preliminary design specifications.
“Start with the recording function.”
Sort out the workflow of recording based on the business architecture adjustment information provided by the PM and the previously surveyed results.

Workflow  for  Recording


From Initial Sketches to wireframes, multiple usability tests are carried out in between to ensure that all experience-related issues are resolved before entering the formal design stage.

Wireframes


From Initial Sketches to wireframes, multiple usability tests are carried out in between to ensure that all experience-related issues are resolved before entering the formal design stage.

Finally, we have made the following design decisions（4 examples）:


From Initial Sketches to wireframes, multiple usability tests are carried out in between to ensure that all experience-related issues are resolved before entering the formal design stage.


All main pages of the recording function:



“A process that can be replicated is a good process.”
I completed the redesign of the party function in the same way and process.



All main pages of the recording function:


During the process of designing these two functions, I sorted out the basic elements of the design system.

Color
Typography
Buttons

After that, I distributed the various design tasks to the other designers in the team. My work focus then shifted to supervising and assisting the output of the other designers, and collecting and organizing a complete design system.

StarMaker App-Design system
Color

Input
HomePage Cards

Select
Avatar

Button
Icon

Typography
Popup
Navigation



During the later development phase, I worked with engineers to optimize the resource library, eliminate redundant elements, and while ensuring a unified external display, I also streamlined the code.


IMPACT
The redesign has had a positive impact on the recording experience.
  • Reducing the recording process time by 30 seconds compared to before; 
  • User participation in recording has increased by 8%; 
  • 30-day user retention rate has improved by 10%; 
  • 85% of users have given positive feedback.
  • Due to technical reasons, the recording quality did not receive positive feedback.
Due to historical factors, the resource library is complex. The company didn't provide the resources and time for optimization. We could only do synchronous optimization and small-step iterations based on daily needs, which took a long time. By December 2023, 85% of the resource library had been optimized. The results are as follows:
  • The application's loading time has been reduced by 30%.
  • The size of the installation package has been reduced by 71.4MB compared to before.


REFLECTIONS
“ Don't get on a high horse.”All that has been done so far is to avoid sudden "self - indulgence" and blind confidence in design. Reason - based operation and making design and technology serve the business are the keys to stable and efficient revision.




Thanks for watching