Company: HackerOne
Role: Product Designer (Contract)
2019
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.
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.
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.
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.
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.
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.
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.