Chris Pan | Portfolio

Home

About

Resume

Context

People Problem

"I want to engage with my friends through more interactive and fun ways when we're not together."

Solution

A gamified karaoke app, that allows for creation and discovery on top of a social space for friends to connect and jam out.

Role

Product Designer

Purpose

Personal Project

Timeline

May - Aug 2022 (4 months)

Preview ~ Final Designs & Prototypes

01 Jam

The meat and potatoes of JamParty, an interactive "karaoke" room where friends group to play games using their favourite songs.

02 Create

Explore all the features of a "Jam" while you're alone. Sing the same songs, play some solo games and share with your friends.

03 Connect

From the homepage, navigate to your own profile or social tab to see everything friend related.

04 Onboard

Try songs/games, and join jams before signing up. When you're ready, provide only the essentials to get you jamming ASAP.

Sprint ~ Karaoke

This project began with a design sprint centered around the theme of a karaoke app for young adults. With such a vague theme, the app had the potential to take many different directions. Would it be content based? Something to grow aspiring musicians? Maybe a private karaoke room for friends? To conjure up the value of the app, and solidify a direction, a collection of related “How might we...?” prompts were generated to try to tackle common problems related to karaoke. They were then grouped based on similarity and categorized into 5 core themes: How might we…

help users discover music that matches their taste?

help users feel safe and confident?

create public and private spaces to interact?

foster deeper connections in an online space?

help users discover content and keep the session going?

From these HMW's, different solutions and opportunities were conceptualized, and continuously added onto through a "Yes and…" exercise. Finally, the most popular concepts were voted on.

Ideation & User Research

After the sprint, I designed the top 9 concepts in billboard form, which included low-fidelity screens and short descriptions. I then brought these billboards to conduct my own user research and validate the concepts.

I presented the concept billboard to 9 participants. They were asked on their top 3, bottom 3, which 3 would make them want to try the app, which 3 they believed were necessary for the app to succeed and general opinions. In addition, some usability testing was conducted when the opportunity was present. I then took the opportunity to summarize the findings from each concept, into an overarching opinion, positive, neutral, and negative points, and recommendations.

After the interviews, I organized the participants' feedback to find common themes, understand the target audience's wants and summarize them into 3 key findings.

UXR ~ Key Findings

01 Privacy

Participants prefer a more private app based on connections over a public app based on content.

Recommendations

Friending system over a follow system
Strive for approx. 75% private and 25% public
Scale down content based concepts

02 Interactivity

Participants want access to fun and interactive concepts beyond just regular karaoke.

Recommendations

Put games at the forefront alongside karaoke
Introduce challenge
Allow for easy expression — reactions

03 Familiarity

Participants prefer a personalized experience, with the ability to customize and collect.

Recommendations

Connect with outside apps
Have customizable user profiles to allow for more expression
Personalize music and game discovery
Implement a "like" system

Analysis

After completing my user research, I took my findings to create a project brief, giving my product structure and detailing important principles I could refer back to during design. This was not set in stone, and was something I could always adjust upon new data or realizations.

Main Hypothesis

"If we help users connect through music and synchronous interactive experiences, it will strengthen their relationships."

Main Scenarios

You're bored so you call your friends to play games
You want to record yourself singing a song
You want to play around with features to record and send to friends

Business Opportunities

Let users hang out through music and related games in an interactive setting
Sing easily with an extensive library of music
Live synchronous singing with no delay

Principles

Privacy
Interactivity
Familiarity

Final Designs & Prototypes

Jam ~ Demo

The meat and potatoes of JamParty, an interactive "karaoke" room where friends group to play games using their favourite songs.

Dynamic Action Bar

Move smoothly between video and chat with the dynamic action bar, as well as access additional related options by pulling the bar up.

Information Arch

Designed for ease, the screen is divided into outside actions, performer(s), song & game, social, and dynamic action bar, from top to bottom respectively.

Video + Chat

Video and chat screens plus all their additional states.

Create ~ Demo

Explore all the features of a "Jam" while you're alone. Sing the same songs, play some solo games and share with your friends.

Lyrics

Never awkwardly mumble a song again! Pop open the lyrics to your favourite song and release your inner Mariah Carey.

Song + Game

Song and game discovery plus their respective information pages.

Connect ~ Demo

