Design + Code

Atlas Design System

A living library of UX/UI components for designers, developers, and other stakeholders coupled with guided on when and how to implement them on the Atlas application

What were the problems?

Upon completion of a UX review, I concluded the website had glaring inconsistencies. Among them included the following:

No established CTA pattern (i.e. primary/secondary/tertiary)
Inconsistent typography in color, font size, etc.
Misplaced icons
Abuse of brand colors
Abuse of accessible color contrast
No page-level/post-submit error messages
Multiple red colors for inline-errors
Too many UI libraries: Bootstrap, Kendo UI, Font Awesome
No pattern for tabular data in mobile

What was the result?

An internal website that documents all of the UI elements and the guidelines for usage. It also provides toolkits for developers to quickly retrieve code. My goal was to create the look and feel, document it, and then create a sandbox so it can be quickly replicated.

Create the look. Document it.

Due to page load optimization, this is a truncated example of the Atlas Design System.

Make it functional!

To make colors more easily accessible, users could click on the color that they needed and it would add it to the clipboard, making for quick copy and pasting.

In the “Buttons” Developer Kit, the developer can visually create and copy their own custom button and paste it in their own code.

In the “Inputs” Developer Kit, the developer can select which input they need and the corresponding parameters for that input.

In the “Cards” Developer Toolkit, developers can select which type of card they need (i.e. the intensity of the box shadow), the color of the card, whether to force a scrollbar in the body on the card, whether to make the heading of the card clickable, and a whole host of other options..

In the “Notifications” Developer Kit, the developer can select which notification style they need.

In the “Badges” Developer Toolkit, developers can select which type of badge and the appropriate size for the look and feel they are trying to achieve.

What were my contributions?

Researched the Atlas application, documenting inconsistencies in colors, typography, buttons, modals, error handling, spacing, inputs, iconography, tabular data, notifications, etc.
Came up with the idea to do a design system after heavy research as to how to document such a major change
Coded it by myself
Integrated Jackson and Coker’s style guide into the new design system
Integrated the use of multiple UI libraries (Bootstrap, Kendo UI, Font Awesome) into a cohesive look and feel*
Specifically used SASS as the CSS pre-compiler so they could take advantage of specific features like variables and nesting.

* Note: I advised against having so many UI libraries in the first place. My advice was not taken.