My company launched a new tool that monitors specific websites for both marketing and regulatory compliance. While the tool could record these websites for viewing, there was no quick and easy way to review whether or not the page was compliant.A small browser extension had been created to try to alleviate this issue, but it rarely worked (and was only available to Firefox users). My goal was to create a viewer that would allow the user to review the page (and the issues found on that page) quickly and efficiently.
Research:This was my first UX project for the company, requiring a quick ramp-up period to better understand the customers and their needs. The head of product, devs, and sales members had already spoken to customers about the current solution -- it was clunky and covered up the page. Internally, we realized that the current design didn't support eventual feature growth.
Sketching:Customer efficiency was the focus of my sketching and brainstorming work. This led to two main options worth pursuing further - an inbox-like system (good for overall management) and an in-browser system for quick compliance review.
The Choice:The tool is geared toward thoroughness of web crawling, making for a lot of noise in the system. Considering this, the customer's main need is speed and efficiency of review. The in-browser system was the best option for meeting that customer need.
Visually, the horizontal structure keeps the website to be reviewed from responsive-design distortion. It also helps to create a clear hierarchy, quickly guiding the user to action. Once a review Is completed, the user is automatically moved to the next page for review.
Expansion:The first major expansion to the in-browser system allowed for filtering by alert-type. This information was added to a second bar below the action bar - connecting the viewing options with the page itself.
What I Learned:Feedback from users is critical, even when it seems like it's all positive. At first, we ran the design by a few customers who were excited by the usability. It alleviated many problems for them, which was great -- but it was by no means perfect. When we started to drill down, we realized that moving from one page to the other via review could be difficult given other restrictions, which led us to delaying the automatic-next until other tool issues were addressed.
Sketch more than you think you need to. This was my first UX project with the company, and I approached the sketching/ideation process like I approached marketing design. I quickly realized that far more sketching is necessary to identify options, stretch those options through a user flow, and iterate.