Structuring and crafting an enterprise-wide, responsive design system for scalability and consistency

  • Company

    LivaNova

  • My Role

    In-House UX Designer

  • Project Type

    Design System

  • Team

    5 Designer, 2 Developers

  • Tools

    Figma, Dovetail, Frontitude

  • Year

    2024

Company Background

LivaNova is a medical device company that makes life-changing implantables that use vagus nerve stimulation to improve the quality of life of patients with chronic conditions like epilepsy.

A vagus nerve stimulating implantable device, an elliptical shaped silver device with the LivaNova branding engraved on it

DISCLAIMER: Due to the proprietary nature of the products LivaNova builds, I have replicated what I accomplished and worked on with placeholder information and imagery.

Project Overview

It was my team’s job to modernize our products’ usability by creating digital alternatives for the current hardware for neuromodulation treatments which would allow for more flexibility for VNS therapy clinicians and patients

Ideally

To accomplish this, we needed an enterprise-wide design system that:

  • laid the foundation for scalability and consistency

  • streamlined developer handoff

  • was easy for designers to maintain

  • successfully addressing the 3 business and user needs of legibility, localization, and screen size, explained below

An image of a set of pill button components I made, with primary, secondary, and tertiary, in blue red and black

Responsive button components I made with icons that can be hidden.

  • a globe icon

    Localization

    Accommodate different languages (user/business need)

  • a magnifying glass icon

    Legibility

    Accommodate different font sizes (user need)

  • a tablet icon

    Responsiveness

    Accommodate different screen sizes (business need)

My Value Add

In my role as a UX Designer, I created 25+ responsive components for an enterprise-wide UI kit, helped structure the design system, and put together robust documentation for handoff.

An example of a completed UI using our new components.

Key Skills

  • Figma Auto-Layout

  • Figma Variables

  • Figma File Organization

  • Figma Prototyping

  • Responsive Design

  • Developer Handoff

Here’s how we did it!

Research - Structure

A quick investigation into the current state of our design system showed us it wasn’t much of a system but more like 3 estranged siblings doing their own thing and living by their own rules.

A flow diagram that visualizes the separately made design systems, one for tablet, one for mobile, and one for web. Each had their own components and style guide.

A diagram that visualizes the current state of the disjounted design systems.

Problems we faced because of this

  • Products lacked consistent visual design

  • Components were built separately and not responsively

  • System prevented scalability for future products

Research - Developers

For the first version of the tablet app, developers were handed Figma screenshots and told to recreate them (which is like building an Ikea table from just the picture instead of the instruction manual).

It led to incorrect and erratic design behavior for font size and different languages as seen in this visual.

An example of how parts of the tablet app behaved when translated to a longer language.

But what can we do about it?

I advocated for earlier and ongoing developer involvement, facilitating key discovery conversations with the developers that uncovered 3 specific pain points and blockers, listed below.

Some parameters that we learned the developers wanted to know.

  • A question mark icon

    Figma

    They were quite unfamiliar with Figma and didn’t want to have to search in its features.

  • A finger pressing a button icon

    Interactions

    They struggled to understand annotations for interactive behavior and scrolling.

  • a tablet icon

    Responsiveness

    They wanted specific parameters to help dictate responsive behavior.

Ideation - Structure

I collaborated with my fellow designers to shape a new design system structure that would be easier to maintain, smooth development handoffs, give users better usability, and scale seamlessly to a growing business.

The new structure of the design system.

TOP: Design guidelines

MIDDLE: Style guide + UI Kit

BOTTOM: Product Specific Flows, Screens + Components

Ideation - UI Kit Components

Now that we knew where we wanted things to go, we needed to figure out what those things were.

By auditing the 3 design systems (each with up to 40 components) we identified shared components to create a foundational UI Kit and split them up amongst us to remake.

Design - UI Kit Components

I followed this process when creating my new components. I created 25+ components, which included ones for the UI kit and product specific ones.

  • Analyze each component to see:

    • how they were implemented in Figma

    • what were the use cases and context

  • This allowed me to consolidate each component into a default base version & necessary variants.

    Product-specific variants would be built on top of this base version.

    During this stage I also defined the parameters of the component that would be necessary for the developers such as min/max width for text wrapping.

  • Remade the components by:

    • Researching other design systems

    • Presenting ideas to other designers to get alignment

    • Creating the component with auto-layout in Figma

    • Implementing the parameters as variables

    • Creating the variants as needed

  • We tested the components for the following:

    • Color accessibility

    • Larger font size

    • Longer languages

    • Different screen sizes

  • I redid 5 sets of screens for different user flows with the new components and responsive layouts for our tablet app screens.

  • Handing off newly made components to the developers. More information detailed below.

One of the more complicated chart components I made that use auto-layout and scale together.

Testing

In order to test for font size and languages, we had to create testing environments.

Larger Font Size

Our users prefer larger font sizes on tablets, but previous screens and components weren’t built responsively, causing layout issues when fonts were increased.

Designers manually adjusted each text box and then made design edits to layout issues, taking 5–10 minutes per screen.

I implemented font size variable modes in Figma, allowing designers to test a font increase for a whole screen or multiple screens with one click.

Combined with new responsive components, this significantly reduced design time.

Longer Languages - Pseudo-language

Our products are offered in a variety of languages, some with very long strings.

To test for longer languages, we worked with our clinical team to implement a pseudo-language.

This pseudo-language combined the longest string versions across multiple languages, allowing us to test worst-case responsiveness for a screen.

Longer Languages - Screen Layouts

Previously screens were not responsively designed in Figma so translations caused layout issues.

By introducing responsive design and auto-layout, I eliminated nearly 100% of screen-level layout issues.

This combined with the pseudo-language and font size variables made testing each screen a breeze!

Iteration

There were some cases in which the layout still was compromised after testing fonts and language testing environments so we collaborated to to iterate on the designs.

For this particular component, we decided to move the primary button below the subtext to make it clearer that the primary CTA was attached to this information.

A visualization of how the pseudo-language combines multiple languages into one screen to test worst case.

Handoff

Using our research with developers, the design team created a robust handoff document for our new components and screens to ensure the accurate implementation of the new designs so the developers only had to look at this and didn’t need to peruse Figma.

It described information such as:

  • Responsive behavior

  • Spacing and text wrapping

  • Min and max widths and heights

  • Scrolling & interactions

  • Dark mode

  • Any changes made to the component

Scrolling Behavior

As mentioned before during research we discovered the developers struggled to understand the scrolling behavior of screens.

I created prototypes and added them as gifs into the handoff documentation so they could easily visualize the behavior. They loved this!

Results

We finalized the UI kit and remade all of our screens with the new components and responsive layouts.

The components that were built have saved me time and lots of effort by allowing me to spin up fast designs and allowing me to spend more time thinking about bigger issues.
— Will Colley, Former Coworker

Other Accomplishments

  • Illustrations

    Componentized the illustrations to make them easier to use and created illustrations as needed

  • Interactions

    Conducted usability testing with different personas and used Dovetail to synthesize the findings.

  • Sharepoint

    Created and organized a Sharepoint site for our team that allowed for easy onboarding of new employees

View My Next Project

Empowering ESG investors to be able to buy Bitcoin by providing a Clean Bitcoin dashboard to visualize their environmental impact