When I first entered Kalibrr, most of the older designers had moved on leaving a lot of legacy code and UI behind them. As Kalibrr grew and grew fast, documenting and making sure things we're scalable became the least of our priorities leaving a lot of UI and UX debt. Though there was an internal sketch design library, it did not reflect the current state of the product which still used out of box bootstrap UI. To make sure that we can scale the design team and design operations I needed to make sure we had a sustainable design system working.

Principles

To make sure we had buy-in across the entire organization and ensure scalability across the organization I brought in representatives from Marketing, C-level executives, Engineering and Product to join me on a discussion on Design principles. Using the Maslow's hierarchy of needs we we're able rank our design principles from which we can make sure our design decisions are always aligned even if we we're working in different teams.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bcdc0c7e-f06d-437b-9b62-ce7fad1bb36a/20180220_144432_HDR.jpg

The principles we've set as follows:

  1. Intuitive Creating clear solutions to user needs Everything we do should be clear and understandable that helps the user and brings them to what they need to do.
  2. Reliable Things work as expected and consistent Create consistent and reliable experiences that build on users expectations
  3. Relevant Showing contextual information on what the user needs Show what is relevant to the user and focus on user needs
  4. Engaging We make experiences that are enjoyable and keeps users constantly engaged Create engaging experiences that are personal and human which help people connect with each other.

Creating a Team

From previous experience I knew that without multi-disciplinary team committed to the cause. The push for a design system coincided with our desire to update our system to the latest version angular which made it easier start our efforts. We we're able to gather a set of engineers who specifically enjoyed working on the frontend to help us organize and build our design system. This group became the Design System Guild, individuals from different packs in the product engineering group who we're focused on interested on our frontend, UI and UX.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7460594c-9037-4028-952f-8d04d80087b6/0G1-tINBTL7N1jJ3z..png

Every time a specific component or element is initially designed by the designers, we'd gather the guild to discuss and gather feedback within the group. This helped make the process more inclusive and faster to develop as engineers are able to give their thoughts early in the process and are very aligned with the goals of the design.

Iteration

Not all components come out perfect at the start. What we've all learned throughout our creation of our design system is that design system components can be iterated and evolve over time. A good example of this was our buttons.

Our initial buttons we'r every much based on the material design specification but after discussions with our marketing designers, our engineers and testing it out with my dyslexic nephew we realized that our buttons could be more accessible, inclusive and malleable.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a6c8d6df-cd34-4486-bff4-59e312e502ea/Desktop.png

We changed the type setting to take out the all-caps, made the weight more bold to separate it from normal hyperlinks and creating variations of how it would look with an icon on the left-side and right-side.