Design System
Adlumin is a fast-growing cybersecurity start-up that provides security information and event management, powered by advanced machine learning.
The flagship application needed a more unified and polished UI to provide users with a more seamless experience and support branding changes. There was no common resource or styling documentation for front-end engineers, creating a development environment where UI design was undefined and features in production did not have a holistic appearance.
Uncovering the Problem
I began by researching competitors’ tools and current design trends in SaaS products, as well as assessing the current UI code environment. A deprecated version of Bootstrap and misuse of the Ruby on Rails CSS file structure were contributing to the broad variety and inconsistency of UI solutions being written as workarounds.
I conducted a UI inventory and assessed inconsistencies in buttons, typography, color, iconography, data visualization, tables, and the use of certain layout components like forms and cards, documenting them in Sketch.
I surveyed the application team to get feedback about what would be helpful for them and how they preferred documentation to be formatted, which provided a baseline for creating the style guide.
I found that the application team needed simple, flexible guidelines and a clean codebase in order to build diverse features with visual consistency.
Creating the Design System
In order to have a clean foundation to implement a unified design system, I first needed to resolve the issues with the current CSS. I upgraded to Bootstrap 4 and edited CSS and HTML throughout the application to allow styling to be loaded correctly via the Rails asset pipeline.
I incorporated a simplified version of atomic design principles the help define the rules of the design system.
I made aesthetic choices informed by the UI inventory and branding guidelines, maintaining as much existing styling as possible within a new, holistic design.
Unified Layout Patterns
The Adlumin application has many different types of features and tools, making this aspect of the design system challenging — How do you commit to layout templates that are not numerous, overwrought, and complicated but still accommodate the diverse features in development? I found that the best way to solve this problem was to create simple, modular layouts that are dependent upon how the user needs to consume the information.
This allowed me to distill layouts down to two categories: Overview pages and Simple pages.
Overview pages are for content that gives a bird’s eye view, like a dashboard or any page that needs to provide broad perspective. Users can analyze various related information together to form generalized assessments and make decisions.
Simple pages are for content that is focused, like a user’s account settings or the details of a detection. These pages convey related information nested in secondary and tertiary navigation,, allowing users to concentrate on one thing at a time.
Layouts defined in the Adlumin Style Guide with examples
Updated Color Palette
Another key challenge was unifying the color palette in the application. I had found that there were many colors that were near duplicates, and others that were unharmonious outliers to the whole.
I collected all the existing colors in the UI and divided them by hue and shade. I took into account the default colors in Bootstrap 4 and AdminLTE (another style framework in use), and refined the existing colors down to a minimum, eliminating duplicates and near matches. I then created a secondary palette that harmonized with the primary palette I had defined in my logo redesign process.
I was able to implement the new color palette swiftly and efficiently with the updated Bootstrap CSS framework and Rails asset pipeline in place.
New Style Guidelines
The last stage of the roll-out process was to provide the application team with a resource to guide UI development and maintain the new design system.
I created an online style guide for engineers as a reference and followed up to confirm that it was meeting their needs.
The Adlumin Style Guide