.png)
This project is a design challenge from Streamlabs, a top live streaming software, which requires to redesign the alert box setting page. The goal is to enhance the visualization and usability of the page.
Design researcher, UI/UX designer
AI, PS, Figma
3 days
.png)
Streamlabs is a free broadcasting tool for creators to stream on major streaming platforms and it provides a customizable alert box (alerts for tips, follows, subs, etc.) for streamers to interact with their audiences while streaming.
The alert box setting page is a key factor to take full advantage of this feature. Through the customizable setting options, streamers can better engage with their audiences and make themselves different from others.
.png)
The contrast of primary color and secondary color makes your eyes intuitively drop on the customizable features. And a large variety of options let streamers fully customize their alert box. However, I still realized several pain points while using and potential design opportunities can optimize the user experience.
Insight: Some of the functions are not directly usable on this page. They are only functioning when a new preview window is open.
Proposal: Give users an in-page preview section. Visualizing the effect provides a more straightforward experience.
Insight: The tabs for navigation between different types of alerts are not clear and displayed in an obvious way.
Proposal: Refine the style of navigation to make it more intuitive.
Insight: The customizable options are overwhelming, which causes users hard to visualize the effect.
Proposal: Provide a preview section and simplified buttons.
Insight: The text sizes are too similar also hard to distinguish the function of the contents.
Proposal: Apply a more distinguished style to differentiate titles, subtitles, and notes.
My first step is to create a new layout that can accomplish my first goal - visualize their customizations. I can add a preview section to this page instead of opening a new window and switching back and forth while making changes. The preview section within the page will run the effect once the streamer changes the settings. Before they generate the URL and apply it to the streaming platform, they would get a better idea of what will the alert box looks like.
.png)
.png)
After brainstorming, I decided to go with a side by side layout(option.3). Going with a side-by-side layout, users will see the preview and settings at the same time. It will avoid the action of scrolling up and down.
Putting the preview section on the left side is because some users might choose a template to use, or they just want to add more types of alerts and generate a new URL to apply. In these cases, they can emphasize on the left side of this page.
On the left is the operation section, which includes a preview window, preset templates, options of the test, and URL generator to apply the customized alert box to streaming platforms.
On the right side is the settings section, where the streamer can customize different types of alert boxes.
Next is to make it easier to navigate and more friendly to operate. So I explored alternatives in UI buttons, font sizes, font styles, and spacing.
.png)
.png)
%201.png)
%201.png)
My decisions were driven by two principles:
1.Minimize the steps to accomplish an action.
2.Minimize the graphic elements of interaction.
Also, some adjustments were made when putting the elements into the entire page.
After finishing the first round of redesign, I asked a few people to test the usability. Some more issues were pointed out and another round of refinement was gone through.
Problem: Too many tabs and long titles makes the view overwhelming.
Solution: Change the tabs to a dropdown menu can optimize the space and reduce confusion.
Problem: Even with a notation, the background color setting is still irrelevant to final effect.
Solution: Add it under the preview section.
This design challenge allowed me to get familiar with an industry that I’ve never touched before. Hopefully, improving the layout and iterate some visual elements can help them better understand the setting process and take full advantage of this alert box feature.