Founding a Design System

 Mission

Establish a design system that captures the evolving needs of a med-tech start-up.

Project Summary

Digital therapeutics are an evidence-based therapeutic intervention and are powered by machine-learning or AI. The combination of artificial intelligence and wearable technology is revolutionizing health care.

Neurovine is a digital therapeutics start-up whose brand wants to reflect the company’s commitment to innovation, science and technology. 

This project sought to: 

  • Establish a common visual language

  • Align software, marketing and design

  • Increase design and development velocity

  • Prepare for growth in both the design team and the company.

 

Project Date

Winter 2022 - ongoing

 
 

My role

My job is to create a common design language that captures the evolving brand of a start-up. I pitched, planned, and layed the foundation for Neuronvine’s first design system.

My main areas of responsibility:

  • Defined our voice : the feel we convey

  • Defined our design principles : what we stand for as a company

  • Defined elements of design language: colour, shapes, icons, layouts

  • Developped the above with accessibility for people with brain injuries.

 
 

My Challenge

While Neurovine had general brand guidelines, these set a wellness and restorative tone. These didn’t reflect the company’s commitment to innovation, science and technology. 

My challenge was to revise the brand guidelines to capture the company’s principles. For this, I needed to define, set up and build a library of reusable components to share with future designers and with software engineers. I needed to do this while gaining buy-in from software, in particular.

 

 

My Solution

Exploration

  • What should Neurovine look like?

    • Inspiration

    • Principles

Define

  • Elements of design language:

    • type

    • colour

    • visual elements

Final designs + implementation

 
 

Exploration

I started by auditing Neurovine’s current visual guidelines.

What we had:

  • Our guidelines featured nature-inspired photography and symbolism.

  • The tone was wellness and restorative health.

 
 
 
 

What we didn’t have:

  • Specific use cases (ex: buttons and when to use them)

  • A library of re-usable components.

  • Buy-in: Leadership believes a wellness-inspired tone is misaligned with the company’s commitment to machine-learning and AI.

 

So I asked myself:

What should Neurovine look like?

  • What are our organizational principles?

  • Where can we draw inspiration from?

 

What should Neurovine look like?

Like itself. It should look like an extension of its values.

I worked with leadership to align on our company values. These values became the building blocks of our brand attributes.

 
 
 

Where can we draw inspiration from?

From the science and technology.

  • Data Science: Neurovine’s solution is based on algorithms and data modelling.

  • EEG signals: Neurovine’s technology uses EEG signals to determine a person’s individual brain profile.

We landed on stylization of brainwaves, data blocks and tones of green that remind of early computer GUIs.

 

So I asked myself:

With the building blocks in place, how can we define Neurovine’s design language?

  • What do textfields look like?

  • What do buttons look like?

 

Definition

After agreeing on core values and sources of information, I wanted to define key elements with precision. I followed a 5-part series by Figma.

I started building the component library:

  • Typography scales (size increments dictated by the golden ratio)

  • Color palette complete with hex codes, use cases and shade scales.

 
 

Brain injury can cause symptoms that are triggered by light. For accessibility, I designed the components in dark mode.

So I asked myself:

Will the design system stand the test of implementation?

  • Will it look good when applied to our patient onboarding?

  • When applying it to multiple products, will it produce a unified look?

The Design System applied to the patient onboarding.

Application

The Design System applied to the brain games.

Final Reflections

The Neurovine design system has been implemented to the patient app and the clinician portal. Currently, I am implementing it for a meditation module - a therapeutic intervention a clinician can prescribe to a patient.

The foundation of a design system has helped software, marketing and design share a common visual language. And we no longer waste time re-inventing the wheel - we can be faster in our iterations. And best of all individuals are no longer producing components on the side.

Finally, a design system isn’t ever complete or static; In the future, as we pivot and grow, we may updated the branding accordingly. And the design system will evolve in turn.