Designing, documenting and establishing a design system.
When I first started at Nebraska Medicine, I noticed that our digital products lacked standardization. Recognizing the potential to establish a consistent design language across our platforms, I set out to create a comprehensive design system. Coincidentally, around the same time, a major corporate initiative—the new Employee Value Proposition—provided an ideal opportunity to apply and evolve this system. From there, other web-based and mobile apps iteratively inherited this new system — all further stress-testing and improving upon the system.
User Experience Designer, Marketing Operations, Copywriters, Leadership
User Experience Designer, Marketing Operations, Copywriters, Leadership
4 months
Problem
Are design systems really necessary?
Starting at Nebraska Medicine, I quickly realized there was a significant challenge at hand. Our digital environment was a patchwork of styles and strategies. Different teams, working in isolation, had developed their own approaches, leading to a hodgepodge of designs that often conflicted and duplicated efforts. It was clear that each new project was built under pressure to deliver quickly, sometimes skipping essential planning and research phases.
The new design system serves as a common language, helping us streamline our efforts and ensure consistency across all digital platforms. By integrating this system, we aimed to not only improve communication among the various teams but also enhance the overall quality and coherence of our digital products. It was an exciting venture, and the perfect timing as a new enterprise project emerged, allowing us to test and refine our approach in a real-world setting.
Process
A single source of truth for everyone to refer to
"A design system acts as the connective tissue that holds together your entire platform"
Inspired by Drew Bridewell's principles, I developed a design system that includes color, grid systems, spacing scales, radius, type scales, an icon library, and interactive language.
It features reusable components and auto layout capabilities that effortlessly adjust across various devices for consistent and efficient designs. I also integrated variables to ensure uniform styles, colors, and typography, allowing for quick modifications throughout the system [fig 2].
I designed each component with multiple variations to clearly show different interactive states. This includes detailed guidelines for buttons, banners, search bars, breadcrumbs, spacing, and the basic building blocks of our designs, ensuring everything is clear and easy to use.
⚛️ All buttons use the exact same starting point; if that shape were to change, it can be updated by changing that single atomic component.
Get up to speed with how to use the system in minutes
I recognized that detailed documentation and strict governance regarding how our brand was incorporated into our design language would be crucial to the system's success and sustainability.
To ensure precision and clarity, I collaborated with a copywriter to meticulously document and record every specific detail of the design system, complete with practical examples.
Figma provided the perfect medium for the network of documentation this design system required. The ease and speed of setup, content management, headers, bookmarks, linking and document outline allow the documents to navigate like websites. Ultimately, I plan to move it to a dedicated website.
The use of variables has proven invaluable for engineers, providing them with clear guidelines and ready-to-use components, simplifying development.
✴️ Keeping developers in mind!
Implementation
Testing and iterating in the wild
Here are examples of responsive designs at the two specified system breakpoints for different system patterns. Each pattern was prototyped and rigorously tested in actual product scenarios with live content in Figma.
This is the proposed design for the Nebraska Medicine Homepage. However, the project was put on hold as the Careers campaign has taken precedence.
.png)
We began by implementing the design system on our company's internal login pages. This focused approach allowed us to effectively stress-test the system in a controlled, yet crucial environment.
Phew...are we there yet?
I regularly update and maintain our design system to ensure it aligns with the latest features in Figma. This ongoing effort has helped keep our development process efficient and enhanced the scalability of our system as Nebraska Medicine grows.
