Chris Chambers
AlertBox_01.png

Streamlabs: Alert Template

 

Alert Template

Updating Alert system to seamlessly fit in with Streamlabs OBS (SLOBS). Highest revenue generator and oldest feature of Streamlabs.

Role

End-to-End UX, UI, and Research.

About Product

Allows Streamers to show alerts on stream when a viewer donates, subscribes, etc… Alert notifications are connected to streamers Paypal account to optimize revenue. All Alerts are highly customizable down to the font and animations. Streamlabs is a middle man and takes a service fee from the donor.

 
User Journey

User Journey

 
alertBox_Research.png
Scenario Map breaking down tasks

Scenario Map breaking down tasks

Research

Discovered from a quantitative market research survey that there was early churn from using SLOBS with new users. We conducted a moderated usability test with new users using an interactive principle prototype and tested on-boarding, going live, and designing a stream. Two out of five users could not complete the test, while two out of the five users could only complete the exercise after they looked up a how to document or video. Most issues arose when users were tested on how to design their stream. Testers had difficulty locating certain UI tools and all together understanding Alert variations.

Top user pain points when setting up an alert gained from testing

  • Setting up an alert variation.

  • Locating important customization tools like where to edit your font.

  • Where can I test my alert and where can I quickly preview it.

  • Having to navigate between SLOBS and streamlabs.com to complete customizing an alert.

UI/UX Agenda for Release

  • Clean up confusing UX around alert variation and the alert tabs.

  • Reorganize UI to progressively disclose relevant information.

  • Allow the user to easily preview and test their alert.

  • Separate global settings from discrete settings for intuitive flow.

  • Allow the user to customize there alerts in just one environment.

Primary Goals & Business Objective

Our business objective is to push our user base to adopt SLOBS instead of using OBS. Overall objective is to create a streamlined all-in-one experience for SLOBS users. This means making all of our Alerts and other widgets native, so a user doesn’t need to navigate between SLOBS and streamlabs.com. Also, creating a reusable template for all of our other widgets which will be built from Alerts.

 
alertBox_Final_Donor.png
 

Alert Variation Clean up

The original design a streamer had to discern between creating a primary alert and an alert variation. Sometimes there was weird behavior between the two where if an alert variation was set the system might not read primary alert. To simplify this experience I made all alerts variations and placed all alert types in a neat column to the left hand side of the dialog. To edit a specific alert a user would just need to click the associated thumbnail. We conducted three additional rounds of testing and the alert subfile held up.

Progressive Disclosure

In the original design all the settings were presented in a single list. Some settings were placed in an accordion widget clustering relevant settings. From our initial testing this created a confusing paradigm. The streamer would get confused locating their desired setting due to the randomness of how the settings were arranged. To resolve this confusion I decided to categorize all the settings and depending which setting a streamer would choose and progressively disclose the relevant settings. This concept is pretty basic, though throughout the process I was presented challenges. There were five to ten settings that seemed to belong in two categories. Should “Message Delay” belong in “Title Message” or the “Animation” category? After a few rounds of testing, a streamer was more inclined to search for “Message Delay” in the “Animation” category due to the settings relationship with time.

Final Wireframe Alert Variation

Final Wireframe Alert Variation

 
alertBox_Final_advancedSettings_02 Copy 2.png
Global Settings Wireframe Concept

Global Settings Wireframe Concept

Global Settings

One of the more difficult challenges was finding a place for these global settings. Initially in an attempt to optimize space we placed all the settings in a drawer beneath the canvas with a default state set to open. The concept was a user would set it then forget it. After multiple rounds of testing streamers were confused. Heading back to the drawing board I realized that a lot of these settings didn’t even make sense to be placed in Alert box entirely. Mod tool settings should live in the Mod tab. After this informational architecture clean up we placed all the settings in a modal dialog and changed the name of the button to Advanced Settings. Initially in my testing preview notes I thought it was going to fail. I was proven wrong since users have been trained that if they can’t find a setting to just click advanced.

Testing an Alert

During the audit of the original program we found that most streamers were finding it difficult to preview there alert. A streamer would have to navigate between streamlabs.com and SLOBS open a secret drawer just to preview an alert they have designed. To fix this terrible experience, on all Alerts a streamer would have access to a canvas where they can live preview any changes they have made. If the alert had any sort of animations they would simply hit the play button at the top right.

One Environment

Originally a streamer would have to navigate between streamlabs.com and SLOBS to design an Alert. To simplify this experience we would natively rewrite alerts into SLOBS. When a streamer would select an Alert layer they would be presented with a model with all there settings neatly arranged instead of having to navigate back and forth between to environments