Join

Mobile Design, UX Research, Branding, Prototyping, User Interviews, Benchmarking
Project Overview
Over the course of a semester, I built an app for friends, families & couples who want to spend quality time together even when physically far apart. Join is an entertainment mobile app that allows users to listen to music, watch shows & movies, create shared playlists at the same time and all in one platform.

Here's my entire process portfolio.
Role
Product Designer
Team
Myself!
Duration
4 months (Jan 2023 - April 2023)
Tools
Figma
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. I love and use platforms such as Teleparty but, it is currently limited to web.

How can we digitally bring people together over their mobile devices?



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:

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
Brainstorming

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. This led me to realize some design tradeoffs.

Design Tradeoffs
Pros
3 straightforward workflows will be simple and easy to understand for new users
Drawing inspiration from apps such as Spotify and Teleparty will make for familiar terms and features

Cons
Limited to watching/listening to media with not many other options
Not much possible customization for creating shared session


Benchmarking

For further research and to help inspire the UI of my app, I created benchmarks of similar mobile apps. I looked at 7 apps: 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

I completed 5 in-person interviews with young students (19-20 years old). It was semi-structured meaning I asked open-ended questions and followed up with questions to then further explore their responses.


Key Findings

DEVELOPMENT
Wireframing

Firstly, I drew my wireframes digitally in Procreate. Next, I made lo-fi versions of them in Figma. From there, I was able to create hi-fi versions. (The name of my app changed as I continued through development as well! Walis → Join).

This was the following process with the login page and 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.


Towards the end of the semester, I did a 15 minute presentation on Join and then received critique from my professor (Kent Millard), a professor from Emmanuel College (Erich Doubek) and a professor from Lesley University (Heather Shaw).

Key feature changes
Creating a shared session: I added another step after inviting friends but before starting the session. During this intermission stage, those in the session together could call or message those who were invited in case anyone is not there yet or needs to be reminded. There is also transparency to each other as the status of the person is now being shown (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!
During a live shared session: To boost real time interaction, I added the ability to react with emojis; It's a rather small change, however, would improve the feeling of connection significantly if users can tell when their friends are thinking or feeling a certain emotion.
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! 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 friends they're with, what kinds of show/music they're are watching/listening to etc. In addition, another idea was to grant users the ability to "crash a friend's party" by joining friends' already live sessions.

I loved this project because it touched upon an important value of mine (human connection & relationships!), was heavily inspired by Spotify which is my most used app, and involved one of my favorite hobbies: sharing media with loved ones (one of my love languages is sending my friends songs).


Final Product