As we head towards a brand refresh we decided to experiment with our brand palette and design systems to see what we could do to bring some cohesion to our brand while still testing out new ideas we may want to incorporate.
Calm Palette | Initial Design
Our current brand emphasizes a feeling of vibrancy through bright colors, but as we have learned through user research many of our learners actually feel a lot of anxiety about learning, so I experimented with a palette that could give users a sense of calm as they interact with our platform.
Our current iconography system uses geometric shapes and line icons but one of the challenges is the precision required to place the geometric shapes in a way that seems balanced. By using these more freeform organic shapes we're able to rapidly create new icons without the constraints on positioning we previously had to deal with.
I wanted to make the brand feel more human and friendly, so I used only curvy and freeform shapes, eliminating the harsh angles we previously used.
Calm-Combo Palette | Final
We combined the soothing light tones of the calm palette with some of the medium tones from our current color palette to bring in a bit more of our brand people are familiar with.
We eliminated the wiggle shape from the earlier round because it felt too frantic, and ended up with a selection of curvy geometric shapes and organic forms to use for our brand shapes.
One of the other design systems my colleague created in round 1 had these stipple designs which added a really nice textural element that we didn't want to lose, so we incorporated them into the final design system as well.
Then I started figuring out rules for the system so we could have our production designers hit the ground running. I laid out which color combos were difficult to see so the other designers knew what to avoid and I created a rule to limit designs to 3 or fewer shape or texture elements to keep the layout clean.
Accessibility is a huge concern for us since our mission is to make it possible for anyone, anywhere to transform their lives through learning. To meet AA accessibility text standards I made a rule to use the dark navy from the palette as our primary text color. When using navy as a background we are able to use the medium tone blue, yellow and pink so the text pops while still remaining accessible.
We're excited to roll out this new design system and see how it holds up in the real world as well as where it breaks 😃
