Mindstrong: Design System
As part of the rebranding effort, I also kicked off creating our design system and components. Throughout the journey, I partnered closely with our lead engineers working and tweaking every little detail.
First, I started building a catalog of reusable components which included colors, dynamic text styles, icons, buttons, card styles, and even spacers. I presented the inconsistencies that I discovered from my inventory building and how they affect the user experience to our product and engineer teams.
Then, I tackled the biggest area of the app—color palette. I decided on primary colors, naming convention, and color usage creating a system. During this process, I also tested out color contrasts and resolved any accessibility issues.
Next, I addressed our CTA issues. One of the main inconsistencies in our app was the CTA buttons. We had many button variations that were not used properly. The colors didn’t stand out nor had enough contrast. During the exploration, I tested out different button colors and styles. We landed on giving our primary CTA button a subtle touch of color gradation that drew enough attention but not overly distracting.
As the process of building and maintaining a design system is ever evolving and ongoing, I continue to monitor, add, and update them as we go.
