Smule LiveJam 

2018 Q1 - Q3

iOS, Android, Web

Topics

Background

  • The Goal

Design Iterations & Tests

  • User Groups

  • Mic UX

  • Other Aspects

Results

  • Follow-ups

Design Personnel

Liang Wang - Sr Product Designer

Oscar Corrol - Sr Visual Designer.

 

This project showcases how I led the design of a large-scope project from end-to-end, focusing from design strategy, decision-making to iterations and prototypes.

0_opening.png

1_agenda.png
 

Background

Smule is a social singing app where people can sing together online.
In 2018, the company decided to make a live broadcasting feature named LiveJam.

I was the lead designer end-to-end, responsible for the research, information architect, UX/flow iterations and prototypes.
Visual designer Oscar Corrol joined after beta version and led on visual design aspects including iconography and color study.

The Goal

The vision was to enable people to sing together and connect in real time.
The company goal was to improve top line product metrics like Total Time Spent by realizing the vision.
My goal was to deliver a package of experiences that empower Smule users sing together and connect in live easily and pleasantly.

 

 

Design Strategy

Based on the vision, there are 3 user roles:

 
2_user_group.png
4_user_flows.png
 

Based on the goal I broke down the overall design to 3 main aspects:

  • Mic UX - How do I start or stop broadcasting?

  • Song UX - How do I find songs and sing?

  • Social UX - How do I engage with others?

 

 

Mic UX

Mic UX represents how singers and audience switch roles, with the metaphor that there is one mic per singer on stage.

Aiming to provide each user group with their own actions needed for the mic, I iterated the first round low-fi UX and flows, to be validated in beta test:

 
 

Mic UX Beta Prototypes

 
 

Beta Test Feedback

We built a beta version in April and tested with 200+ real users, conducted 79 surveys and 2 in-depth interviews for insights to improve the product.

 
4_beta_mic_feedback.png
 

To seek better solutions inspired by the feedback, I explored a second round for Mic UX in the directions that not only offer clear affordance on the main screen, but also simplify the mic interactions.

 
 

Mic UX V1 Design & Prototypes

I analyzed the pros and cons of all the directions and extracted the gems to generate V1 design direction that aims at a simple flow and casual vibe, which essentially follows THE one question that everyone will have an answer for:

 
2_context_overview copy 2.png
 

From this question, represented by the mic button on the bottom right corner, every next step flows naturally towards what users want.

 

 

Other Design Aspects

Similar to Mic UX, I iterated, tested and refined the design solutions for Song UX and Social UX.

We also delivered Android and web designs as part of V1 project scope.

 
6_Song_UX_Beta.png
 
 
11_song_ux_revisit.png
 
 

7_social_UX_beta.png
 
 
12_social_ux_revisit.png
 
 


 

Results V1

In August 2018, we launched LiveJam V1 on iOS and web (Android followed up in December) and brought +10% total time spent in the app within the first month.

Since then, LiveJam DAU has grown to 110k and is continuing to lift.

Follow-ups

Before I handed over the follow-up design lead responsibility to other product designers in Q4 2018, we planned a series of updates to improve LiveJam. I delivered the first a few of them with satisfying results:

  • LiveJam Discovery with new entry point UI/UX that right after release brought:

    • +3.4% Day1_LiveJam_Enter/DAU

    • +9.3% Day1_LiveJam_Click/ExploreView

  • LiveJam Open Collabs that allows singer to load a pre-recorded clip of other users and sing with it in the live stream, improved:

    • +13% total Singing_Start

    • +25% total Time_Spent_Hosting

    • +17% total Time_Spent in LiveJam

 
16_ExploreUI Copy.png