Remediant Design System

 

About remediant

Remediant is a cybersecurity company that delivers enterprise-class solutions that enable real-time monitoring zero trust protection of privileged accounts and just in time administration (JITA) across IT security and ecosystems. An associate and I worked together to create a design system for their MVP product ahead of its release.


Process

image 2.jpg

Existing States: We began the journey by examining and breaking down Remediant's existing states. The goal was to successfully re-create Remediant's brand and incorporate atomic design to help for the quick construction of future environments. Here is a look at references and original pages that existed in the product before our reconstruction.

Button Specs-remediant.jpg

Button Specs: A brief view of states and specifications for our button library includes default, hover, focus, active, and disabled states.

color-system-remediant.jpg

Color Palate: For administrators to easily detect errors, warnings, or successful attempts, the color pallet needed to be accommodating and bold for easy detection. The primary blue also helped convey trust and security.

layout-blocks-remediant.jpg

Layouts: Mockups for different devices gave us playing room to envision content and data that could be moved around for the best UI. This allowed us to easily plug-in components such as dashboards, list views, or system details

data-table-sketches-remediant.jpg

Data Tables: List views and data tables were a crucial aspect we needed to keep in mind when building out our design system. System administrators and users of the product would be heavily involved in using this environment, their experience needed to be seamless and conveniently display identifiable threats. Each user goes about parsing dating and information in their unique way, because of this we allowed users to filter and reconstruct their own customized experience.

Frame 5 (1).jpg

System Details: To enable or block a user from entering a domain, administrators needed to allow access through system details. We used progressive disclosure principles to present information as necessary in a compact viewable area.

Frame 5 (2).jpg

Mobile UI: Once our design system was further along we were then able to mockup tablet and mobile wireframes, giving administrators faster access through their mobile devices if they didn’t have access to their laptop or desktop. Although this was not released with the MVP it was beneficial in testing our effective design system and user experience.


Final Outcome

Our final design system is now being used in Remediant’s current public product. It will continue to be tested, challenged, and updated. Our work helped build out Remediant's foundation and final MVP.