UX/UI DESIGN | 0-1 | PRODUCT DESIGN

JamFlow

Designing a gamified system to make music practice more fun and engaging.

JamFlow is an online music practicing system aim to use a gamified approach to enhance the experience of music practice. With JamFlow, music practitioners are encouraged to learn and practice in a free, nonjudgemental, and welcoming environment.

This project was completed in a team of 4 from the graduate-level User-Centered Design course at the University of Washington (Sep - Dec 2023).

My Role

Lead UX Designer

Led the UX/UI design, crafting a design system, wireframes, prototypes. The final design was solely done by me.

Project Manager

Managed project delivery (planning, execution, monitoring, control, closure), ensuring scope, team collaboration, budget, and success.

Overview

01 Objective

Imagine a music student struggling with improvisation. Stage fright freezes them, and the pressure to create on the spot becomes overwhelming. Traditional methods might not fully address these anxieties.

JamFlow steps in, transforming the learning experience. By fostering a safe and interactive environment, students can experiment, socialize, and build confidence.

02 Problem

Music practitioners struggle with improvisation and public performance. Improvisation and public performance can be anxiety-inducing, often requiring repetitive practice sessions

03 Solution

Wouldn't it be amazing to have a place to jam freely, make mistakes without judgment, and even find new music friends?

That's where JamFlow comes in! Let's dive into the features that make JamFlow the perfect platform to take your music to the next level.

UX/UI DESIGN | 0-1 | PRODUCT DESIGN

JamFlow

Designing a gamified system to make music practice more fun and engaging.

JamFlow is an online music practicing system aim to use a gamified approach to enhance the experience of music practice. With JamFlow, music practitioners are encouraged to learn and practice in a free, nonjudgemental, and welcoming environment.

This project was completed in a team of 4 from the graduate-level User-Centered Design course at the University of Washington (Sep - Dec 2023).

My Role

Lead UX Designer

Led the UX/UI design, crafting a design system, wireframes, prototypes. The final design was solely done by me.

Project Manager

Managed project delivery (planning, execution, monitoring, control, closure), ensuring scope, team collaboration, budget, and success.

Overview

01 Objective

Imagine a music student struggling with improvisation. Stage fright freezes them, and the pressure to create on the spot becomes overwhelming. Traditional methods might not fully address these anxieties.

JamFlow steps in, transforming the learning experience. By fostering a safe and interactive environment, students can experiment, socialize, and build confidence.

02 Problem

Music practitioners struggle with improvisation and public performance. Improvisation and public performance can be anxiety-inducing, often requiring repetitive practice sessions

03 Solution

Wouldn't it be amazing to have a place to jam freely, make mistakes without judgment, and even find new music friends?

That's where JamFlow comes in! Let's dive into the features that make JamFlow the perfect platform to take your music to the next level.

UX/UI DESIGN | 0-1 | PRODUCT DESIGN

JamFlow

Designing a gamified system to make music practice more fun and engaging.

JamFlow is an online music practicing system aim to use a gamified approach to enhance the experience of music practice. With JamFlow, music practitioners are encouraged to learn and practice in a free, nonjudgemental, and welcoming environment.

This project was completed in a team of 4 from the graduate-level User-Centered Design course at the University of Washington (Sep - Dec 2023).

My Role

Lead UX Designer

Led the UX/UI design, crafting a design system, wireframes, prototypes. The final design was solely done by me.

Project Manager

Managed project delivery (planning, execution, monitoring, control, closure), ensuring scope, team collaboration, budget, and success.

Overview

01 Objective

Imagine a music student struggling with improvisation. Stage fright freezes them, and the pressure to create on the spot becomes overwhelming. Traditional methods might not fully address these anxieties.

JamFlow steps in, transforming the learning experience. By fostering a safe and interactive environment, students can experiment, socialize, and build confidence.

02 Problem

Music practitioners struggle with improvisation and public performance. Improvisation and public performance can be anxiety-inducing, often requiring repetitive practice sessions

03 Solution

