Designer
popsicle.jpg

POPsicle Design System

"POP"-sicle Design System

POPsicle is a temporary design system for athenahealth's Population Health tool to unify patterns between "POP" Health and other athenahealth products. 

Role: Visual design and front-end development with another designer and developer
Timeframe: Jan. to July 2017


The Problem

When a product is acquired and teams work remotely designs and implementation doesn’t always match up. I saw the impact of those two challenges when I joined Population Health in May of 2016. These inconsistencies really bothered me so throughout 2016 I began working on a style guide and front-end components on the side.

An Interim Solution

Starting at the end of 2016, I started working with another designer and developer to establish POPsicle, athenahealth’s Population Health design system. It was made to lay on top of the products current Boostrap framework and styling. The visual design mostly matches Streamlined, athenahealth’s design components implemented for 2014 - 2017 and serves as an interim solution as athena transitions to its newest design system.

POPsicle-buttons.png

Developers on Population Health can work with their designers to reference one of the POPsicle components for new workflows instead of adjusting styling component by component to achieve the intended styling of designer’s mockups. Each component starts with “pop-” so it doesn’t compete with other LESS styles.

Having a confined design system gave the us the flexibility to make changes to patterns to test usability concerns easily. The toggle buttons were a very small visual change compared to the toggle in athenanet.

Lessons Learned

Design systems for existing products are hard

Updating existing inconsistencies across a product takes a lot of time. We approached updates with minimal disruption to scrum work. If a workflow was having a new element added we encouraged some UI cleanup to address design debt. It’s was a slow process.

Changes in production look different than in staging

Much of the front-end code in production uses a lot of inline styles or weirdly nested components. This made getting components to look exactly how expected very difficult in production.

Getting the word out is a grassroots effort

This design system worked well for my scrum team and other scrum teams with designers that had awareness of POPsicle. However, adoption was limited across the product because each team didn’t have a champion.