ASKSNIFF

SYDNEY | Acutely Sick Kid Safety Netting Interventions for Families

Roles & Responsibilities

Tools Used

Duration

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?

User Research

User Journey Map

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

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

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.

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

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

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

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.