Wouldn't it be amazing to have a place to jam freely, make mistakes without judgment, and even find new music friends?

That's where JamFlow comes in! Let's dive into the features that make JamFlow the perfect platform to take your music to the next level.

Ready to unlock your improv skills? Spice up your practice with improvisation game!

Everyone's forming bands, and you're still jamming solo? Find your perfect bandmates and make music magic together!

Everyone's forming bands, and you're still jamming solo? Find your perfect bandmates and make music magic together!

Ready to unlock your improv skills? Spice up your practice with improvisation game!

Nervous about hitting that big audition? Our live performance simulation throws you into a virtual crowd without the real-life jitters.

Nervous about hitting that big audition? Our live performance simulation throws you into a virtual crowd without the real-life jitters.

Let's take a look at how I got here.

Let's take a look at how I got here.

Research

01 User Research

We have a lot of music friends. We wanted to rely on their valuable insights and learn from their experiences to cater the final products to their needs.

Research

01 User Research

We have a lot of music friends. We wanted to rely on their valuable insights and learn from their experiences to cater the final products to their needs.

A person doing a survey

Survey

30 responses collected

30 responses

A photo from the jam sessions
A photo from the jam sessions

Contextual Inquiry

a 2-hour jam session at UW sound lab

Two people in an interview

Interview

5 UW music students

02 Data Analysis

02 Data Analysis

I led the analysis of Qualitative insights from survey, interviews, and contextual inquiries via Affinity Diagramming, generating 4 major insights and themes.

I led the analysis of Qualitative insights from survey, interviews, and contextual inquiries via Affinity Diagramming, generating 4 major insights and themes.

03 Insights from User Research

03 Insights from User Research

A small community of diverse people
  1. Community

  1. Community

There is a disconnection between schools' music program and student body, raising the need for a close-knit community.

There is a disconnection between schools' music program and student body, raising the need for a close-knit community.

"Making music and the student community closer would be nice."

"Making music and the student community closer would be nice."

A person playing the piano
  1. Practice

  1. Practice

Practice is the best way to improve improvisation and grow confidence, but most people find it boring.

Practice is the best way to improve improvisation and grow confidence, but most people find it boring.

"Practice helps me improve memory and body function, but the process of practicing isn't enjoyable and requires perseverance"

"Practice helps me improve memory and body function, but the process of practicing isn't enjoyable and requires perseverance"

Two people playing music together
  1. Connection

  1. Connection

Music practitioners need to practice in groups, and most of them prefer to play with people who are better than them.

Music practitioners need to practice in groups, and most of them prefer to play with people who are better than them.

“Playing in a band improves your synergy, you ability to listen, and the ability to collaborate with others.”

“Playing in a band improves your synergy, you ability to listen, and the ability to collaborate with others.”

“Playing in a band improves your synergy, ability to listen, and the ability to collaborate with others.”

A woman appears to be relaxed on the sofa
  1. Environment

  1. Environment

Jam (practice) sessions are most beneficial in intimate and non-competitive environments.

Jam (practice) sessions are most beneficial in intimate and non-competitive environments.

"I realize that I perform best in an environment where I'm not necessarily too focused on the outcome. "

"I realize that I perform best in an environment where I'm not necessarily too focused on the outcome. "

"I realize that I perform best in an environment where I'm not necessarily too focused on the outcome."

04 Meet Our Users

04 Meet Our Users

Let's meet our target users - passionate musicians hungry to push their boundaries in improvisation and learn from each other.

Let's meet our target users - passionate musicians hungry to push their boundaries in improvisation and learn from each other.

Primary persona
Primary persona
Primary persona

My understanding of users translated into my design question….

My understanding of users translated into my design question….

How Might We…

How Might We…

Help music practitioners to improve improvisation skills and stay more connected to their peers?

Help music practitioners to improve improvisation skills and stay more connected to their peers?

Help music practitioners to improve improvisation skills and stay more connected to their peers?

Ideation

Ideation

01 Initial Ideas


