Interface Redesign of
Streamlabs OBS

A redesign of the Streamlabs OBS Microsoft desktop application. This redesign optimizes the overall user interface and experience through reducing visual clutter, improving on information organization as well as creating an easy flow for users to follow.

CATEGORY

Product, UI, Prototyping

DURATION

Jan 2021 - Apr 2021  

TOOLS

Figma, Illustrator

STREAMLABS OBS

Streamlabs is one of the most popular all-in-one open broadcaster software streaming programs that help streamers setup, run and manage their streams. Since their launch in 2014 they have become one of the most used OBS systems within the market of streaming. As of their 2020 annual report, Streamlabs is used by over 11.7 million unique active channels across all platforms with twitch channels making up for 90% this statistic.

CHALLENGE

As the streaming industry grew alongside Streamlabs, more features were added to keep up with the industry as well as to enhance the user experience. However, as they were added, many parts of the user interface were not updated to optimize these new features. Thus creating growing pains in both the users interface and experience of the software. Furthermore, this creates a disconnect between the product and its main purpose of helping users stream easily and efficiently.

GOALS

Optimize the overall user interface and experience of the software.

Reduce visual clutter to create a clear path of understanding for the user and enhance the learning experience.

Improve on the information organization of features setting pages to streamline the layout setup process for users.

Redesign the tabbing system in the program to enhance the user’s navigation experience.

Flow Chart


Dashboard

PROBLEM

Streamlabs OBS can be overwhelming at first glance, as it has many elements (sliders, buttons, pop-ups, tabs ect.) on the dashboard. This creates a larger learning curve for new users, especially with no tutorial or introduction to help guide them.

SOLUTION

By providing users with a cleaner and simpler interface, it will lower the steep learning curve of the application for both new and old users.

FUILD LAYOUT EDITING

The most exciting and dramatic change to the dashboard is the fluid layout editing. Users may drag the top of elements to change the location to anywhere on the page as well as pop it out into a separate window.

Widget Sources

PROBLEM

When setting up your stream layout and editing your overlays/features, many of the setting pages are overly complicated and cluttered which overloads the user's cognitive load.

SOLUTION

The organization and hierarchy within the editor window have been updated to decrease clutter, decrease cognitive load and increase user flow efficacy.

Standard Sources

REDUCING UNNECESSARY
INTERACTIONS

Currently when adding a new standard source (for most cases) users must click through multiple pages before they are able to set up their new source. This redesign directs users to the editor page right away, with a drop down menu at the top to select previously used sources. This reduces the user’s click and mental capacity while adding new sources.

OLD
NEW

Overlay Editor & Prime

PROBLEM

The Current interactions and small editing preview makes it difficult for users to easily and accurately edit their overlays.

SOLUTION

This new feature allows users to focus just on overlay editing to get their desired looks hassle free! This page features a dotted grid (to help with placement and formatting), scene selector (at the top to allow users to switch and edit between their different scenes) and a source manager tab (where users can see all their sources and manage their lock/visibility toggles, folders and layers).

Overlay Editor

PROBLEM

In the current Streamlabs application, users may only set up and edit their overlays via the dashboard. Although this does the job, the interactions and small editing preview makes it difficult for users to easily and accurately edit their overlays.

SOLUTION

All downloadable Prime features are now placed in a tab under the overlay editor. This allows users who are editing overlays to easily access thousands of ready-to-use resources. It is my hope that this placement change will also increase the subscription rates to Prime Streamlabs.

REFLECTION

This Streamlabs interface redesign became an exercise to reduce complexity to create a more fluid and easy user experience. This project was very much a passion piece as I use Streamlabs on a daily basis and am familiar with the program. 

Throughout this process, I felt overwhelmed with the amount of features and interfaces offered by Streamlabs that I had wanted to redesign. I learned the importance of evaluating and prioritizing pain points to focus on especially with a large scale product like Streamlabs. 

Moving forward with this project, I would love to continue to redesign other aspects of this application as I had only scratched the surface. One feature I think would be very beneficial would be to fully integrate all available features into the desktop application (including all web features and Chatbot, which I have started to integrate in the iteration). 

I am happy with the results of this redesign; though I only scratched the surface with this solution, I am happy I could begin to optimize the overall user interface and experience of a software I love to use.

< PREVIOUS PROJECT
NEXT PROJECT >
Let's Talk!

Got feedback, questions or ideas?
Feel free to reach out to me!

Jessica.dou@hotmail.com
♡ Thank you for stopping by ♡