Omnicell

omnicell-2021-blog-header-dark-bg
omnicell-down-arrow
omnicell-2021-05-future-city

Introduction

Omnicell: Figma design library

First Person invited me back to help redesign the Omnicell homepage. The client wanted to add a news section featuring events and updates. As a prerequisite, I was allowed a few days to organize the Figma project and design library.

Initial assessment

Transition to Figma

First Person had migrated the Omnicell project while I was away. They had imported my Sketch library, but they didn’t update it to work as a Figma library and only used it as a reference.

As a result, designers were creating their own design systems for each design file. This was causing inconsistencies and fragmentation throughout the project.

omnicell-2021-various-design-systems

Step 1

Consolidating styles

The first step in building a design library is to establish text and color styles so every element that follows can refer back to a single source.

I only had a few days to work on the library, so I decided it would be best to start fresh.

I migrated  style values from the imported Sketch library into a new shared library. Then I searched through the feature files, looking for updates or additions, and consolidated any styles that would be universal to the overall project.

omnicell-2021-design-system-styles

Step 2

Modular shared libraries

The new Figma library consists of modular shared libraries. Modular libraries are smaller and easier to update in small bursts. They can also be hidden individually to reduce clutter in the Assets panel.

At the foundation are Styles and Brand Assets. This is a lightweight library that all other libraries and projects would refer to for text, color, & other styles.

I also created an Image Assets project to be a dumping ground for large image files that often weigh down library files.

omnicell-2021-design-system-structure

Step 3

Atom components

My time was limited, so I focused on creating components for commonly used assets like icons, ornaments, buttons, and text blocks. They would essentially be the atoms of an atomic design library.

omnicell-2021-design-system-atom-components

Step 4

Helper components & documentation

Inspired by Figma's best practices, I created a Helper Components library. These are non-production, internal components for organizing designs:

  • Cover Kit (Figma project thumbnails)
  • Sticker Sheet Kit (documentation)
  • Sticky Notes (internal notes)

I also added an Introduction Kit for new designers. Each library has a “Start Here” page with instances of this documentation. The kit explains how to use Figma shared libraries and how it's all organized.

omnicell-2021-design-system-helper-components

Selected works

Omnicell: Figma libraryModular design library

Obvious: MVP designHigh-fidelity design specifications

Obvious: wireframesMulti-device strategy for a solo developer

OmnicellSketch design library & developing interactive kiosks

Starsky RoboticsUX research & design for a remote-driving system

Disney Movies AnywhereMaterial Design & Development

Star Wars APIAndroid design & code exercise

Fitness goals appProduct design exercise

DayframeAutomated photo frame for social media

HD WidgetsTop 10 Android app 2011-2014

App StatsPlay Store app tracking & metrics

CloudskipperFree music player

Flash / FlexBack when the web was fun

Elemental DesignOld school rave flyer designs