Viking Design System

2022 - Viking

components - documentation - storybook

Project summary

Please note: this is only a summary of the project. More detailed information and visuals are left out due to copyright restrictions. Feel free to reach out if you wanna know more!

When I started at Viking, a new UX team was being built with the ambition of creating a design library from which UX would be the center of development within the company. But to achieve this ambition, much had to be done. Upon my arrival, a transition from Sketch to Figma had just been made, so designs and components had only been partially added to Figma. Any kind of design documentation was completely lacking. In addition, there was also a big challenge in convincing stakeholders and upper management to work this way. It was the goal, together with my team, to build a design system with great documentation to prove its value and benefits and convince the business to move along.

One of my first assignments at Viking was to set up the foundation of our design system documentation on a new centralized spot. For this, zeroheight was chosen, on which I was able to set up the foundational structure. I based Viking's design system structure on that of industry leading design systems, like the Atlassian Design System, Google's Material Design and the Carbon Design System. At our core, we’ve used the Atomic Design methodology to clearly divide each interface level.

Throughout my time at Viking, I helped to expand our design system by improving on existing components, or by adding new ones. Bootstrap was our front-end framework, so every component we were designing needed to be based on Bootstrap's documentation and front-end structure. Documentation for each new component was added to zeroheight. New or improved components were handed over to our front-end developers to be added to Storybook. Storybook is a front-end workspace to display options and variants of components. Developers can extract code from it, this to avoid them having to build the component from scratch. Storybook was also in its infancy at Viking, but I was able to help expand it by providing components I had designed.

When having a design system, it is also important to utilize it on designs. For each and every project, I tried to reuse as many existing elements as possible. New elements could be introduced when absolutely necessary and when it really delivered a significant improvement to the user experience, but in most cases, using existing components was the preferred way.

The assignment formulated:

"Setup the foundation for Viking's design system and include or improve the core components to enable a more efficiënt and consistent design process."

Although the benefits of having a design system are very clear for us as designers, it was and still is a huge challenge to convince both the business, stakeholders and even developers. Nevertheless, I’m super proud to be part of the setup of this design system. I personally really enjoy building components that I can then use in my designs. And also, a design system is never finished and there is always something to add or update, which also makes it interesting.

Hit me up if you want more details and visuals of this case!

Hit me up on LinkedIn