Teleparty
Challenge: Add a feature to an existing product
Academic Project
Sector
Entertainment, Design
Role
Solo Designer
Tools Used
Figma
Project Timeline
4 Weeks
Background
-
Teleparty is browser extension allows friends to watch shows remotely by:
Syncing videos so everyone’s at the same time
Provides chat for communication
-
Throughout the pandemic especially, people have been deprived of human connection
Unfortunately, Teleparty is unable to recreate the feeling of being in a room with your friends watching a show
Disjointed experience of having to type out your reactions/comments
-
Design an audio & video feature to enhance the watch party experience
For people who desire easier communication, and want an experience closer to being in person
Business Goal
Increase the number of users
User Goal
Spend time with friends
Research
Competitive Analysis
Competitive research was done on comparable features, some of which were built in to the actual product like Watch Party on Prime Video and Disney Groupwatch. Indirect competitors include common workarounds to features specifically designed for this purpose.
Interviews
Demographic:
3 Males, 2 Females
Ages 20-30
Some of the interview questions:
What platform do you currently use to watch things remotely?
Why did you decide to stick with what you’re currently using?
Walk me through your process of watching something online with your friend. How do you set yourself up before pressing play?
Findings:
Values:
4/5 Participants valued convenience
5/5 Participants valued communication
2/5 Participants use Discord to watch shows with their friends because they always use it to communicate with each other when gaming
Expanding to other devices…
“I think it was the convenience of having Facetime on our phones and multiple other devices, whereas Teleparty, I was restricted to only using it on my laptop. That was a big factor for me in terms of convenience.”
— Participant 2
Key Takeaways
Text-based chat vs Audio/Video:
3/5 used a combination of audio and video
Can increase # of users by catering to this user base as well
Convenience
All participants use whatever is most convenient
These were their main communications platforms
Curious if Teleparty switched gears to become a more communications-centered platform, if that would increase its user base
The more users that are on it to casually chat, the more that will use it for watching shows together since both features are in the same place
Empathize
Based on the insight that was attained from interviewing, our persona was created. This requires paying close attention to what the participants have to say, so that we can better understand our target demographic. In understanding our ideal users, we can build an experience tailored to their needs.
Interaction Design
The task and user flows were based on Teleparty’s current entry page (image on the right). This is where users would choose to turn on their mic/camera before joining the Teleparty.
Low Fidelity Wireframes
Utilizing the learnings from competitive research and interviews, I created the following wireframes. I referenced multiple communications platforms such as Skype, Google Meet, and Discord.
UI Design
UI Kit
I worked off Telepartys current UI kit
It was interesting to note that their primary buttons differed between their website and extension
Low-Fidelity to Graphic Interface
You can check out the deliverables mentioned here.
The Teleparty entry page would give users the option to turn on their audio/video. There’s also a box where they can save their configuration for future use.
Upon entering a room, the chat will be closed by default. When opened, the display would appear as what’s shown above.
This is how the screen would appear when the Teleparty view is minimized.
Usability Testing & Iterations
Test Objectives
Determine if users are able to use the video feature
Determine if users are able to use the mic feature
Find out if users know how to adjust the settings to minimize/expand windows
Tasks
Join the party with audio and video.
Find the link your friend sent.
Go ahead and minimize the Teleparty view so that the movie enlarges.
Quickly mute yourself so you don’t disturb your friends.
Want to give the prototype a try? Prototype
“Am I able to minimize the Teleparty further so that I can see the video fullscreen, instead of seeing my friends? I was thinking for just voice.”
— Participant 1
“The only other options I would think of, is being able to control the volume of your friends and being able to adjust the size of their videos.”
— Participant 6
Results
5/6 participants easily located the buttons
There seemed to be other methods of minimizing the Teleparty view that I didn’t think about:
2 participants considered pressing the fullscreen button to minimize the view
Currently, pressing fullscreen only makes the show larger but it doesn’t minimize the Teleparty chat
One of the participants also mentioned being able to adjust the volume setting of her friends, which was a complete oversight on my part
Conclusions
It was interesting to discover how important convenience was to users
What was convenient, were the users’ main communications platforms
As such, I did my best to simulate the same experience as these platforms
Involved a lot of considerations regarding customizability/options
I’ve learned it’s helpful to think more deeply into these things:
How would users go about doing something?
How would these situations change the appearance of the current layout?