GLOSS Vault

SYDNEY&HONGKONG | Personal Financial Management

Say goodbye to missed appointments and scheduling headaches. With "Paws & Plans," PetCare Plus Veterinary Clinic is revolutionizing the way pet owners manage their furry friends' healthcare.

Roles & Responsibilities

PetCare Plus Clinic

Tools Used

Visual Design UI & UX Design

Duration

Jul 2024 - Now

Dashboard Sidebar Close Up
Dashboard Sidebar Close Up
Dashboard Sidebar Close Up

Background

Bilibili is one of China’s leading video platforms, popular among younger audiences for its community-driven content and live-streaming features. As part of its expansion, the Bilibili Live Companion App was developed to enhance mobile live-streaming experiences.

However, the initial release faced usability challenges and negative user feedback due to tight development timelines. The objective of this redesign was to establish a scalable design system, improve user experience, and align with Bilibili’s brand identity while maintaining efficiency for streamers.

Bilibili is one of China’s leading video platforms, popular among younger audiences for its community-driven content and live-streaming features. As part of its expansion, the Bilibili Live Companion App was developed to enhance mobile live-streaming experiences.

However, the initial release faced usability challenges and negative user feedback due to tight development timelines. The objective of this redesign was to establish a scalable design system, improve user experience, and align with Bilibili’s brand identity while maintaining efficiency for streamers.

Initial Thinking

This project aimed to address key usability challenges and enhance the live-streaming experience for both novice and experienced streamers. Our research focused on the following key questions:

This project aimed to address key usability challenges and enhance the live-streaming experience for both novice and experienced streamers. Our research focused on the following key questions:

How can we reduce friction and make live streaming more seamless on mobile?

How can we reduce friction and make live streaming more seamless on mobile?

How can we reduce friction and make live streaming more seamless on mobile?

How can we optimize layout and interaction flows to minimize cognitive load?

How can we optimize layout and interaction flows to minimize cognitive load?

How can we optimize layout and interaction flows to minimize cognitive load?

What design system improvements can enhance consistency and facilitate better collaboration across teams?

What design system improvements can enhance consistency and facilitate better collaboration across teams?

What design system improvements can enhance consistency and facilitate better collaboration across teams?

To answer these questions, we conducted user research, competitive analysis, and iterative testing, ensuring that our design decisions were data-driven and aligned with user needs.

To answer these questions, we conducted user research, competitive analysis, and iterative testing, ensuring that our design decisions were data-driven and aligned with user needs.

User Analysis

User Research

User Journey Map

Target Users

Target Users

Aspiring and active content creators looking for user friendly live-streaming tools.

Casual users exploring live-streaming as an engagement tool.

Aspiring and active content creators looking for user friendly live-streaming tools.

Casual users exploring live-streaming as an engagement tool.

Lin

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."

Zoey

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."

Ray

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."

Research Findings

UX Audit & User Feedback

UX Audit & User Feedback

Pain Points Identified

Pain Points Identified

  • Complex and cluttered UI, increasing cognitive load.

  • Lack of a cohesive design system, causing inconsistency.

  • Friction in stream setup and data visualization.

Complex and cluttered UI, increasing cognitive load.

Lack of a cohesive design system, causing inconsistency.

Friction in stream setup and data visualization.

  • Complex and cluttered UI, increasing cognitive load.

  • Lack of a cohesive design system, causing inconsistency.

  • Friction in stream setup and data visualization.

Opportunities

Opportunities

Streamline onboarding & setup for faster access.

Standardize UI elements to improve consistency.

Optimize key interactions for smoother engagement.

Streamline onboarding & setup for faster access.

Standardize UI elements to improve consistency.

Optimize key interactions for smoother engagement.

Developer & Stakeholder Collaboration

Developer & Stakeholder Collaboration

  • Identified inefficiencies in design-to-development handoff.

  • Introduced modular design components to enhance scalability.

  • Created a shared design system to align teams.

Identified inefficiencies in design-to-development handoff.

Introduced modular design components to enhance scalability.

Created a shared design system to align teams.

Competitive Analysis

Competitive Analysis

  • Evaluate competing live streaming platforms, identify best practices in UI, engagement tools, and feature accessibility.

  • Differentiated Bilibili’s unique community-driven features while addressing usability gaps.

Evaluated global streaming platforms, identifying best practices in UI, engagement tools, and feature accessibility.

Differentiated Bilibili’s unique community-driven features while addressing usability gaps.

Design Solution

Design Solution

  1. Process optimization

Optimization of Start Live Process

Move the broadcaster's "Start Live" page to the top-level page

‍The "Start Live" page is the first screen users see when launching the app. This change caters to live streaming users' needs, allowing them to quickly fill out all necessary information on the "Go Live" page, streamlining the process and improving the overall user experience.‍

Optimization of Settings Process

Reducing interface transitions

Before the optimization, "Live Room Settings" was a subpage within the "Host Center." We merged its functions into the "Host Center" as categorized cards, eliminating an extra transition and simplifying navigation. Additionally, we made the "Host Center" accessible from the "Go Live" page, reducing the page hierarchy. These changes streamlined interactions and made features easier to find.

Cover Setting Feature Iteration

Reducing interface transitions

Before the optimization, "Live Room Settings" was a subpage within the "Host Center." We merged its functions into the "Host Center" as categorized cards, eliminating an extra transition and simplifying navigation. Additionally, we made the "Host Center" accessible from the "Go Live" page, reducing the page hierarchy. These changes streamlined interactions and made features easier to find.

2. Layout optimization

Host Center Design

3. Visual Iteration

Visual Identity

To improve design efficiency and communication with the product and development teams, and ensure visual consistency, I collaborated with the broadcasting side mentor to establish the Live Assistant component library.

Designer demands

Using Figma's component properties for quick and accurate application, saving time on repetitive tasks and increasing design efficiency.

PM demands

Modularizing the functional components and establishing standards; Reduce communication costs, resulting in faster project iteration.

Developer demands

Quickly accessing consistent components reduces the workload of modifying visual details, allowing more time to focus on improving code quality.

User demands

Visual consistency is essential to ensure unified color and identification recognition, leading to a more intuitive and efficient user experience.

Design System

Typography: Defining the redesign visual style based on user characteristics and preferences.

Icon & Color

Component Library

User Testing

Invited 13 experienced streamers to participate in a satisfaction comparison test between the old and new version, resulting in significantly improved overall satisfaction for users of the new version.

Invited 13 experienced streamers to participate in a satisfaction comparison test between the old and new version, resulting in significantly improved overall satisfaction for users of the new version.

Takeaways

Invited 13 experienced streamers to participate in a satisfaction comparison test between the old and new version, resulting in significantly improved overall satisfaction for users of the new version.

Invited 13 experienced streamers to participate in a satisfaction comparison test between the old and new version, resulting in significantly improved overall satisfaction for users of the new version.

Research and Reflection

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.

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.

Logical Thinking

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.

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.

Design Theory

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.

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.

Efficiency First

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.

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.