- ROLE
UX Lead & UX Designer
- FOR
ForAllSecure
- DATE
Summer 2021
Mayhem by ForAllSecure is the product that I’m currently redesigning.
Here, we're looking at Mayhem's star: the analysis page. This is where Mayhem takes an application from a user and analyzes it before showcasing some data for the user to decipher.
All base designs were created with Illustrator, Sketch, or Figma. All user research is done by me using standardized qualitative/quantitative methodologies.
The team consists of two UI engineers (for implementation) and myself.
BACKGROUND
The results page of the product where the user can view whether Mayhem found issues, problems, bugs, or defects – is the bread and butter of the experience. However, as shown below, it’s pretty difficult to decipher the information unless you’re a seasoned security engineer who’s been using the product for about 5 months.
The page has unorganized links at the top, the breadcrumbs are somewhat lost in all the text shown, the row of spheres at the top are showcasing Mayhem’s analysis “phases” process (which are not dependent on one another usually but this design makes the user think they are), and below the “phases” process is where all the analysis results are showcased. It’s a lot all at once.
The new design shows the “phases” as “tasks” and breaks apart any mystery associated with the page. Clear status updates, important statistics, live line graph, and filterable celled tables makes the new design easier to digest. Plus, we’ve been told it’s a calmer experience.
We’ve tested the new page against the old page with 6 commercial users. 100% of the users gave positive feedback on the new page and they all felt immediately at ease with understanding the information presented on the page.
General design process is, briefly, as follows:
- Stakeholder interviews
- Background research/competitive analysis
- Modeling, mapping, flows
- Wireframes and/or prototypes
- Validation
- Improve design
- Repeat steps 4-6 as many times as we need in order to get clean, consistent data
- Repeat if necessary
- Hand-off and deployment
- Follow-up and maintenance
Old Analysis Page Layout and Design
THE PLAN
We decided to start from scratch and blow up a few concepts that existed on the older results page. At the top there was a “phases” concept which used to show the user what was happening as Mayhem digested and analyzed their application.
However, this isn’t really the case. These “phases” at the top of the page aren’t triggered by anything other than what Mayhem is currently “working on”. Most of the time, these “tasks” run asynchronously. Therefore, it’d make sense just to show what “tasks” were active, which “tasks” were completed, and which “tasks” would begin at a later time.
Along with this, after many iterations as shown below – you can see that we decided to use a familiar design pattern: the lefthand navigation to help give some context. The analysis page is connected to a target which lives in a project. A target is a digestible application format from the user that Mayhem ingests to analyze.
Showing the hierarchy made the design seem calmer to us and turns out: it was calmer to the users, too.
Extremely early days wireframes I threw together after hand sketches. Looks somewhat similar to what exists now.
Some more early days wireframes. Here is a really good example of me attempting to work within the “phases” concept of the original design before I blew that up and moved to the tasks concept.
Here’s the next process in my thoughts (but still wireframes) where I decided on a filtering plan that turned out to be the early idea for the current design.
Some slightly higher fidelity mocks from the wireframes. You can tell that I’m struggling with figuring out how to show the tasks at the top of the page. I did keep the metrics, line graph, and table. Smoke testing information at the bottom. Looks very janky.
More mocks continued from above.
NEW PAGE
Below, I’ve included a view of the new analysis page.
Here, you can see which tasks are in the pipeline and stop any that you want.
You can filter out your findings between our different types of testing.
There’s a lot less clutter.
The palette is softer.
Plus, we’ve put in an improved table at the bottom of the page in case a user wants to drill into each test case and see what defects have been found after Mayhem has repeatedly tested their program.
All 6 tested users gave positive feedback and stated that this page was easier to understand.
New Analysis Page Layout and Design
The defects table on the new design can be changed to a table of test cases with the dropdown, shown above.
TAKEAWAY
This page was one of the many instances in the UI where a design facelift was necessary. The point of this entire product is figure out what defects or bugs are being found by Mayhem and help the user fix those issues as quickly as possible.
With the new page – the user can clearly see how many defects were found, see when the defects were found, and drill into what kind of defects they were in order to prioritize what to work on next.
Plus, we’ve been told the design “overall” is more delightful now.
Maintenance testing is currently taking place.