2018 Q1 - Q3
iOS, Android, Web
Liang Wang - Sr Product Designer
Oscar Corral - Sr Visual Designer.
This project showcases how I led the design of a large-scope project end-to-end and across platforms, focusing on design strategy, decision-making, iterations and prototypes.
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 Corral joined after beta version and led on visual design aspects including iconography and color study.
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 the first package of experiences across platforms that empower Smule users to sing together and connect in live.
Based on the vision, there are 3 user roles:
An important detail here is that users can flow through these roles constantly, take turns to broadcast for each other.
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 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.
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.
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:
From this question, represented by the mic button on the bottom right corner, every next step flows naturally towards what users want.
Below are key screens of how a Rick and a Morty duet in LiveJam and get schwifty.
Other Design Aspects
Similar to Mic UX, I iterated, tested and refined the design solutions for Song UX and Social UX, followed by other important aspects such as Moderation, FTUX and Discovery.
We also delivered Android and web designs as part of V1 project scope.
In August 2018, we launched LiveJam V1 on iOS and web (Android followed up in December) and brought +10% total time spent (+33% in beta) in the app.
Before I handed over design ownership to other 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 refined entry point UI/UX that right after release brought:
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