- ROLE
UX Lead & UX Designer
- FOR
ForAllSecure
- DATE
Autumn 2020
Mayhem by ForAllSecure is the product that I’m currently redesigning.
I've included samples here and snapshots of the new design system that I’ve created for the product.
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
Mayhem's old design system was out of date and needed a facelift. The team had been using the same guidelines for about 3 years before I started.
I decided to compile all the changes I've been making into a set of principles, new color palettes, new defect icons, new guidelines, personas, typography, fonts, and new platform components.
We also use the Semantic UI React toolkit.
I’ve separated the design principles that I’ve written for Mayhem into three categories:
General design principles focus on the UX design of the product. Glanceable, universal, balanced, and efficient. This is a fuzz testing product that also happens to be visually appealing and friendly.
Aesthetic principles are a little more relaxed. Simplicity, clear, consistent, modern. These principles matter because the product went from a student research project to an enterprise product used in the fuzz testing/cybersecurity industry.
Lastly, illustration principles are the most relaxed. Rhythm, delight, considerate, relevant. Illustrations are not the star of the product. They add decoration and are to brighten the seriousness nature of the product.
*Below are some samples from the updated design system.
General UX Design Principles
Product Aesthetic Principles
Product Illustration Principles
Base Colors
Accessible and aligned with government standards. This palette is used to build the UI.
Decorative Colors
Colors used in the illustrations, icons, and general spice.
Product Color Guidelines
DEFECTS ICONS
Without giving the entire product away, Mayhem’s analysis boasts categorizing defects/bugs found into various buckets that we’ve created.
As the sole designer for the company, I’ve created the icons below so the user can better understand what defects are found without having to read the description each time. These icons are meant to be glanceable and since the user looks at their results repeatedly – it’ll be easy to pick up on what kind of defects are found as time goes on.
Defect Icon Categories