While at Rapid7, I worked on the redesign of the AppSpider Validate Chrome Plugin. It enables users to open any report in Chrome and be able to use the real-time vulnerability validation without the need of Java or having to zip up the folder and send it off. This makes reporting and troubleshooting much easier!

Role

Over the course of three months, it was my responsibility to take the already existing user interface and rework the flow and create an aesthetic in line with the business objectives of Rapid7.

Information Architecture

Workflow

Wireframes

Visual Design

Approach

One of our strongest directions was really to make it appear very sleek and modern, but also taking into consideration that they are delivering a lot of detailed information. There are a lot of metrics in evaluating vulnerability so I had to learn more about the nature of the product.

Before

Before the redesign, the plugin looked nothing like the current AppSpider theme and did not adhere to the Rapid7 styleguide.

Workflow

The old flow was complex and most options were hidden away in modals and dropdown menus. The new flow considers what happens to the user before & after they open the plugin.

Before

After

Initial Sketches

By sketching I was able to rapidly get my ideas down quickly. This allowed me to spend less time at the monitor and more time thinking of the user experience and how the user will get from A to B.

Wireframes & Storyboarding

After I finished sketching, I started to make some high-fidelity wireframes. This allowed me to flesh out and make sure that I had near perfect concepts before proceeding to designing. It also allowed me to create an InVision prototype so that I can share my ideas with key stakeholders to get feedback.

Final Design

Colophon
Throughout the design process I was supported by Russell Kerr, one of the UX designers at Rapid7.