Adverity Design System

The Adverity Design System “Frog” is enabling, guiding and supporting product development to increase productivity and satisfaction while raising the quality and consistency of the platform.

Adverity 2021 / 2022

The Frog Design System is an ongoing project.

Frog Design System home page in Storybook

Frog Design System home page in Storybook

My role

I was not a core design system team member. All work done for the design system was an extra initiative to help them grow, as I have design system experience from a previous role.

Writing Documentation

Adverity Frog was initially created to be for engineers only. It was a really informative pattern library for engineers with all the relevant component information. This meant that when the UX team was started in 2020 the design system did not serve the designers or the rest of the organisation. I was asked to start with a documentation initiative to help the designers in understanding the “About” section of a component, “When” they are allowed to use it, and “When not” to use the component with a recommendation on a more suited component to use. This is only step one of the process and the intention is to take it further with guidelines on Placement and Usability to name a few. I researched the history of the component with the engineer who created it. I then created a living document and created usability rules while closely aligning with the engineers to keep true to the component’s purpose and function within the platform. The rules were vetted by various team stakeholders and screened by the writing team.

Example of the living document and contributions from various stakeholders

Frog Design System Website

Frog needs a new home. Currently the design system sits in Storybook which does not serve the needs of the many other stakeholders in the company that use Frog.

I was asked to create a layout for a new site that would serve all users inclusively. We want Frog to not only represent Design and Engineering but also Marketing and Branding as well as our Tech and UX writing team members.

We need a custom site where we can all speak the same design language and that no matter who you are in the team the site is easy to navigate and understand. I created detailed wireframes as well as a few design artefacts for inspiration.

Example of the wireframes created for the new Frog design system website

Example of how the design system could display information for designers, engineers and other stakeholders

Design artefacts for Frog

Running Design Principles Workshops

The design system Product Manager and myself realised that a big amount of misalignment came from the fact that the designers and engineers did not have the same vision, everyone was working with their own interpretation of what is correct for the product.

We decided to fix this by running a few Vision and Principles workshops. This meant that the design system team and the UX team had their own team Vision’s and together we could now create Design Principles representing both teams that will ensure we have the best user and product experience.

Miro example of the Design Principles workshop

Miro example of the UX Vision workshop

Contributing Components to the library

Contributing to the design system is a very important part of being a part of the design and engineering team within an organisation. The design system team does not always know the needs of the design team and so it is hugely important that designers have the opportunity to contribute. In our team contribution is allowed and welcomed. We are all encouraged to contribute the components and patterns we would need to create successful features.

In this example I needed to create an Interactive Card to be a trigger for two actions but also give information so that the user can make the right choice.

Interactive Card component in Figma

Interactive Card component working files

Please be advised due to the sensitive nature of the work and respect for my previous employer I am not going into detail on the projects but rather discussing my role and responsibilities while in the position.

Thank you for your time.