Case Study
Edwards Lifesciences Digital Toolkit
Building a design system
When I joined Edwards Lifesciences in 2020 as a Staff UX Designer, the organization was only just beginning to invest in an internal design team. It’s not that they were late to the party; it’s just that much of their digital footprint was left to a revolving door of external agencies.
The result to date? A set of loosely connected web properties that shared some brand qualities, but also had tremendous variations in style and flavor.
It was clear that our internal design team needed to build its foundation on a common language. We needed consistency, clear guidelines, blessings from our brand partners, and something that could be easily followed by outside design agencies.
We needed a design system.
Where do we start?
COLLECT
The first task was to collect all design files, both received from external agencies and any that were produced in-house. If something was lost to time, we even went so far as to grab screenshots from our websites. After a thorough examination of our files, we had an inventory of parts.
AUDIT
Our inventory allowed us to visualize a problem that many of us already understood, which was the lack of standards across our digital landscape. We saw several button styles, different modal designs, broad typography scales, icons with a range of line weights, oh my!
PRIORITIZE
Be clear, be confident and don’t overthink it. The beauty of your story is that it’s going to continue to evolve and your site can evolve with it. Your goal should be to make it feel right for right now. Later will take care of itself. It always does.
“Using Figma’s FigJam to collaborate, we prioritized what we felt was necessary for a V1 debut.”
Atomic design, applied
In recent years, I’ve been the lucky beneficiary of thoughtful - if not outright mature - design systems. Now that it was time for me to help create one from the ground up, I patterned my strategy on Brad Frost’s very popular Atomic Design methodology.
Put simply, Atomic Design asks us to think of our system as a series of building blocks. Simple components are called atoms. Atoms come together to make molecules. Molecules come together to make organism. At some point, you should have enough complexity to make a web page.
Conceptually, I added to Frost’s mental model by introducing a concept called “Particles.” Brad described atoms as “elements that can’t be broken down any further without ceasing to be function,” but in a design system there are indeed non-functional primitives. Color, breakpoints, grids, and spacing rules are all essential aspects of any style guide but aren’t useful in and of themselves. Particles can align fairly closely to the idea of SASS/LESS variable tokens or styles in Figma.
Challenges along the way
Support from leadership
We all understood the need for a design system, but the work itself was not forecasted into our roadmap. Additionally, I felt strongly that we needed to treat this as a real project, which meant assigning project management resources to help move things along. All of which is to say leadership wasn’t exactly chomping at the bit to kick this off.
To start, we agreed to dedicate no more than 20% of a Sprint to our design system and I would become a de facto project manager. We also assured our stakeholders that no projects in our roadmap would be put at risk. Existing and planned projects would continue to be the priority.
Working virtually
At the time, many of us were still learning how to work from home. The simple act of an impromptu whiteboard sketching session was replaced with “hey are you busy” and then an Outlook invitation and then a Zoom call and then “hang on, I’m having audio issues...” and the
This problem wasn’t exclusive to this project. We leaned heavily into tools like Figma’s FigJam and the drawing features in Microsoft Teams to help with collaboration. In the end, it’s a commitment to communicate with each other as regularly as possible.
Motivation and focus
The agreement to dedicate no more than 20% of our team’s time predictably caused a lot of starting and stopping along the way. Work on this project often gave way to higher priority efforts. Even when time can be allocated, context-switching is a common struggle for designers. Myself included.
If I’m being honest, our team struggled with motivation throughout the entire project. While Toolkit was eventually delivered, it took much longer than I had originally expected. Focus was a challenge that plagued us throughout the entire lifecycle.
The Edwards Digital Toolkit
There were no shortage of reasons to pursue this endeavor. Consistency in design, increased speed of delivery, alignment across teams - these are just a few that come to mind. Heck, had we given our system a name (besides “Toolkit”), I’d have called it Daft Punk.
Better. Stronger. Faster.
Our weapon of choice for this project was Figma. Figma’s presentation mode was an ideal platform for us since we could document our components in such a way that they were readily consumable for external agencies.
What’s next?
01
The work isn’t finished. We’ll add to Toolkit by moving down our list of priorities for it. With the basic elements documented, we’ll start attacking the more complex organisms like pagination controls, tables, and menu systems.
02
We need to bridge the gap between design and code so that there is no disconnect between the two. After considering several tools for housing our code base, we selected Storybook for ease-of-use and a built-in plugin for Figma.
03
Keeping the work going necessarily means respecting this as a living, breathing product. In order to maintain accountability, it needs a sufficient amount of management. We’ll need support from leadership to fund the project, help make decisions, properly set priorities, and commit to deliverables.
04
What good is a design system if it isn’t being used? We’ll continue to evangelize this asset to marketing teams who partner with agencies so that the sites that are produced internally share the same DNA as the sites that are produced externally.