Atomic Design: Creating an Internal Design System For Publicis

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Overview

Company
Publicis (Heartbeat)
Client
Bristol Myers Schwib
Date & Project Length
Role
UX Lead
Tools
Framework

Bristol Myers Squibb Sales Reps had a problem with presenting data to doctors. The story goes like this:

"I'm a Bristol Myers Squibb sales associate going to meet with a doctor. I have 1-3 minutes to chat with a Dr about a new drug. To aid the conversation, I have this app, which is like a mix between a powerpoint and website, it's called an IVA. It has many different presentations in it. But they are very complex and all work differently, so I don't know how to navigate it. So I don't use it."

I was contracted by Heartbeat Publicis as a UX Lead to eliminate these frictions, creating an outcome of higher sales rates.

We decided that creating an atomic design framework to aid IVA (Interactive Visual Aids) development of “Future State IVAs”  based on pitchwork for their client Bristol-Myers Squibb. To create the best framework, I worked with copy, visual design, development, and additional UX designers to achieve a scalable, clean system, alleviating the following pain points and create a unified system for their wireframes.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Discovery

I started by doing an UI audit of all the current IVAs, identifying all components, starting Molecules and ending with Templates.

What I found was that there was a lack of consistency across their branded product. Some of the problems include:


  1. 9 different navigation patterns
  2. 31 different buttons
  3. 13 different blocks,(10 styles of bullets & 3 Paragraph styles)

From This point I turned to the pitchwork and did a compare analysis.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Ideation

Before building out the Atomic Design system for the future state project, I worked with copy to challenge how the future state designs function at the content level using an existing IVA.


We validated the functionality of the designs, and disproved 2 features from the pitchfork. These 2 features were deep dive and more information content overlays.

Type image caption here (optional)

From there, I build out the components by creating wires based on the content workshop, and my identified components.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Prototyping

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Testing

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Final Product