Redesigning Alert Box Settings page.

Design Challenge

To redesign the Streamlabs Alert Box settings page.


Based on my research, I discovered some usability issues in the Alert Box settings page and through the human-centered design thinking process, I made the following improvements:

  • Reduce decision-making time by guiding the users to the settings page.
  • Simplify and prioritize the contents that users need.
  • Increase the readability and ease of navigation.

Project Information

Team Diana Wi
My Role UX Designer
Platform Web Application
Software Adobe XD
Year 2019
Duration 6 hours


First, researching and analyzing the Alert Box.

To understand Streamlabs Alert Box tool, I researched this widget settings page and analyzing the current user experience with new user perspective in mind.

(This is the current Alert Box widget settings page.)

After examining the settings, I identified 3 ways to set and manage the Alert Box widget.

  1. Installing an already-made widget from Widget Themes library.
  2. Customizing the alert box settings.
  3. Creating Custom HTML/CSS based alerts.

User Flow for current users.

Task: To customize the Alert Box widget settings and add it to Streamlabs OBS editor for live streaming.

Identifying the problem.

I discovered that the current design cannot differenciate between a new user and an existing user, and this causes frustration for new users who are not familiar with Streamlabs product.


Add a Call-To-Action button and guide the new users with creating their first customized alert box settings.


Reorganizing the Information Architecture

Low Fidelity - Sketching ideas.

Mid Fidelity - Wireframes

High Fidelity - Initial Design

Design Comparison

(Current Design)

(New Design)


User Testing & Design Iteration

I ran two user testing, one with a gamer with experience in using Streamlabs and another with a non-gamer for observation and receive feedback on my design prototype.

Final Design

Thank you for viewing my project~ ;)