Harriet Xu
Bilibili - Live Assistant is a mobile application companion exclusively tailored for the bilibili platform, offering broadcasting support for content creators.
Design Review；Process Optimization；
High-fidelity Prototype Output；
Establish Design Guidelines with Mentor.
4 Months
Sketch
Figma
Due to the tight development schedule during the initial phase, it received negative user feedback. The purpose of this redesign is to collaborate with a mentor and establish design guidelines that align with the brand image while optimizing the live streaming experience for users on mobile devices.
Young influencers, potential live streamers, and regular users interested in live streaming.
Built-in live streaming assistant, integrating gaming, entertainment, and voice broadcasting; one-click to start streaming.
Outdoor lifestyle video streaming, beauty/live streaming, mobile gaming live streaming, virtual influencer live streaming.
Conveniently initiate in-platform live streaming, view live streaming data clearly; emotional connections.
Walkthrough Review
Responsible for the walkthrough review for the app. Research the user experience in three phases: before, during, and after the live streaming, focusing on interaction design, visual design, and performance. And presenting the findings to the team.
Developer Feedback
Without modularized output, the communication costs between the product, design, and development teams are high. To address this, we invited members of the development team to gather and consolidate the design elements that need standardization.
Competitor Analysis
Assess and analyze competitor products to identify differences in functionalities, processes, product frameworks, page layouts, visual consistency, emotional communication, and other aspects.
User Feedback
Collect product reviews from various mobile app stores and social media platforms over the past year. [Quantitative research] Distribute online surveys to seek opportunities for design adjustments that can enhance the product experience.
In the survey, the core user group consists of younger individuals who can provide rational evaluations and feedback on the product's user experience. They also exhibit a certain level of brand loyalty.
Choosing to use Bilibili for live streaming is a result of considering the otaku culture and overall user experience. However, they still hope that their feedback as users will be valued, leading to improvements in the live streaming experience.
User Persona
Age: 19
College student
"I love livestreaming my daily life during my free time. As a beauty filter enthusiast, my goal is to attract more followers through my livestreams. After each broadcast, I carefully review the livestream data to see how I performed."
Age: 25
Working professional
"I'm a big fan of anime and technology, and I even designed a virtual avatar for myself. When I'm off work, I enjoy livestreaming games using my virtual avatar. I love interacting and chatting with my audience, especially fellow anime and gaming enthusiasts."
Age: 35
Retired gaming coach
"I have decent skills in using mobile devices, although I'm not a tech expert. Sometimes, I livestream eSports event commentary, which I find quite enjoyable. During and after going live, I really appreciate having an easy way to manage my audience in the livestream room."
01 The setup before going live takes too much time, and the live streaming process is not user-friendly, which discourages new streamers from broadcasting.
02 The dashboard layout is not well-organized, and functions are scattered and placed in inappropriate sections, making it time-consuming to find the desired features.
03 The visual experience of the user interface is poor, with unclear icon meanings and low contrast between text and background, leading to unclear text and tab hierarchy.
Improving the two most frequently used operational flows.
01 Optimization of the live streaming process, removing unnecessary jumps and buttons, and streamlining the operational flow;
02 Enhancing the live room setup process to be available before, during, and after the live stream, catering to specific needs;
03 Conducting a thorough review of interaction rationality and refining the details.
Improving the rationality of function placements based on user preferences.
01 Personal center layout, modularization of similar function modules, and establishment of user-friendly icon buttons for easy recognition and operation;
02 Organize and optimize the sections on the live streaming page, avoiding unnecessary folding, and placing high-frequency functions in more accessible locations for smoother operation.
Establishing a component library and unifying visual design standards.
01 Based on atomic design principles, organize and output the component library;
02 Standardize typography and colors to reduce visual complexity;
03 Maintain icon standardization and uniformity to reduce cognitive load;
04 Verify design consistency to lower user learning costs.
A. Process optimization
Optimization of Start Live Process
Optimization of Settings Process
Cover Setting Feature Iteration
B. Layout optimization
Host Center Design
Start Live and Room Setting Design
c. Visual Iteration
Using Figma's component properties for quick and accurate application, saving time on repetitive tasks and increasing design efficiency.
Modularizing the functional components and establishing standards; Reduce communication costs, resulting in faster project iteration.
Quickly accessing consistent components reduces the workload of modifying visual details, allowing more time to focus on improving code quality.
Visual consistency is essential to ensure unified color and identification recognition, leading to a more intuitive and efficient user experience.
Typography
Icon & Color
Component Library
During the early stage of reviewing the old version and conducting user research, we identified many interaction issues. This helped us better understand the product from the user's perspective and laid the foundation for future optimizations.
By conducting usability testing to validate functional flows before launch, we gained valuable insights for logical thinking and subsequent design decisions, effectively minimizing losses during standard synchronization and development in the later stages.
I explored design, cognitive theory, and software knowledge, delving into Figma's componentization and auto-layout. These insights significantly improved my design efficiency by facilitating easy component switching and better understanding the software.
In this project, I learned to consider the overall picture from both the product and user perspectives. Through active communication with colleagues and multidimensional analysis, we were able to identify opportunities for cost reduction and deliver high-quality solutions.