Taking Sprout from [0] to [1]
🎧

Taking Sprout from [0] to [1]

Role
Product Manager & Designer
Tags
Product Development
UI/UX Design
Description
App prototype that allows creators to train together sounds and connect effortlessly.

Role

Product Lead, UX Designer

Duration

10 weeks

Tools used

Figma, Miro, Marvel
 

Team

Alix Cui
Constance Horng
Jialin Zhuo

What I did

Research: Designed, conducted, and analyzed user interviews. Conducted usability tests and heuristic evaluations.
Design: Brand identity. Lo-fi wireframes, conceptual development to mid-fi screens, refined features for the hi-fi prototype, and interaction design of the high-fi prototype.
 

Overview


Problem

When small music creators network, they discover breakthrough opportunities, learn from each other, and expand their creative horizons. But in real life, they rarely network because it feels tedious and disingenuous.

Challenge

How might we create an inspired and organic musician networking experience ?

Solution

💡
We conceptualized a musician networking platform for small creators, where musicians can interact by chaining 30-second musical continuations to each other’s 30-second creations. [Explore the prototype]
 
 
notion image
notion image
notion image
 

Defining needs → challenges


What empowers musicians? How do creators experience the modern musician landscape?
🎵
11 music creators
🎙️
30-90 minute interviews
We mapped our observations and identified key insights via empathy map analyses:
notion image
 
The brainstorm led us to three divergent design challenges for each musician pain point:
How might we...
...eliminate the anxiety that comes with networking?
...make client work and making ones own music feel like one job?
...keep listeners engaged in ways that involve music?
 

Ideating solutions


Wes came together to generate solution ideas for each identified pain point.
notion image
notion image
 

Prioritizing ideas


And narrowed down our ideas into 3 potential solutions and flushed the ideas out into experience prototypes (not pictured).
notion image
 
Based on our assumption testing and idea evaluation across problem frequency, density, and idea novelty, we elected to focus on a collaborative musical networking solution to solve the pain point of terrible networking UX.
 

A universe where networking and play converge


Sprout is a space for creators to network through “Music Trains” by chaining 30-second soundbites to each other’s work (inspired by the “Pass the Story” icebreaker from our pre-school memories).
 

Initial concept sketches


SWIPE VIEW INTERFACE
Users are able to see one sample of content (one soundbite in our case) at a time.
notion image
BULK VIEW INTERFACE
Users compare between soundbites when selecting which ones to save.
notion image
We opted to go with the bulk view Interface because of 3 primary reasons:
I. VISUALLY ENGAGING & NOVEL
The bubbly playful design and unique features translates to an experience that welcomes creativity, and creativity-enabled connections comprise the life-blood of our solution.
II. EASE OF SOUND RETRIEVAL
Swiping interface requires multiple gestures and makes it easy to lose specific soundbites.
III. COMPARATIVE SELECTION
Bulk view allows other soundbites in the batch to influence a user’s decision to interact. Unlike swiping interface, this design does not force the user’s jurisdiction of what sounds are ‘good’ or ‘bad’, which may hold an inconsistent threshold.
 

V1 features and storyboards


Our initial 3 must-have user stories involve the following tasks:
1️⃣ Posting a soundbite
2️⃣ "Chaining" a soundbite
3️⃣ Tracking the evolution of your soundbite and connecting with a collaborating musician
notion image
 
 

Lo-fidelity prototyping


But we tested our low-fidelity prototype (snippet on right) with 3 users, and among other learnings realized that we needed to reconfigure our main user stories:
notion image
All the participants interacted with the prototype through marvelapp.com, and we recorded:
🖐️ nonverbal and verbal reactions
🔀 deviations from expected task flow
⏳ time taken to execute each task.

Key findings

✂️
Appending sounds is more novel and creatively accessible than mixing. Our original idea was to allow users to remix each other's sounds, but through these interviews we learned that chaining sounds allows for more creative collaboration, and expands accessibility to more creator types.
🤹
MVP user stories needed re-defining Task 1 and task 2 in our usability tests (posting and remixing sound bite) were very similar. To emphasize the social nature of the product, we redefined the tasks to be: (1) adding to sound, (2) tracking sound updates, and (3) connecting with a collaborator.
🌌
Sleeker visual identity To appeal to our user base, we would want to strike a balance of slick modernity and bubbly creativity in our interface design. Therefore, we opted for a dark-mode sleek design with bubbles and vibrant colors to preserve the playfu
 
 

V1 high fidelity screens


Discover sounds to interact with

explore
We designed the explore screen to feature sporadic batches of five sounds at a time to encourage popularity-agnostic artist discovery.
Users can listen to the sound, learn more about its evolution, and explore the artist behind it by clicking on the sound.
notion image
 
evolution
Each sound is part of an infinitely expanding sound train, interconnecting genres and musician networks.
Users can click into a sound's train from its popup to explore the various other artists that have contributed to its evolution.
The page is scrollable to accommodate for different scales of evolution.
 
notion image

Add to a sound

studio
Cold messaging can be daunting, but extending a musical olive branch in Sprout should’t be.
I designed the sound creation interface to guide the users through a three-step interface and alleviate anxiety.
notion image
 

Concepts for future extensions


Be discoverable

profile
If networking was all about reaching out, it wouldn’t be sustainable. Making your creativity discoverable should be seamless. We focused on making the UI simple and the UX easy by designing according to existing mental models.
 
notion image
 

Nurture your network

messaging
As a networking tool, having an environment for users to search and message one's connections is almost expected. Implementing chat would be low priority, however, as it demands high time + dev allocation, and switching costs from existing messaging clients is extremely high.
notion image
Built with Potion.so