01 Initial Ideas


At first, I played around with different ideas and worked with my teammates to choose 3 directions to improve improvisation and foster connections.

At first, I played around with different ideas and worked with my teammates to choose 3 directions to improve improvisation and foster connections.

  1. Gamified approach to improve improvisation

  1. Gamified approach to improve improvisation

  1. Gamified approach to improve improvisation

  1. Connected to a comfortable physical space for individual and group practice

  1. Connected to a comfortable physical space for individual and group practice

  1. Connected to a comfortable physical space for individual and group practice

  1. A VR/AR space that lets musicians connect globally and practice together

  1. A VR/AR space that lets musicians connect globally and practice together

  1. A VR/AR space that lets musicians connect globally and practice together

02 Setbacks and Decision

02 Setbacks and Decision

While our vision was grand, practical considerations on time and resources required us to scale back. I reevaluated our initial ideas through concept testing and peer critique. The feedback led to some changes:

While our vision was grand, practical considerations on time and resources required us to scale back. I reevaluated our initial ideas through concept testing and peer critique. The feedback led to some changes:

Cancel the VR/AR feature

Cancel the VR/AR feature

VR/AR adds complexity and gear. We opted for a livestream performance feature for peer connection and combating performance anxiety.

VR/AR adds complexity and gear. We opted for a livestream performance feature for peer connection and combating performance anxiety.

Replace AI feedback with peer feedback

Replace AI feedback with peer feedback

User questioned the authority of AI-generated feedback in improvisation games. Instead, we decided to allow peers to give feedback to facilitate connection and mutual support.

User questioned the authority of AI-generated feedback in improvisation games. Instead, we decided to allow peers to give feedback to facilitate connection and mutual support.

Replace physical space with an online community

Replace physical space with an online community

An online community can satisfy user needs in a non-competitive and welcoming environment, while requiring less time and money to build.

An online community can satisfy user needs in a non-competitive and welcoming environment, while requiring less time and money to build.

03 Design Solution

03 Design Solution

Through user research, peer critique, and concept testing, we developed our design solutions and user flow. The storyboards I drew illustrated the user scenario for each flow.

Through user research, peer critique, and concept testing, we developed our design solutions and user flow. The storyboards I drew illustrated the user scenario for each flow.

Flow #1: Improvisation Game

Flow #2: Connect and create music together

Flow #3: Simulated performance

Insight: Practice

Music practitioners need a fun way to improve improvisation skills.

Flow #1: Improvisation Game

Insight: Community & Connection

Music practitioners need a close-knit community and peer connections.

Flow #2: Connect and create music together

Insight: Environment

Music practitioners benefit from a welcoming and non-competitive environment.

Flow #3: Simulated performance

Prototype

01 Prototypes & Iterations

We kicked off with user flows in our first iteration, then took them to the next level with usability testing. 3 music practitioners from the University of Washington provided valuable user feedback.

Prototype

01 Prototypes & Iterations

We implemented user flows into our first iterations. To further improve our prototypes, we then conducted usability evaluation with 3 music practitioners at University of Washington to get user feedback.

02 Design Decisions

02 Design Decisions

I grouped and analyzed pain points revealed through usability testing, assigning them with frequency and priority. Then I led a discussion around adjusting our design to truly satisfy user needs. The following changes were made:

I grouped and analyzed pain points revealed through usability testing, assigning them with frequency and priority. Then I led a discussion around adjusting our design to truly satisfy user needs. The following changes were made:

Change #1: Livestream Added to Simulated Audience

Change #1: Livestream Added to Simulated Audience

2 out of 3 participants wanted a real audience, so we added livestream option to the simulated performance. Now you can share your simulated performance with the world (or a select few)!

2 out of 3 participants wanted a real audience, so we added livestream option to the simulated performance. Now you can share your simulated performance with the world (or a select few)!

 Before: Users practice in front of simulated audiences

After: Users can livestream their performance to real audience

Change #2: Forum to Replace Random Matching

