HackerOne helps organizations reduce the risk of a security incident by working with the world's largest community of hackers. In 2019 I joined the H1 design team to help creating their design system.

My role

It was my job to design and creatively direct the creation and documentation of HackerOne's design system.

To begin, I conducted an audit of all components, patterns and features currently in use.
When I first started, Daisy was a growing style guide with components, patterns and features that include common UI components such as navigation, data tables, buttons, search bars and action confirmations.

• Developed and integrated component based design system into all aspects of design within the company
• Consolidating components and patterns across all platforms
  
• Implemented design system with redesign of website, which resulted in UX/UI consistency and the development of web guidelines
• Creation of new components with rules of usage
  
• Improved communication and productivity between design, development, and 3rd party agencies
• Ensuring 1-1 equivalence with react components from a visual & interaction standpoint

The process

I was immensely inspired by Air New Zealand's Unison, Shopify’s Polaris, Google’s Material Design and IBM’s Carbon design systems.

I started out experimenting with three different internal products that the system would be applied to, discovering, establishing and stress-testing a style and library of components and patterns.

Colours

My first approach was to make sure the colour palette was meeting the WCAG contrast standards while keeping the HackerOne's brand identity.

Three colours are the very core of HackerOne, Pink, Blue and Green. They should be used on elements that reflect H1’s identity, to orientate users and direct their attention.

Primary colours were used to convey meaning. Pink is used for primary actions, since it is one of HackerOne's core brand colours.

Buttons & Form fields

Good form design is critical to great user experiences. Poor form design can be a leading source of error and frustration for users.

Forms were designed to be easily understood, rather than to fit a specific space or shape.

Spacing and Breakpoints

A 8px grid system was set to be used when designing H1 products.
The 8px grid helps eliminate the guesswork, giving elements consistent visual hierarchy and provide better understanding.



Space scales are calculated using a geometric progression, which means each size is relative to the previous size, and is bigger by a fixed amount (known as the common ratio). This ensures that each size can be easily distinguished.

Takeaways

Creating an adaptive/responsive library of UI components allowed the H1 team to quickly construct UIs and flows avoiding re-designing the product over and over.

The first version of Daisy Design System contained an extensive Sketch pattern library featuring flexible components, colour and typography guidelines, and how to use rules.

The Design System was created on Sketch and Storybook on the frontend.