Loading...

Omnicell Design System

Documenting Interactions & Visual Patterns
Omnicell Design System Hero
  • Role
    UX Research, Experience Design, Interface Design, Information Architecture, Content Writing
  • Team
    4 Product Designers, 1 Engineering Partner
  • Timeframe
    October 2020 - Current. Released January 2021 (ongoing)
  • Link
    Greenlight.Omnicell.com

Challenge

Craft a design system that ensures a consistent experience across a variety of technologies within an ever-expanding product portfolio. Oh, and your product teams are spread across the four corners of the earth, you're doubling your design team within the year, and your user base is basically everyone. Bring it!

Solution

Migrate to a web platform, narrow personas to primary, secondary, and other. Foster constant collaboration with all system users. Shift layouts and content based on ongoing research and feedback gathering. Build trust with engineering and product by being responsive and open-minded.

Tool Setup & Priotization

After extensive research, the design system platform zeroheight was discovered. Integration with both design and engineering tools was essential, as was an easy to use back-end. zeroheight won our hearts by checking all these boxes. As for the name "Greenlight," it references the brand's primary color, and the phrase itself engenders ideas of getting started and ready to go. It is inline with the hardware itself, which uses a literal green light to tell users which cabinet drawer to open (coincidentally, "follow the green light" was even an old marketing catch phrase.)

Personas & User interviews

Each user group type was represented: front end developers, product managers, product designers, and industrial designers. An open-ended script formed the foundation of the highly conversational sessions; potential users were given the space to offer raw opinions on what they expected from the system. The results: new "Getting Started" articles were written, usage became the main focus on component pages, and navigation was streamlined.

Component Example: Buttons

This foundational component was the first in the system. It helped to determine the layout and structure of a component page; instead of one long page, tabs for style, usage and code divided the content. Standards for thorough style documentation and detailed usage were set.

Pattern Example: Forms

The basis of the UX in this iteraction documentation: best practices from a variety of sources. The practices were then presented to the design and engineering teams as recommendations. Most live on in this page, while a few didn't fit the context.

Glossary

Total passion portion of the design system. The idea for a glossary occurred during my onboarding. Previously, there was no online repository of terms and acronyms specific to health care and the company software/hardware. Many lines of business had their own pdf or excel file specific to them. This effort was initially driven by own need, which led to the realization that other newbies may appreciate it as well. Now, when a new team mate joins, I happily share this wealth of knowledge.

Next Steps

Continue to iterate as feedback pours in from various sources: Slack messages, email, and monthly Zoom feedback sessions. Switch focus from building out primitives (color, typography) and controls (buttons, toggles) to documenting workflows and patterns. Be flexible with priorities; allow them to shift with user needs.