The Basics
The design and implementation of this project was conducted independently. I worked directly with our engineers to integrate this design system into our code repository. I also worked with our marketing team to understand our existing branding standards and incorporate them into Helix.
This project was conducted in tandem with the creation of the One Portal project. You can review the One Portal project here.
The Problem
Our interfaces had little to no visual consistency. As I began building out One Portal and as I had learned during my research, it would be impossible to move forward without building a design system.
So, I got to work.
Research + Background
I reached out to our graphic designer to learn more about our branding guidelines for marketing and print products. I sat down with some of our engineers to see what solutions they had in place and what they were using as a replacement to an internal design system. I also considered the existing components of our UI and how we can incorporate some characteristics without sacrificing usability.
Design
Once I had a firm foundation, I begun building the design system with agility. I prioritized the elements of the core elements of the system, and built others as needed.
Typography
Color Library
Buttons
Filled Icons
Two-Toned Icons
Implementation
Here, you can see how the elements shown above (as well as others) have been incorporated into One Portal.
Retrospective
I believe that building out this design system made every future project during my time as Strata significantly smoother. I was able to prioritize the elements of a design that needed more critical creativity, rather than building smaller elements of the design with every new product.