Kristie Callander
Product Suite Design System
.png)
“A design system acts as the connective tissue that holds together your entire platform.”
― Drew Bridewell, Invision
When my company made the decision to become more product-focused, it was clear that we were developing a portfolio of healthcare case management solutions. As more and more contracts called for these products to work together, and as our portfolio of interoperable healthcare products grew, my director and I set out to define and establish what our Design System should look and function like to create that consistency that was needed.
*In consideration of a non-disclosure agreement, information on the project may be omitted or obfuscated in this case study. The information in this case study is my own and does not reflect any views of my employer and clients.
My Role: Contributing UX/UI Designer
Team: Director of Product Design, Marketing team
My Role
UX/UI Designer
Being pixel perfect - or as close to it as I can be - is my strength. I had a very tough Art Director early on in my career whom I can 'now' thank for that. While developing this Design System, I took ownership of defining the visual guidelines down to providing the CSS for various components.
The Challenge
Design a cohesive look and feel for new products and products already in the marketplace
We were tasked to develop a flexible and scalable design system that would update our current products and one that was flexible enough to use with new products. One of our big challenges was designing with consideration for different product architectures. Additionally, since some products were already to market, we had to be empathic to those users and maintain but upgrade some of the basic components they were already familiar with.
Some of the key elements we focused on were but not limited to included:
A clean and
modern UI
Accessibility
Patterns and components to make tasks more efficient
Patient Safety
Responsive
Design
Discovery
Interviewing SMEs
Coming into this challenge, we had some ideas already in mind on what needed to be changed to our products from a workflow perspective to visual identity. Because of budget constraints along with wanting to conceal our propriety design and development efforts in a competitive market, we were only able to receive limited feedback. Fortunately, our company had hired several subject matter experts who were industry veterans; consisting of clinicians, Medicaid and Medicare experts, a former commissioner for a state department of Medicaid, and people who worked with managed care organizations. These SMEs proved to be valuable; helping us decide on design decisions that they knew would help staff in the healthcare industry.
Competitive Analysis
We had the ability to view a few competitors in the industry. After demoing these other products, we were able to glean what was favored and how we could improve on certain elements and make it our own.
Heuristics Analysis
A thorough analysis was performed to evaluate our current products' design and functionality against certain benchmarks we developed as well as Neilsen Norman's 10 Heuristics principles for UI design. Knowing that our products were interoperable, allowing user to move from one application to another, we knew that consistency was going to be key for an optimal user experience. While the applications and user needs were different at times, we knew we could tie things together with a cohesive UI.
Compiling and considering all the feedback and research, we set out to design.
The Source of Truth
Understanding System Foundations
We took time to sketching out various workflows and how they could work with each product. Providing that consistency proved challenging from a workflow perspective. But there were some standards we could agree on that would be the design system templates. Some of these we dove deep into analysis and iterative design included:
-
Dashboards
-
Record screens with profile ribbons
-
Action toolbars
-
Tabs on screens with multiple processes
-
Global search, simple search, advanced search, and predefined filters
Dashboards
Record Profile Workspaces
Action Toolbars with Simple Search, Advanced Search and filters
Customizable Branding with an acceptable WCAG Color System
Color is a huge element to tie products together as well as work critical with marketing efforts. Using Leonardo.io, we developed a color system that could be easily switched to meet the needs of clients who wanted to white-label the products. By creating a scale of colors and using variable names, we could easily generate any custom palette using this process and make it easy for the developers to update just by swapping out hex values. Leonardo also assigned the WCAG scale so we knew what was 508 compliant.
Core colors
Custom colors
Custom Iconography
Using Icomoon.io - we were able to develop a custom icon font library that was scalable and easier for the developers to use than inserting ,svgs where there are icons. It provided a consistent size and position for the icons.
Style Guides
A comprehensive style guide was provided that laid out the CSS specs for each element, including hover, selected, and focus states when applicable. Below are some of the examples of specs I created and provided to the developers.
Takeaways
Challenges:
As these products grow and new features are being added, sometimes the patterns we had once defined might need to change. This can cause frustration with the developers and BAs when things change. We often have to negotiate and meet in the middle to not have to invest too much effort in a complete redesign of an element. I have also gotten smarter on how to apply color in the system, what should be configurable and what should remain consistent for all clients.
Feedback:
We have received lots of praise for the design system from clients, internal teams including executives, down to developers who appreciate the detailed style guide I have provided. The product suite is much more cohesive now allowing for a more seamless experience when bundled and integrated.