After Gibbon got acquired by Degreed, I was asked to lead and grow their design team. After a lot of listening and learning we defined the steps we had to take to bring Degreed Design to the next level. One of the first steps was setting up a solid design system.
To ensure consistency of output of a design team, it is essential to be aligned on design principles. That is why we started with defining product design principles with the team to use as a foundation for all our design decisions.
Degreed is a product with a lot of functionalities and features, to make the product easier to understand we re-evaluated all functionalities and where everything had to live inside the product. We created a sitemap of all pages and defined a user flow that was easier to understand.
To ensure consistency in layouts and elements we decided on a 12 column grid with a 12px baseline grid that would help us build our design system.
With the grid defined we could define our style guide. All dimensions, marging, paddings and line heights are based on the 12px baseline grid. We defined one call to action color, one highlight color and a grayscale of 5 swatches all based different opacities of a single gray color.
Degreed has an amazing set of customers; Tesla, Airbnb, Intel, Nasa, Harley-Davidson to name-drop just a few. We needed a clean and simple way for our customers to brand Degreed. We landed on making the top navigation bar customizable for customers with their logo and brand color.
Since the end-user often learns whenever they want where ever they are, we built native apps to make building your skills on the go as easy as pie.
Do you want to know more about this project? Don't hesitate to get in touch.