How can we boost user retention through better settings menus?
Redesigning Streamlabs’ Alerts settings to inspire a new site look
Summary
As Streamlabs grows, it has begun to implement a more refined design aesthetic on its website, desktop, and mobile app. However, the Alerts widget has been left behind. This project is aimed at updating the Streamlabs Alerts settings page to bring it up to the standards of the other Streamlabs products, and make it easier for users to work with.
Project Duration
1 week
Team
This project was a solo effort
Contributions
Conceptual redesign of the Alerts settings menu and its various tabs only. All other portions of the site were designed by the Streamlabs internal team.
Streamlabs offers a free toolkit for live streamers compatible with Twitch.tv, Youtube, Facebook, Mixer, and more. It provides a variety of tools to help streamers design, broadcast, and monetize their stream and grow their business.
Currently, Streamlabs boasts 15,000,000 users and 70% of the Twitch.tv streamer base. Its broadcast software, Streamlabs Open Broadcast Software (SLOBS), is more well designed and user friendly than traditional OBS options available to streamers.
The Streamlabs brand is still relatively new, although it has grown massively since its founding in 2014. The explosive growth of the streaming industry and Streamlabs itself has caused some growing pains, particularly when it comes to design.
Streamlabs’ main draw for most new users, and its most popular feature is the Alert Box widget. Alerts are an important function of most streams, telling the streamer and viewers when someone subscribes, donates, and hosts the stream, among other actions.
With Streamlabs, Alerts can be customized through the settings on their website and added to the stream using a URL source. Whenever an alert is triggered, it appears on stream with sound, text, and animations.
As services like Twitch.tv become more complex, Streamlabs must update its Alert Box widget to accommodate these changes.
As a result, the settings page has become longer and more complicated and it has become clear that a well-defined design system is needed.
Insights
A lack of consistency between widget pages and the desktop app prevents communication of a cohesive and professional brand
Elements look too similar and leave the user confused and overwhelmed at first glance
Organization of elements can be improved
Opportunities
Create a design language that can be implemented site wide
Integrate elements from other widget pages, such as the inline preview
Improve the help/tooltip system
Reduce visual clutter to improve user understanding and conversion rates
Keeping these insights in mind, I began to iterate on the design of the Alert Box page, focusing not just on the page itself, but how it would fit into the larger ecosystem of the Streamlabs site.
If the design was to be successful, it would have to create a system that could be quickly and easily applied to other pages on the site.
Streamlabs had a great base to work with, and much of the redesign was focused on elevating the elements that already existed.
A few new elements were added as well, including an inline Alerts preview, a custom alert layout option, and a general font setting to help keep alerts looking consistent.
One of Streamlabs’ stated goals is to make streamers look professional by adding elements like custom alerts to their streams.
By adding these simple elements and cleaning up the layout of the page to reduce the visual clutter and increase immediate understanding, that goal can be reflected in the look of the site as well.
Streamlabs allows its users to customize every type of alert individually. This means that each type of alert has its own settings tab and a large variety of options that can be adjusted.
Previously, different tabs used different selection methods for the same type of option and sometimes methods that made no sense in the context of the option. These selection methods were reduced and streamlined, such as eliminating radio buttons in favor of a toggle for enabling and disabling alert types.
One of the most important additions to the page is the inline alert preview. Previously, in order to see what their alert would look like on stream, streamers would have to launch a popup window or add the alert to their stream overlay.
Other widgets on the Streamlabs site already offer inline previews of the widget that update as the settings are changed. Here, we require buttons at the top to select which alert is being previewed .
Additionally, organization was a major factor that previously contributed to user confusion.
By grouping related settings together, removing expanding sections, and separating these groups with a horizontal divider. Keeping these groups to seven or fewer options increases readability and doesn’t overwhelm new users.
These design changes can be kept consistent through the implementation of a set of design rules and standard elements that are defined for use in certain situations.
By implementing a design system like this, Streamlabs can ensure that its site and desktop app remain consistent with one another. Such rules will allow Streamlabs to easily train new UX Designers as well as allowing them to easily change elements as the site style evolves.
Already, Streamlabs uses and sticks to a refined color palette of cool grays with a bright green accent. The new design fits within this pre-established palette.
Additionally, they use several other accent colors to differentiate their widgets. These colors are great compliments to it’s primary palette. In particular, the red accent was a great addition to small elements that needed to indicate “off” or “cancel” settings.
Many of the implemented design elements were simply refined versions of what Streamlabs had already created. Among them though, were a few new elements, including the tabbed page selection and toggle button options.
Many changes involved keeping the design throughout the site consistent. Small changes including changing the selected layout highlight to green, rather than a lighter grey. Additionally, all “Note:” text was removed in favor of a hover-style help description where perviously both had been used interchangeably.
The minimal aesthetic and functional changes detailed above are designed to be optimal not just for application to the Alert Box widget, but for translation into a broader design system that can be expanded and implemented site-wide.
Implementing some simple design principles can help reduce the overwhelming visual impact of the original site, allowing users to quickly learn and adjust to the Streamlabs system. As users become comfortable with the widget and learn to trust the Streamlabs brand, they can be expected to continue to use and adopt other products under the Streamlabs umbrella.
Click image to enlarge