Join

CONTEXT

What is Join?

From personal experience and especially from the COVID19 quarantine, I was thinking heavily about connections, togetherness and just the relationships of other people. As a personal project, I wanted to develop a new app that could improve upon these values.
‍

Problem

Often, it would be hard and tedious for me and my loved ones to do something as simple as watch something together when far apart. The ability to still remain close despite distance had been become an increasingly desired feature in tech for young people who spend a lot of time online. I love and use platforms such as Teleparty but, it is currently limited to web and many people may not have access to web devices.
‍

How can we bring far apart loved ones together over their mobile devices using media?

SOLUTION

A platform focused on online collaboration and synced actions

I decided to design an app that could remedy this lonely problem with the goal of creating online collaboration and establishing a feeling of presence by allowing people to take actions in sync. This led me to create the following desired workflows:

SNEAK PEEK!

The main unique feature would be creating a shared session where users would have the option of what platform to use (Netflix, Hulu, Youtube, Spotify etc.), invite friends and then while in the session, they could turn on their cameras and live chat while watching/listening together.
‍

RESEARCH

Initial brainstorming of how I envisioned Join

I started off by sketching out this initial idea; I thought of who my audiences would be, the cases when these users would use the app and a couple possible workflows using Spotify + Teleparty as my main points of reference. This led me to realize some design tradeoffs.

Design Tradeoffs

Pros

Cons

This is O.K because I want to focus on media for Join

Customization became one of my reach areas to explore

Benchmarking 7 apps to find gaps

For further research and to help inspire the UI of my app, I created benchmarks of similar mobile apps. I looked at Spotify, Discord, Rave, Airtime, Teleparty, Deezer and Qobuz.

By doing so, it helped me significantly in collecting references of similar apps to see what I felt worked and didn’t work as well as help establish some of my goals. I wanted Join to be well-suited for collaboration, for its workflows to be explicit, easy to follow, and relatively short.
‍
View all of my benchmarking here
‍

USER INTERVIEWS

How young people navigate interacting with others in digital spaces

I completed 5 in-person, semi-structured user interviews with young students (19-20 years old). I asked questions about how they interact with loved ones in digital spaces and what apps they already use.

Based on each key finding, I made sure to translate their feedback into my designs.

Key Findings

DEVELOPMENT

Building the information architecture

Bringing my designs to life

My designs changed a lot as I received feedback between each stage of lo-fi drawings, lo-fis in Figma, and hi-fis in Figma. Here's the following process with the Homepage:
‍

Trying out different visual styles

To end up with the style I created for Join, I made three distinct home screen designs and then pulled aspects from each that I liked. I wanted Join to have a clean, modern look and was leaning towards a dark version to achieve that (similar to Spotify). However, I also wanted Join to also give off fun, playful vibes since Join revolves around community.
‍

ITERATION

3 Key feature changes

Throughout my iterations and after usability testing sessions with a Senior UX Designer from MathWorks (Kent Millard), a professor from Emmanuel College (Erich Doubek), and a professor from Lesley University (Heather Shaw), I got valuable feedback that led me to add vital features:
‍

Additional stage to remind missing party members: I added a step after inviting friends but before starting the session. During this stage, those in the session can call or message other invited members if they are not there yet.

Status of the person is transparent (Green → The user is in the session, Orange → The user is not in the session).

Joining a recent session: To save time and make rejoining an old session easier, I created a workflow where a user can join a recent session. All of the existing parts such as who was in it, when it was made, etc. would be shown. A user can then jump right back in to whatever they were doing!

Live reactions: To boost real time interaction, I added the ability to react with emojis; This would improve the feeling of connection significantly by allowing users to tell when and what their friends are feeling a certain emotion.

FINAL PRODUCT

Using several avenues of media to connect you with loved ones
‍‍

👤 Go through a painless and short login/sign-up
There is no lengthy onboarding. Quickly and seamlessly login or sign up either through a custom account or through an existing Apple or Facebook account.

🎬 Create a shared session
Choose from a variety of platforms, invite your friends, and then start the session! Everyone can watch together with their cams on while chatting and reacting.

🎵 Listen to a custom playlist live
Similar to Spotify's Jam session, add and listen to songs with your friends in the same room.

🎧 Collaborate in a shared playlist
Customize the playlist how you want, invite your friends, and then everyone can add songs whenever they want! Listen to a playlist made for all of you.

👯 Quickly add friends through a QR code
If you're with a new friend in real life, go to your profile and access your personal QR code to have them easily add you on the spot.

IMPACT

Saving time and increasing user satisfaction

I conducted a survey with 14 students in my Interaction Design II class and found out the average user satisfaction rate was a 4.5 out of 5. I also collected quantitative data through an experimental usability study. Specifically, I found the average time spent creating a collaborative playlist (seconds), average time spent creating a watching session (seconds), and average time spent creating a live session (seconds). Across the board, users on Join spent 5 - 6 less seconds when completing a task in comparison to competitors.
‍

REFLECTION

Main Takeaways

Being both brave and intentional with my design decisions was extremely important because it pushed me to not fall into making the same "cookie cutter" designs that I or someone else already made and let me creatively explore.

Collaboration, discussion and critique were also invaluable parts of my journey as it can be easy to get tunnel vision as a designer; Other people's perspectives and differences help me see things I never would be able to see on my own.
‍

Looking Ahead

Join feels far from done! If I had more time, I would have wanted to add more customizable features and truly max out the potential of what users could do together. For instance, giving users more options to personalize their shared sessions with their friends depending on what kinds of people they're with, what kinds of show/music they're watching/listening to etc.
Another idea I had was to grant users the ability to "crash a friend's party" by joining friends' already live sessions.

I loved this project because: