Chris Chambers
editor_Thumb.png

Streamlabs: Editor

 

Streamlabs: Editor

Updating the editor to improve overall user experience to differentiate ourselves from our primary competitor OBS. OBS is an open source software where we took their codebase and UX to build out SLOBS. Currently, we have enough time and resources to update elements in our product to differentiate ourselves.

Role

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

About Feature

Allows the streamer to compose scenes. Will mostly be designed offline, but a streamer can use the editor while streaming for quick fixes. Quickly change your entire look and feel of your stream by changing the theme. Test interactive components and adjust layers on an individual scene. Below are some editor anatomy terms.

  • Scene - Basically a file which is comprised of layers and widgets.

  • Scene Collection - A group of scenes. Only one scene collection can be activated at
    a time.

  • Layer - What makes up a scene. Layers act like sheets of acetate, so you can see what is beneath it similar to Photoshop.

  • Widget - An interactive component on a scene.

  • Scene Theme - The style of your scene collection. Users can download themes from our library

Research

After conducting a few rounds of moderated usability tests with new users on our product, we found that there was a lot of confusion around the editor.

Top user pain points

  • Understanding that a layer is a supporting element of a scene.

  • Difficulty adding widgets.

  • Knowing how to test a widget once added.

1 of 3 Streamer Personas

1 of 3 Streamer Personas

 
StreamlabsOBS_topBar.png
 

Layer Supports a Scene

We went through a few iterations of this. Attempting to connect the two horizontal tables and highlighting they scene which the user was editing. We eventually landed on the vertical layout similar to other editing software like Photoshop. Leveraging from this paradigm overall confusion drop significantly.

Difficulty Adding Widgets

One hundred percent of our testers couldn’t figure out how to add a widget to their scene. This had to do with the fact that the hierarchy was to even. The whole entire UI was filled with plus icons. In this newest design I wanted to increase the overall visual weight of the plus button and removing plus icons by merging functionality or changing their icons. After testing there was a significant improvement in discoverability.

How to Test a widget

This was a pretty simple fix. It was to add an inline test button on its associated layer. After testing users had no problem finding the test button.