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.
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
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)
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 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.
-
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 - 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.”
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