Socializing at Home
A video call application that implements an in-person social experience at home!
Team:
Just me!
Skills:
UX/UI Design
Visual Design
Design System
Tools:
Figma
Homestyler
Illustrator
The Backstory
You may be wondering what, why, and how this concept came about and if not, you can skip ahead to the actual case study.
With COVID still here in 2021 forcing us to stay indoors, out of contact with family & friends in our daily lives but also for the holidays, we turn to virtual meetings or gatherings. It's great that technology is so advanced to allow us to still meet others who are miles, or just a few, apart. The downside though, because tech is not a perfect solution, is being forced into a single conversation with all these faces looking at each other having to take turns speaking whether we break out into multiple groups or stay as one. You can't scream over each other, banter, and move between different conversations that are happening at once. At least for my family, the craziness of yelling, laughing, and all the noise is what makes everything feel home-y which video calls really lack in. I know this isn't just me, but also for others trying to do virtual parties, it's just missing that social appeal especially being cooped up at home all day which is why I came up with this crazy idea. Inspired by a game I've never played but only watched, Among Us using the Proximity mod and Wii's Mii channel, but bringing it into a more casual meet-up spot online.
The Objective
My goal of this project was to improve virtual gatherings by providing a more social aspect to virtual calls. Video calls can feel more normal by focusing on social aspects we lack during the COVID-19 pandemic.
The Problem
Majority of users find it difficult to have natural, organic conversations like at an in-person event since users can only speak 1 at a time on a video call to understand/hear each other clearly.
(1 speaker at a time)
Goal
Enable users to speak to each other as if they are together in a room based on distance away from each other, while also providing virtual gameplay to provide a similar in-person experience virtually.
Market Research
With insight from family and friends which is part of why I started this project, I needed to do a competitive analysis of popular video applications on what they provide and how they compare.
Understanding common ways video applications users interact with gave me insight on common flows and how people use the apps in their own ways. This helped me define solutions to include in my designs as well as aspects users are familiar with in a video call.
Takeaways
After examining various applications, I found aspects platforms include and lack that are important to this project's goals.
Little to no integrated game play; users adapted to create their own game nights
Break out into multiple groups but can't freely move between groups
Channels for groups of people where they can converse and call each other to join whenever
Can see who is online within your friends/contacts list
Ideation
Coming up with solutions to have multiple people talking at once to bring that social aspect was extremely difficult. I went through a few failed ideas before find my solution, such as:
Multiple breakout tables that you can enter/exit freely, whenever (issue of single convo still applies)
Sound based on position in screen and can move your window freely, like Brady Bunch vibes (if people are constantly moving their windows, it'll be pure chaos)
While watching an Among Us stream, I found my solution! They were using a modification called Proximity Chat where you can hear based on the position characters are located/moving. So, I sketched the idea in my head to see if it was even plausible:
Single room with multiple sections to gather around
Tables where you can break out into a standard video chat ("nested" rooms)
Game play with everyone in the room
Detailed Sketches
To gain a better understanding of how the platform would work and have some understanding of the user flow, I sketched pages with: onboarding -> messaging -> entering the shared room. These sketches include possible functionalities within each such as:
Messaging: Accessing different groups, friends, and rooms
Rooms: Chat window, game play, smaller video tables, and map of the room
Onboarding: Creating your character
Character: "Head" is the video feed
Wireframes
While the sketches provided a broad user flow, the wireframes refined the details and functionalities users have for the platform. This includes more detailed:
1. Onboarding Flow
The initial window would be the logging on process which includes signing up using Google or Facebook to quickly set up their account. To create a simple process for a character allows for personalization, but also a quicker onboarding process only for first-time users.
2. Dashboard
Includes where users can access video calls, voice calls, entering the shared room, and friend groups. Much of this is based on other video application standards. However, I chose to separate Groups from the Friends list so it's easier to access and locate since the aim for the platform is for larger groups/parties.
3. Games
I added Play or Spectate because not everybody likes to play and just wants to watch the fun! Additionally, I made the game table square because the addition of proximity chat and moving around, the screen has to be consistent for each user. With a rectangle, distance and positions differ.
4. Video groups within the room
Imagining a circle table in the first image, I changed the video bubbles to a circular position to represent and mimic "talking around the table" idea.
(Note: Button positions reflect standard spots for video call apps.)
Meet: at home
Why name it at home?
This project came about because of COVID and the stay at home order. I wanted it to be ironic, but also reflect exactly what the whole concept is about, staying at home attending virtual gatherings! On top of that, I call the virtual rooms houses as the map also mimics a real home where people can find comfort and familiarity.
Dashboard/Messaging
Users are first welcomed by the dashboard where they can access their friends list, group channels, messaging, and access to the room I refer to as the "House".
Proximity Chat
Within the House, users can move around to talk to each other. Voices are heard based on the distance between the other person(s). As a user moves further away from each other, their voices become more and more faint. Directionality is also important as if they person is on your left, they'll be louder in your left headphone. This mimics how we hear each other in-person.
Tables
I included tables where individuals can join and have a quiet, more intimate setting when chatting similar to Zoom's break out groups. Here anyone in the house can join and their video screens enlarge to create a normal video call.
Gameplay
By incorporating games, users can easily access available games to play together for a game night or party. While playing, distance based voice chat is still incorporated to continue that same in-person feel where they can also move around and chat. Spectators can also join the fun and watch the game!
Prototype
Test out the prototype on Figma!
*Unfortunately, all screens are static and cannot move through the House.
Design System
I created a design system while creating the platform to ensure a cohesive layout and it's good practice! This also allowed me to quickly design screens that are similar, maintain effects for buttons (hover, disabled, etc), and multiple cards.
Challenges
While finding a solution, it was difficult to come up with ideas on my own and see other perspectives on the problem. I only had family and friends who don't have knowledge in ux design, to bounce my ideas off of.
I had issues building the house and map since it touches more into game and visual design, so I was limited to using a room/house builder website to construct everything. This made it difficult to create a platform and characters that would visually align with the map.
It's difficult to test my final design since it's static and doesn't completely give off the same feel and movement.