Design systems can be critical when it comes to managing — and growing — your healthcare company’s digital products and experiences. These centralized resources enable your team to build and scale solutions more efficiently, reduce design discrepancies, define information architecture, improve UX language, and create consistent experiences across platforms. All of those things add up to a better user experience. Not only that, but they also save your business time and money along the way.
No doubt about it, design systems are incredibly useful. But creating a robust, comprehensive system takes time and resources. The good news? There’s more than one way to approach them, with each option representing a different level of detail and investment. In this article, we’ll help you determine whether or not your healthcare organization’s digital experience needs a design system — and if so, which option is right for you.
What is a UX design system?
A design system is a collection of reusable components guided by clear standards. The components within a design system are like basic UX design and engineering building blocks. They can be assembled and configured to build any number of webpages or applications. In addition to ready-made components, design systems include general guidelines and principles that allow designers to ideate new design solutions while remaining aligned to the existing design scheme. In that sense, a design system is both a library and a brand governance tool.
It may help to think of a design system as a series of templates for building a house, where the plan for an additional bathroom or kitchen is standardized. These prefabricated blueprints might include both the design criteria — “put the vanity here and the tub there” — as well as the actual engineering specs.
When does it make sense to implement a design system?
A design system could theoretically benefit almost any digital product or experience. But not every product or digital experience will ultimately merit one. As with any investment, the trick is to weigh the costs of creating a design system against your actual need for one (and the ongoing benefits it could yield). So, how can you be sure your healthcare company’s digital experience actually requires a design system? Ask yourself the following questions to find out.
- Are you planning to expand or scale your product or experience moving forward?
- Do you manage multiple instances of your application across various platforms?
- Do your designers or developers find themselves “reinventing the wheel” each time a new feature or solution needs to be added?
- Is your team generally slow or inefficient when it comes to adding new features or solutions?
- Are multiple teams within your organization involved in creating and publishing digital content or web pages?
- Do you have trouble standardizing design elements across your site?
- Are you spending too much time pulling together page concepts or preparing designs for development?
- Do your users complain that it’s generally hard to navigate your app or toggle between platforms (such as a desktop and mobile experience)?
If you answered yes to any of these questions, now is a good time to explore what a design system could do for your organization.
What Kind of Design System is Right for Your Healthcare Organization?
There’s no one right way to create a design system. Consider the following options, starting with a simple style guide and building up to a comprehensive design system that includes both design and development components.
A quick note before we jump in: If you don’t have the resources to produce the design system you really want right away, don’t fret. It’s OK to start small and layer in new levels of detail as you are able. Design systems are living, breathing resources. They should grow and evolve over time. Remember, the underlying goal is to make it easier for your designers and developers to expand and iterate on your product or digital experience quickly and efficiently. Even a bare-bones style guide is better than nothing. If resources are tight, go minimal and work your way up. Alternatively, if you have the resources but not the manpower to create a design system in-house, outside resources can help.
1. Style Guide
A design system is a basic component library that documents some of the core elements of your design, such as fonts, colors, and image treatments. A style guide focuses on visual components; it doesn’t include code snippets or other engineering guidelines. It also doesn’t include robust documentation about how to use or combine the various elements presented within the style guide.
Going back to our house analogy, a style guide is like a catalog of all the basic building blocks that might be included in a house design, such as a kitchen cabinet or a window. But it doesn’t include information to guide designers in creating new or divergent configurations that fall outside of the “standard issue.” As such, a style guide isn’t really considered a design system, but it’s the first step in moving toward one.
Nevertheless, a basic style guide can go a long way in standardizing your designs across pages, user flows, and platforms.
2. Local User Interface Kit
A local UI kit is like an actionable style guide, one that is housed within a local design file. To create a local UI kit, you would first templatize your brand guidelines (colors, fonts, logos, etc.) as well as common user interface (UI) elements, modules, design patterns, and interactions. Ideally, you would make each reusable object a “component” or “symbol” within your design program of choice (such as Figma). That way, any changes your team makes to an individual object would automatically scale to the rest in your design file. Your local UI kit should be accessible by anyone working within a particular design file.
Local UI kits are the first step in building a more interactive design system. If a style guide is a design library, a UI kit is more like a design console. Taking the time to create these local kits makes it easier for your design team to make the right design choices at any given time. However, it’s important to remember that you’ll need to update each local UI kit separately as your design elements and guidelines evolve.
3. Centralized User Interface Kit
Building off of the concept of a local UI kit, a centralized UI kit acts as a centralized hub, one that controls the local UI kits across all of the individual design files within your organization. Think of the way a CSS file works. Any change you make within a CSS file is automatically applied across each of a website’s pages. With a centralized UI kit, the same operating principle applies.
A centralized UI kit can be especially useful in large organizations in which multiple teams are involved in creating pages, workflow interfaces, or content. Of course, a centralized UI kit is a little more work upfront to build. To do it well, you must carefully document your most important design elements and update them frequently to ensure that local UI kits are up to date. A centralized UI kit has downstream benefits — speed, efficiency, and accuracy — whether you have a large design team or work as a single designer.
4. Design System
Finally, you might choose to create a comprehensive design system. Design systems are the obvious choice for large, complex organizations that must manage large, complicated digital properties. Design systems include detailed design guidelines as well as engineering information, such as coded snippets.
It’s important to note that no two design systems are exactly alike. They can vary widely in terms of detail. What they have in common is their ability to guide designers, engineers, and product team as they make decisions, navigate edge cases, and scale digital products. Design systems often include detailed information about how to present information or structure user interfaces. For example, a design system might offer a primer on data visualizations that goes beyond documenting the visual look of various chart types by offering guidance on which visualizations are best-suited to different types of data.
To get a sense of how different design systems are structured, check out the following examples:
- Atomic Design System by UX designer and author Brad Frost
- Material Design by Google
- Fitgoal, a plug-and-play option for UI elements
- Spotify’s simple but clear brand design system
Chances are good that your healthcare organization’s digital properties would benefit from design documentation of some kind. Even if you aren’t yet ready to take the plunge and invest in a full-on design system, you can lay the groundwork now for a more consistent and efficient design process for years to come.