Team Diana Wi
My Role UX Designer
Platform Web Application
Software Adobe XD
Year 2019
Duration 6 hours
down-arrow

Background

What is Streamlabs?

Streamlabs is an all-in-one streaming platform designed to bring simplicity and flexibility to streaming experience. It offers an Open Broadcaster Software (OBS) and dozens of widget tools which streamers can use to interact, monetize and grow their channels.

(This is Streamlabs' home page.)

One of many widget tools which streamers can use to engage with their loyal viewers is called Alert Box.

Alert Box is a popup notification that alerts whenever there is an event for a new follower, subscription, donation, and much more. This promote everyone to build a strong supportive community and to give back to the community with a happy dose of validation and appreciation.

Design Challenge

As part of the Streamlabs' hiring process, I was given a Take Home Assignment to prepare a redesign of the Alert Box settings page.

Constraints and Requirements
  • Work independently and not seek help outside.
  • Do not go over the 6 hours time limit.
  • State any explicit assumptions made in the design process.
  • Send all work for final submission using gdrive/dropbox/cloud_save_tool_of_choice.

Please note - Prior to this assignment, I had little to no knowledge of live streaming, and required an initial study to understand this field.

Setting the project goal.

The goal is to redesign the Alert Box settings page in 6 hours. To design a good user experience, I used the human-centered design thinking process in three phases: Discovery, Design, and Delivery.


Discovery

First, researching and analyzing the Alert Box.

To understand Streamlabs Alert Box tool, I researched this widget settings page and analyzing the current user experience with new user perspective in mind.

(This is the current Alert Box widget settings page.)

After examining the settings, I identified 3 ways to set and manage the Alert Box widget.

  1. Installing an already-made widget from Widget Themes library.
  2. Customizing the alert box settings.
  3. Creating Custom HTML/CSS based alerts.

Identifying the target users.

From my settings page analysis, I assumed that Streamlabs' target users are efficient, power-driven and technical gamers interested in streaming their game-play. I chose to focus on designing around the new users.

New Users Assumptions
  • may be a occasional to frequent gamer.
  • have some technical background.
  • may have friends who likes to watch their games.
  • interested in broadcasting their games.
  • have little to no experience in live streaming.
  • might have been referred by friends with Streamlabs.
  • might not have any knowledge of Streamlabs.
  • may have done some prior online research on streaming.
  • may not know how to properly setup for streaming.

User Flow for current users.

Task: To customize the Alert Box widget settings and add it to Streamlabs OBS editor for live streaming.

(The emojis represent user's feelings during their journey to complete the task.)

Defining the problems.

From the user flow, I discovered that the current design does not recognize if the new user has customized the settings or not.

Solution: Add a Call-To-Action button.

This will ease the navigation for the new user.

Also, in the settings page, there were too many things shown all at once that it was hard to determine what the page was asking the user to do. Therefore, my redesign will improve the following areas.

  • Lowering the decision-making time by guiding and leading the users to the settings page.
  • Reducing information clutters by reorganizing and prioritizing the content that users need.
  • Improving the readability and ease of navigation.

Design

Reorganizing the Information Architecture

Low Fidelity - Sketching ideas.

Mid Fidelity - Wireframes

High Fidelity - Initial Design

Design Comparison

(Current Design)

(New Design)


Delivery

User Testing & Design Iteration

I ran two user testing, one with a gamer with experience in using Streamlabs and another with a non-gamer for observation and receive feedback on my design prototype.

Based on my user testing result, I updated the design including reorganizing the information architecture.

Final Design

(This is my proposed design.)

Thank you for taking your time to view my project~ ;)