project showcase

Twitch Private Rooms

Overview

In a team setting, the task faced was to design a new feature for an existing brand to meet a business goal and user needs. The platform to design for was Twitch. Twitch is an interactive live streaming platform for content that started in gaming but has since evolved. The team and I came up with a feature to improve the social aspects of watching live streams as well as increasing engagement with the platform to cut out competitors.

Focus

With the existing app, an audit was conducted on the existing functionalities within Twitch's mobile platform and data was collected from target users to find out what feature was needed. Once the need was identified, it was incorporated into Twitch's platform.

01
Discovery & Research

USER INSIGHTS

At this beginning of the discovery and research, it was important to understand user insights. A survey was sent out to target users to see what their experience has been when using Twitch as a viewer. Some key trends were identified through affinity mapping:

  • "I use a 3rd party app while watching streams. (usually Discord)"
  • "I feel that sometimes the chat is chaotic or not accepting."
  • "I have made friends on Twitch and wanted to meet more people."
See affinity map

COMPETITIVE ANALYSIS

With the initial research, it was essential to do a competitive and comparative analysis of the top platforms available in the marketplace as well indirect competitors.

Knowing that Twitch had an expressed lack in user engagement from users, there was a focus on the platform users reported using to fill this gap- Discord. Knowing what Discord was offering to users was key to understanding what Twitch could be adding or doing better.

See full competitive and comparative analysis

USER PERSONA

From the user data,  a persona was created to represent the target user. A persona is an archetypical user who represents the needs of the group as a whole. Throughout the design process, the persona aligned the team on Izzy's core needs and helped us empathize with them on a deeper level. From this persona, it was concluded that the new feature should give Izzy a safe space to watch steams with her friends- private rooms.

See full persona

DEFINING THE PROBLEM

To define the problems users face, we decided we needed to come up with some "How Might We" questions. "How might we" questions are designed to keep the focus on the right problems to solve as well as come up with creative solutions.

  • How might we create a sense of community on Twitch's platform?
  • How might we create safe, private spaces for users to watch streams with their friends?
  • How might we make connecting with other users easier?

Once the "How might we" questions were established, a singular problem statement was created and applied to our persona:

"Izzy needs a private space to interact with her friend community on Twitch so she can be more engaged- no longer feeling the need to use outside platforms to enjoy her experience."

02
Sketching & Ideation

USER FLOWS

Before even sketching, it was important to know how a user may step through a task, or user flow. By first understanding, the steps a user takes, the better we understand how we can optimize those experiences. A few different flows were iterated on, but in the end, one flow was selected. In the flow below, it prioritized an existing user who creates and names a private chat room to watch a stream with friends.

See full user flow

SKETCHES

To speed along the ideation process, our team decided to have a design studio session- a time in which we all simply sketched out ways to bring the flow to life. From that design studio, it was decided which aspects of each design best addressed our problem statement and then converged on our ideas to finalize a sketch for each frame. With this feature, the focus was placed on privacy, audio capabilities as well as room customization. These sketches were then digitized into Figma.

See digitized sketches
03
Narrowing & Structure

USER TESTING ROUND 1

Once the sketches were digitized, they were prototyped for user testing. User testing is a time when the product gets in front of real target users as they complete a specified task. As they interact with the app, observations of their behaviors, reactions, and feelings toward the prototype were noted. The number of errors was also recorded. For this usability test, users were tasked to create a private chat room, invite some friends and rename it.

Try the prototype

FINDINGS

From the user testing, these key findings were discovered:

  • Users felt that the process was confusing.
  • Users could not tell what room they were in.
  • Users had difficulty finding the settings button.
  • Users wanted to leave the settings menu faster.

Iterations

From the data, it was decided that these design changes needed to be made:

  • Settings button removed from kebab menu and replaced with an edit button that was placed close to private room tab.
  • Using a change in color and an underline to represent what room tab you were in.
  • When done sending invites/renaming, users to be taken back to private room- not settings page.
  • To reduce overwhelm, limit private rooms to one max and remove excess settings options.
  • Frames colorized and brought up to hi-fi quality based on Twitch's current design system
Compare drafts
04
Final Prototyping & Testing

USER TESTING ROUND 2

In the second round of user testing, users were given the same task, to create a private chat room, invite some friends and rename it. Again, observations on user behaviors, reactions, and feelings were noted. The number of errors was also compared from this prototype compared to the last.

Try the prototype

FINDINGS

From the user testing, these key findings were discovered:

  • All users had no issue completing the tasks.
  • Compared to the first prototype, user made less errors and accomplished all tasks within goal time.
  • Some users had issues selecting an option due to the hit-box area being too small.
  • Overall positive reception with suggestions for more features (kick delete, leave...)

Iterations

From the data, it was decided that these design changes needed to be made:

  • Make the text and thus hit-boxes larger and easier for users to find.
  • Find a way to add in the suggested features.
Try final prototype

Next Steps

Based on user feedback and thinking of ways to improve, these are some next steps:

  • Adding in the features suggested from users (Delete, Kick, Leave).
  • Doing a second round of user testing to find other ways to improve.
  • UI polishing and refinement.
04
Final Prototyping & Testing

USER TESTING ROUND 2

In the second round of user testing, users were given the same task, to find an epidemiologist job on the app that is full-time and provides the accommodation of flexible scheduling. Again, observations on user behaviors, reactions, and feelings were noted. The number of errors was also compared from this prototype compared to the last.

Try the prototype

FINDINGS

From the user testing, these key findings were discovered:

  • Compared to the last prototype, more users saw and commented on the accommodations listed.
  • Users felt affirmed to see their accommodations listed clearly.
  • Users were overwhelmed by the filtering options.
  • Users want a way to ask for accommodations they don’t see listed.
  • Compared to the first prototype, user made less errors.

Iterations

From the data, it was decided that these design changes needed to be made:

  • The filter was visually overwhelming, so it was decided to update the colors to lighter, cleaner ones that were still accessible.
  • In the style guide, the colors were swapped from green to a light aqua- all while still meeting WCAG accessibility standards.
  • The filter was also designed into nested menus to aid in reducing visual overwhelm.
  • The client suggested a different icon set to represent LGBTQIA friendly and BIPOC-led businesses. New icons were produced.
  • A few elements were tweaked to be less overwhelming.
  • Frames colorized based on colors researched to be accessible.
Try final prototype

Next Steps

Based on user feedback and thinking of ways to improve, the client was given recommendations on some next steps:

  • Creating a feedback feature where job seekers can give feedback on what types of accommodations they need but don't see.
  • Revising accommodation icons to be as clear as possible.
  • Users were overwhelmed by the filtering options.
  • Using a combination of a card sorting task or research to determine which accommodations falls under which category.