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.
End-to-End UX, UI, and Research.
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
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
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.
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.