Introduction

HeyBryan is a startup that connects home service experts with anyone who needs tasks done around the home.

Goal

Unite departments around a common visual language, deliver consistent user experiences across products, and increase development speed.

My role

Create and document the design system involving:

Defining design principles
Auditing interface patterns
Establishing a pattern library
Documenting patterns and guidelines

Group session — Prioritizing solutions to implement as patterns

Problem

Research uncovered the following problem areas.

Inefficient patterns

Multiple design patterns solving the same problem

Reduced velocity

Increasing design and technical debt slowing down product output

Inconsistencies

Discrepant styles and interface designs weakening the brand

Solution

Create a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Toolbox design system

Read the MVP design system documentation

docs.google.com/...

Process

I followed Alla Kholmatova's excellent book 'Design Systems' - creating design languages for digital products.

Step 1: Define design principles

I started by defining our design principles to ensure the purpose of the product manifested in the design and to help articulate the personality we want users to experience.

Purpose and ethos

The purpose is the core of the product and should inform design and development decisions. Based on our understanding of who our users are, their goals, needs and motivations, I expressed the purpose as:

Connect caring experts with house proud customers and enrich them with a personable and trustworthy experience.

Design principles

Empowering

Nothing makes you feel uncomfortable or like you can’t trust the system. The system aids you when needed.

Inclusive

Everything we design should be as usable, legible, and readable as possible. We prioritize accessibility over beauty.

Conversational

The system speaks the user’s language. Our use of copy and interactions breathes personality into our product and allows us to communicate with users in easily understood ways.

Step 2: Systemize functional patterns

Functional patterns are the tangible building blocks of the interface. Their purpose is to enable or encourage certain user behaviours.

Interface inventory

To deconstruct pages into their simplest component forms and define the essential design patterns, I created an interface inventory.

Auditing all interface elements allowed me to uncover inconsistencies, expose redundancies, and ensure all components were accounted for.

Grouping functional patterns by purpose

Define functional patterns

After collecting and grouping all elements by purpose, I decided to merge or keep patterns separate. I did this by mapping out the content structure of each component.

Typically, elements that can be merged into one pattern share the same underlying structure.

Similar elements used to show task pricing

Merging elements into one pattern

Cost list pattern and variants used to show task pricing

Step 3: Systemize perceptual patterns

Perceptual patterns are the styles and skin of the interface, such as tone of voice, typography, colour. They help express the brand image.

Identifying signature patterns

The first step was to identify aesthetic qualities and pin down distinct elements that convey the brand.

Aesthetic qualities and signature patterns

Styles inventory

Similarly to the interface inventory, I collected and grouped individual style elements by purpose, then defined patterns.

Audit of links and buttons in a Google doc

Define perceptual patterns

Next, I defined patterns based on the purpose and feel.

Colour patterns for links and buttons

Agree on guiding principles

Finally, we agreed on a few fundamental principles for how to use perceptual patterns. Guiding principles helped us approach styles such as colour holistically. A general example of one of our guiding principles for colour is:

Always use accessible colour contrast.

Step 4: Establish the pattern library

A pattern library is a tool for documenting and sharing design patterns.

Documentation

I documented the MVP pattern library in a Google doc allowing everyone on the team to access the content and make changes.

Documenting patterns in Google Docs

Organization of patterns

Having a common methodology for organizing patterns made it easier to add and find things as the library grew.

We used the following naming structure to organize our patterns by structure and finally, purpose.

Stage	Definition	Relationship	Example
Elemements	Foundational building blocks	Combine to create components	Label
Components	Simple groups of UI elements functioning together as a unit	Made up of elements and combine to create patterns	List item
Patterns	Enable or encourage certain user behaviours	Made up of foundational elements	Cost list

Organization of interface elements in the pattern library

Outcome

While creating the patterns, I organized them in sketch library files, which we referred to throughout the design process.

Using the system has increased velocity for design and development.

Design system