2 out of 3 participants didn't trust the automatic matching to build connections. Therefore, we replaced it with a thriving community forum! Now you can connect with other musicians, share your music, and find collaborators in a more human way.

Before: Users connect with each others through automatic matching

After: Users can build new connections in the online forum

Change #3: Guided Onboarding Experience

All 3 testers got lost! We noticed everyone took a while to navigate our prototype. To make things smoother, we've added short intros indicative of how the system works in each section.

Before: Users were unsure what to do in each section

After: Users can follow the navigation guide in each section to explore

03 Final Design

03 Final Design

Engaging Improvisation Games

Engaging Improvisation Games

In improvisation game, users browser prompts, select prompts, create improvised work, and share and get feedback
In improvisation game, users browser prompts, select prompts, create improvised work, and share and get feedback

Make Music Friends in the Community

Make Music Friends in the Community

In improvisation game, users browser prompts, select prompts, create improvised work, and share and get feedback
In improvisation game, users browser prompts, select prompts, create improvised work, and share and get feedback

Overcome Performance Anxiety in a Simulated Environment

Overcome Performance Anxiety in a Simulated Environment

In improvisation game, users browser prompts, select prompts, create improvised work, and share and get feedback
In improvisation game, users browser prompts, select prompts, create improvised work, and share and get feedback

04 What Our Users Said…

04 What Our Users Said…

Participant 1

Participant 1

"The improvisation game is promising, and I have a strong desire to use it! There are no alternatives available in the market right now."

"The improvisation game is promising, and I have a strong desire to use it! There are no alternatives available in the market right now."

Participant 2

Participant 2

"Should I require additional musicians for my group, JamFlow will absolutely be a consideration!"

"Should I require additional musicians for my group, JamFlow will absolutely be a consideration!"

Participant 3

Participant 3

"I love how JamFlow combines the art of improvisation with technology. A definite favorite in my practice routine!"

"I love how JamFlow combines the art of improvisation with technology. A definite favorite in my practice routine!"

Reflection

01 What I learned

Reflection

01 What I learned

Design is not a linear process

There are ups and downs throughout our product cycle, and we have to make changes to reflect the updated needs and resources we have. The end product may turn out to be something we didn’t expect.

Design is not a linear process

There are ups and downs throughout our product cycle, and we have to make changes to reflect the updated needs and resources we have. The end product may turn out to be something we didn’t expect.

Design is not a linear process

There are ups and downs throughout our product cycle, and we have to make changes to reflect the updated needs and resources we have. The end product may turn out to be something we didn’t expect.

Balancing user needs and business goals

It's important to design win-win products for both users and business. While prioritizing user needs, we should also approach product design with a business mindset.

Balancing user needs and business goals

It's important to design win-win products for both users and business. While prioritizing user needs, we should also approach product design with a business mindset.

02 If I had more time, I would…

02 If I had more time, I would…

Increase diversity in participants

Expand our usability evaluation with a larger and more diverse sample of users and continue making improvements according to their needs.

A comprehensive music practice experience

Design a physical music studio where JamFlow can seamlessly integrated as a part of the studio.

Cross-platform experiences

Design a mobile app that allows users to access JamFlow not only in the music studio, but from any place they want.

Increase diversity of users tested

Expand our usability evaluation with a larger and more diverse sample of users and continue making improvements according to their needs.

Increase diversity of users tested

Expand our usability evaluation with a larger and more diverse sample of users and continue making improvements according to their needs.

A comprehensive music practice experience

Design a physical music studio where JamFlow can seamlessly integrated as a part of the studio.

A comprehensive music practice experience

Design a physical music studio where JamFlow can seamlessly integrated as a part of the studio.

Cross-platform experience

Design a mobile app that allows users to access JamFlow not only in the music studio, but from any place they want.

Cross-platform experience

Design a mobile app that allows users to access JamFlow not only in the music studio, but from any place they want.

Thanks for your time!

Thanks for your time!

Memoji of a male face smiling
Memoji of a male face smiling
Memoji of a male face smiling