Redesigning Alert Box Settings page.
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.
|My Role||UX Designer|
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.
- Installing an already-made widget from Widget Themes library.
- Customizing the alert box settings.
- 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.
SolutionAdd 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
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.
Based on my user testing result, I updated the design including reorganizing the information architecture.