PROJECT OVERVIEW
A design system is an ever-changing set of guidelines consisting of reusable components, standards, symbols, fonts, and colors that can be assembled together to build the essence of your brand so that it can expand over time.
I created the Cappex Design System, which was my first design system I made from start to finish. This process took over 2 months to complete and it still used at the guidebook for the brand today.
THE PROBLEM
The brand was all over the place in terms of a unified design with over 20 button variations, a disorganized color palette, non-matching illustrations, and they were even using multiple logos! It was hard to see a clear brand identity and sense of hierarchy and I knew that we had to sweep as much as possible while still keeping the essence of the brand intact.
THE EXECUTION - FOUNDATION IS KEY
Without a solid foundation, you can't build anything of value - so I began with the basics. I started with an 8pt spacing and the grid 12-column grid so that it was responsive and unified. This allowed for better communication with other designers and developers, and we had a common base.
TYPOGRAPHY
One of the standard Material Design fonts it Roboto which is what we had been using. Don't get me wrong, Roboto has great visibility when it is seen from afar, but I wanted something a little more... fresh, casual, light, & modern. After much debate and other contestants, I introduced Nunito Sans to the family.
COLOR PALETTE
As an artist, I LOVE color but when it comes to design, I am all about using color theory in addition to making sure it's functional and supports clear communication. The first step was changing the outdated teal logo to something that symbolized creativity and knowledge. After incorporating the rest of the design team into the decision, we agreed on Indigo! Indigo became the starting point I based the rest of the colors off of so that they would compliment nicely. I also tested the colors in greyscale to make sure they were distinct enough for those who are visually impaired.
After I finalized the color pallet, the team voted on our favorite names for the colors :)
THE RESULTS
Design Systems are incredibly complex and ever evolving. You may have to put in a little sweat before you get everything right, but in the end it is worth it. Creating this design system increased the speed and efficiency of our design process in final mockups by nearly 70%!