From the homepage, navigate to your own profile or social tab to see everything friend related.

Profile

Your own customizable profile page, where you can share your favourite songs, games, game high scores and other interesting stats.

Discover

Discover what your friends are jamming to. Will you join them or judge them?

Friends

Manage your friends list here. Search, add, remove and view requests.

Onboard ~ Demo

Try songs/games, and join jams before signing up. When you're ready, provide only the essentials to get you jamming ASAP.

No Account

With no account, the profile and social tab is replaced with wireframes and what's available upon creating an account.

Stills of the sign up process. Clean and simple, see exactly how far along you are with the icons along the top

Animation, Game, & Fun Stuff

For this project I had the opportunity to explore deeper prototyping and Figma interface animation for the first time and I really fell in love! It was my favourite part of the entire project because it made my app come to life, gave it character and got people excited! Below is a collection of some micro interactions, animations and other visuals within the app. Some things to look out for include inviting friends to a call, joining a call, sharing your videos and in-game Jam interactions. Everything was made in Figma, including the video you saw at the top of the page!

Exploration & Iteration

I went through a lot of different design explorations and iterations to arrive at my final designs. I made sure to explore every aspect of each idea, from prototyping the way the screen would appear to it's interactions. Here's a glimpse into some designs that didn't make it and why.

Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Interactive Reactions
I tried different ways for users to access interactive reactions like a vertical list, horizontal list, and a wheel. The wheel embodied fun, while the horizontal list was most intuitive. So I combined them!
Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Interactive Reactions
I tried different ways for users to access interactive reactions like a vertical list, horizontal list, and a wheel. The wheel embodied fun, while the horizontal list was most intuitive. So I combined them!
Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Interactive Reactions
I tried different ways for users to access interactive reactions like a vertical list, horizontal list, and a wheel. The wheel embodied fun, while the horizontal list was most intuitive. So I combined them!
Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
This iteration of the invite flow had the user's recent calls separated from creating a new call. This wasn’t simple and forced the user to take extra actions if they wanted to create a new group.
Interactive Reactions
I tried different ways for users to access interactive reactions like a vertical list, horizontal list, and a wheel. The wheel embodied fun, while the horizontal list was most intuitive. So I combined them!

Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?
Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?
Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?
Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?

Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?
Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?
Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?
Performer Focused
This layout emphasized the performer and made it hard for users to express themselves. Consequently, it was abandoned in favor of a more face-to-face approach.
Sandwich Architecture
The placement of cameras between two rows of actions proved confusing and complicated, especially when considering the design of additional options.
Anonymous Creation
This approach to creation favoured anonymity, but was inferior to a face forward creation approach as it felt less lively, interesting and interactive.
Twitter x JamParty
The idea of users sharing blurbs about their favorite songs or games was nice but ventured too much into social media territory and didn't align well with the app.
Coloured Progress Bar
This early design featured a coloured bar at the top to visualize the sign up progress. This made the process feel long and tiring as it wasn't clear how far along you were.
Is This An Ad?
The idea of compiling all sign-up features into a list to attract users felt outdated, forced, and more suited for a paid product. It also had a noticeable "ad-like" quality.
Inviting Friends
My first iteration of the invite flow had the user's recent calls separated from creating a new call. This approach wasn’t simple and forced the user to take extra unnecessary actions if they wanted to create a new group. Some other things you may notice here is users having a username as well as their real names. This was changed to to just usernames to fit the casual and game style of JamParty.
Interactive Reactions
Here are some explorations for how users could access reactions during a jam. Shown here include through a vertical list, a wheel and a more immersive horizontal list. The wheel embodied the right vibes of game and fun while the horizontal list, similar to other apps was most intuitive and comfortable to use. So why not combine them into one?

Reflection & Takeaways

I Love Animation!

This project was an incredibly vigorous experience where I was able to hone many different skills and also discover my passion for animation and deeper prototyping! They breathe so much life into ideas and creates a lot of enthusiasm!

Keep Organized

This project was larger than I first expected, and my files weren't the most organized or easy to keep up with. I definitely need to keep neater next time.

Setting Priorities

I had a lot of cool ideas but had to learn to prioritize the most important features and parts of the designs first. Adjustable camera positions and sizes during a jam, copying a friend's voice as a filter, and introducing more exclusive games are just some of the exciting possibilities I'd love to explore in the future.