Axis Design System

Helping NuVasive build a beautiful and consistent user experience

2021

UX Design Lead

Axis Design System Demo

Axis Home
Axis Getting Started
Axis Colors
Axis Buttons and Components

MY ROLE

Lead UX Designer, collaborating with a design contractor. I focused on creating the design system architecture, designing and documenting components, and writing guidelines.

BACKGROUND

After releasing our first version of the Atlas Sales App in Japan, we realized that we needed a digital space for designers, developers, and product managers to share and access information, code snippets, and design patterns for consistent and reusable design modules for Atlas. I noticed that developers were creating new styles and components even though we had set patterns in the app. We required a location for developers and QA analysts to easily access and use code without causing differences every time we added a new feature to the app.

TEAM

  • Visual Design Contractor

  • Global Development Team

  • Leadership

GOALS

  • Design Faster

    Speed up design with standard guidelines and readymade components.

  • Reduce Development Time

    Allow developers to work faster with well-defined styles and code components that are always accessible.

  • Ship a Better Product

    Create a consistent and beautiful user experience.

PROCESS

  1. Research

    Read literature and attend workshops on the subject of design systems. Speak with business consultant from Gartner for advice. Get developer input. Research and evaluate platform options.

  2. Plan

    Meet with leadership to explain business value and get buy-in. Get approval for budget, time, and resources. Detail guidelines and governance plan.

  3. Design

    Create a proof of concept that includes a sampling of documentation, components, and code snippets.

  4. Deploy

    Launch v1 of the design system that we can build on and improve over time.

RESEARCH FINDINGS

  • Design Systems are Hard to Build with Only One Designer

    After speaking with a business consultant, and others in the UX field, it became clear that a design system is a significant amount of work for only one designer and I would need help from both designers and developers in creating coded components.

  • Developer Input

    Developers find the most value in readymade code components that they can grab and go. They also want the ability view styles and color palettes.

  • Platforms

    I researched the level of effort to create and maintain a homegrown platform. Going that route would entail a team of developers updating and maintaining code every step of the way. I needed something that a designer could easily manage with minimal developer assistance.

    I evaluated two subscription-based platforms, ultimately deciding on zeroheight which was in our budget and synced well with Figma, which I had already been using for design.

PLANNING

I presented my idea to leadership and got approval to use an offshore design contractor as well as a handful of developers to build the design system proof of concept in zeroheight. I also detailed out a governance model and roadmap for moving forward.

DESIGN

The plan was to start small, documenting the most common components like buttons and form fields. We also included things like colors, icons, and the most basic design guidelines.

There was a little bit of a learning curve for the developers. First they had to familiarize themselves with Storybook and Chromatic. These are the tools they needed to know in order to start creating those amazing coded components.

DEPLOY

After polishing our POC I returned to leadership to get the green light on moving forward with the design system.

The presentation was a success and we got approval to go live with v1.

AXIS

Now that our Design System became a living thing, we needed to call it something other than "The Design System".

At NuVasive, we are a spine company and everything we do revolves around that.

In anatomy, Atlas is the first cervical vertebrae of the spine and the namesake of our application. The Axis is the second cervical vertebra of the spine. It supports the Atlas and allows the head to pivot.

Axis is a metaphor.
Axis is the foundation that supports the Atlas. Without it, we would not be able to move and pivot with ease.

OUTCOME

Since publishing our design system, it has expanded significantly with additional features, process documentation, and components.

RESULTS:

  • Increased consistency so everything works the same across our entire app, reducing confusion and frustration for our users.

  • Decreased time to design and develop with well-defined standard guidelines and readymade components.

  • Less back and forth team discussions with design standards, guidelines and repeatable patterns.

  • Reduced number of design decisions we have to make every day so we can focus on our user's problems.

Atlas Japan

Atlas Japan

Globus Medical

Globus Medical

Patient Management

Patient Management

Sales Rep Experience

Sales Rep Experience