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

LookoutDesign system & library

Omnicell: Figma libraryMigration and ongoing library management

Obvious: MVPApp design

Obvious: wireframesWireframe design

Omnicell: Sketch libraryDesign library, components, & responsive design

Starsky RoboticsDesigning a remote driving system for autonomous trucking

Omnicell kiosksDevelopment & design

Disney Movies AnywhereDesign & development

Star Wars APIDesign & development exercise

Fitness goals appDesign Exercise

DayframeDesign & development

HD WidgetsDesign & development

App StatsDesign & development

CloudskipperDesign & development

Flash / FlexDesign & development

Elemental DesignRave flyers

View