ROLE:

Senior UX Designer

CATEGORY:

Pharmaceutical, Consumer, Health

COMPANY:

Publicis Groupe/Saatchi & Saatchi Wellness

TIMEFRAME:

3 Months

ABOUT

Publicis Groupe/SSW has supported Abbvie brands for a decade for all Healthcare Professional (HCP) and Direct to Consumer (DTC) websites. This design system was made on Sketch and was the first to be utilized throughout various agencies that Publicis Groupe has acquired within the U.S. market.

TEAM & ROLES

1. discovery

When I first joined Publicis Groupe / SSW, Tiffany had a vision to essentially unify all of the design components and templates that the agency has been creating for Abbvie. I started the process with doing a few internal interviews with all of the designers that interacted with Abbvie brands and the verdict I discovered was the cross collaboration was little to none. One of the pain points that all UX and digital designers were facing was that there was not a clear guide or drag-and-drop ability to create the HCP/DTC websites in a seamless matter.

Traditionally, UX Designers would draft wireframes from scratch by providing grid columns, placeholder components, and the breakpoints. Then visual designers would design the UI, but it wouldn’t match the development because the designs were created outside of the grid columns.

The problem that we wanted to solve with this design system was to educate and guide designers on how to set up their design files in a consistent matter so that front-end development and delayed launches can be avoided.

A) PEOPLE PROBLEM

• UX and visual designers ran into roadblocks when UI creations were not matching development build.

B) HOW Did WE KNOW IT’S A PROBLEM?

• Multiple DTC and HCP websites were delayed for launch and it caused client frustration to potential loss of the client.

C) HOW DO WE KNOW IF WE’VE SOLVED IT?

• Tracking metrics on Microsoft Teams of number of comments, suggestions, and feedback on the usability of the design system. Number of development delays reduced.

2. design system RESEARCH

HOW DO OTHER ORGANIZATIONS ORGANIZE THEIR DESIGN SYSTEM FILE?

Started with exploring other design systems and audit how they documented their components. I went through how Material, Carbon, and Polaris displays their onboarding and as well as documentation.

From the audit, I was able to structure how I wanted the pages to be when a designer visits the Sketch file, but a few challenges came to mind after I wrapped my audit.

• How might we make sure the designer is able to access the components and templates?

• How might we be descriptive on setting up their breakpoints?

• How might we align with engineering on this?

documentation

WHAT CAN I DOCUMENT FROM ABBVIE IN ORDER TO CREATE THE COMPONENTS.

I analyzed what Abbvie had for their components in their private website and the biggest challenge I encountered was that the components were very difficult to spec properly. Additionally, the site was catered towards front-end developers on easily extracting the component through JS, CSS and HTML and embedding it on the site of whatever project they’re working on.

I received guidance from Mathias on how this site was originally used in the past and it allowed me to pitch a new process on how the handoff process would occur between UX designer to visual designer to developer if this design system was created. The main things were:

• Abbvie specific breakpoints (896px, 895px, and 600x) should be documented and spec’d according to columns.

• Traditional breakpoints (1440px, 768px, 375px) should be included as the foundation for UX designers to draft the layout.

• White label foundation for all components should be documented based on traditional breakpoints for easier development.

3. DESIGN and documentation

COMPILE THE INFORMATION

Based on the audits of other design system files, I structured the onboarding with how to set up their Sketch file to ensure that all of the designers set that foundation with regular breakpoints and Abbvie specific ones. Some of our visual designers have never interacted with Sketch before, so it was important for me to ensure the onboarding info was clear and straightforward.

After setting the onboarding foundation, I underwent a component building sprint on documenting every component that was on the Abbvie site to ensure that all the components would be accessible on Sketch. After 2 months of being the main Senior UX Designer on creating this design system from scratch, I was able to create up to 500+ components, 327 icons, and 8 templates at traditional breakpoints.

Along the way I was able to share with my other colleagues and engineering to align on specific components commonly used and updates with how the design system was going. Below are a few pages of what was included in the kit:

4. OUTCOME AND TAKEAWAYS

ALIGNMENT AND COLLABORATION ON A NEW LEVEL

I was happy to see the positive impact that the design system had for my team and as well as other designers within the Publicis Groupe network.

I set up the following metrics to see how the design system improved over time since it’s creation:

• 10 designers were able to launch 8 Abbvie websites by utilizing this
design system.

• 6 monthly requests/questions on Teams on revising or adding a new component.

Documentation became a new process for Saatchi & Saatchi Wellness and I was excited to see how much alignment and process has improved over time. If I were to revisit this task, I would have asked for more time or another supporting designer to collaborate on this project with me and carving time for usability testing amongst my other designers to see how they’re using the design system.

Below are a few HCP and DTC websites launched from the result of the design system.