REDESIGN ASSIGNMENT | UX DESIGN
Full disclosure: This project is an assignment given from the product and design team at Streamlabs for a Visual Designer position I applied for back in April 2019. The assignment was to prepare a redesign of the Alert Box widget settings page. The instructions were to design within a timeframe of 6 hours with no outside help. Below is a side-by-side comparison of this webpage design, before and after.
BEFORE - CURRENT STREAMLABS DESIGN
AFTER - REDESIGN SUBMISSION
IDEATION & WIREFRAMING
As this was a redesign assignment, I looked mainly to the current design to see things I can improve. My main motivation was with enhancing scan-ability in the page by reworking it to have greater ease of reading. According to Nielsen Norman group, users scan in an F-shaped pattern when they are trying to be efficient on that page. As the Alert Box page is content rich, I wanted to base my redesign on an F-shaped layout as well. Because of this, I rearranged how the menu is laid out, from vertical left side bar to a horizontal top bar. This is also the reason I moved the testing section of the widget to the bottom end of the page. Once the user has completed with their Alert Box settings, they can then proceed to test it. In the current design, a user would scroll downwards to change any setting before moving up again to test. You can see these changes in the wireframes below:
I think the Streamlabs software has very elegant solution and a beautiful user interface for what it’s trying to do, with all the information that has to be displayed. I had a great time working on it, figuring out ways to improve the current design and I commend the startup company for seeing the value of design in its early stages. Currently, I've not heard an update yet on whether they plan to move forward with me as a candidate but I'm glad to have been selected for this project as it gave me a chance to work on another web-based UI project but I've been told that I should hear back within the next week! You'll find a full writeup on my final design deliverable and solution here.