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
Implantables for the head and the heart
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 and other conditions that affect the brain and heart.
A LivaNova VNS Therapy implantable device.
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
In health tech, users require flexibility, speed, and accuracy.
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.
My Value Add
I helped lay the foundation for scalability and consistency.
In my role as a UX Designer, I helped structure an enterprise-wide design system, created 25+ responsive components for the UI kit and helped make handoff documentation.
I was on a distributed team with 4 other designers, 2 developers, our UX manager, and cross-functional teams such as clinical.
Key Skills:
Figma Auto-Layout
Figma Variables
Figma File Organization
Figma Prototyping
Responsive Design
Developer Handoff
An example of a completed UI using our new components.
A Leader in the Industry
Our hardware sets the standard in medical implantables and our digital solutions had to match that excellence.
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 addressed the 3 business and user needs of legibility, localization, and screen size, explained below
Responsive button components I made with icons that can be hidden.
-
Localization
Accommodate different languages (user/business need)
-
Legibility
Accommodate different font sizes (user need)
-
Responsiveness
Accommodate different screen sizes (business need)
Here’s how we did it!
Research - Structure
Unfortunately, we started with a big, disjointed mess.
A quick investigation into the current state of our design system showed us it wasn’t much of a system at all but more like 3 estranged siblings doing their own thing and behaving by their own rules.
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
Ever built a complicated piece of IKEA furniture from just the picture rather than the instruction manual?
That’s what our developers had been expected to do.
For the first version of the tablet app, developers were handed Figma screenshots and told to recreate them exactly, with minimal instruction to dictate behavior, scrolling and responsiveness.
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?
It seemed like our developers weren’t in the loop with the designers.
I advocated for earlier and ongoing developer involvement, facilitating key discovery conversations with both teams.
We uncovered 3 specific pain points and blockers they faced, detailed below.
Some parameters that we learned the developers wanted to know.
-
Figma
They were quite unfamiliar with Figma and didn’t want to have to search in its features.
-
Interactions
They struggled to understand annotations for interactive behavior and scrolling.
-
Responsiveness
They wanted specific parameters to help dictate responsive behavior.
Ideation - Design System Structure
Planning the structure was the key first step that was missing before.
I collaborated with my fellow designers to shape a new design system structure that would be easier to maintain, smooth development handoffs, increase usability and consistency, and scale easily for 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
Our structure was technically new but there was no need to start everything from scratch.
Now that we knew the structure and where we wanted our foundational UI kit to live within it, we audited the 3 design systems (20-40 components each) and identified shared components to populate it.
How we identified overlapping components from each device.
Design - Components
I created 25+ pixel-perfect, responsive components.
I followed this process when creating my new components, which included ones for the UI kit and product-specific ones.
I used auto-layout and now am an expert with it.
Of course, I used the new UI kit components to make the product-specific variants.
-
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 in “Handoff” section.
One of the more complicated chart components I made that use auto-layout and scale.
A header component with responsive buttons whose text wraps when they reach a max width
Testing - Font Size
Testing for font size increases was a laborious manual task.
Our users love larger fonts, and our designers LOVED having to manually increase each text box’s font size TWICE to test that a larger font wouldn’t break everything!
I hope you didn’t believe that last part.
When my fellow designer said to me “I wish there was a way to change all of these text boxes at once,” I laughed and agreed. Then it hit me!
I introduced font size variable modes in Figma, letting designers test screens with one click. This was an easy fix that saved designers several minutes per screen.
Combined with new responsively designed components, this significantly reduced design time.
A gif of the font variable modes increasing size automatically
Testing - Languages
“Medizinisches Gerät” is “medical device” in German, and this word and many others are significantly longer than their English equivalents.
Since our products are used by clinicians and patients all over the world, it was a requirement to support multiple languages.
The ones with extra-long text strings would frequently break layouts, but it was hard to tell which language would break which piece of the layout.
To test for this, we collaborated with our clinical team to create a pseudo-language that combined the longest strings from various languages, letting us simulate worst-case scenarios.
A visualization of how the pseudo-language combines multiple languages into one screen to test worst case.
Testing - Responsive Layouts
Since the screens were not originally responsively designed in Figma, any sort of change (font, language, or otherwise) would break the layout.
By introducing responsive design and auto-layout, I eliminated nearly 100% of screen-level layout issues.
This, the pseudolanguage, and font size variables made testing each screen a breeze!
A before and after of a screen after implementing a responsive layout.
Testing - Iterating
Even after rework, some layouts still broke.
We collaborated to iterate on these designs, sometimes having to redo the whole layout.
We didn’t have many components that required major changes, but the ones that we did have were quite challenging to make beautiful while also accommodating the fonts and languages, and making sure the most important information was still clear.
An image of the before and after of a card component that was particularly tough.
Handoff - Documentation
We initially encouraged developers to use Figma’s Dev Mode to easily access component parameters but they preferred a more direct approach.
We created easy-to-reference handoff documentation so they wouldn’t need to dig through Figma.
It detailed responsive behavior, spacing, text wrapping, size constraints, interactions, dark mode, and component updates.
We had indicator dots that would show which sections were ready for the developers to view.
The handoff documentation showing responsive behavior, spacing, text wrapping, size constraints, interactions, dark mode, and component updates.
Handoff - Scrolling + Interactions
As mentioned before the developers struggled to understand the scrolling behavior of screens.
I created prototypes and added them as gifs to the handoff documentation so they could easily visualize the scrolling and interactive behavior.
They loved this!
A gif of two screen prototypes scrolling.
Results - Final Deliverables
We finalized the UI kit and remade all of our screens with the new components and responsive layouts.
I remade 5 sets of screens for different user flows and was able to make fully responsive pages like this one.
With everything we worked on in place, the old flows were super fast and easy to remake, so now creating any new flows will also be easy too!
“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.”
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
Want to learn more?
Email me so we can chat about how I can help you! I’m actively looking for Product Design opportunities and ready to interview!
View My Next Project
Empowering ESG investors to be able to buy Bitcoin by providing a Clean Bitcoin dashboard to visualize their environmental impact for Clean Incentive.