Delivering a design system for a global pharma brand

NueVax vaccine supplier / B2B eCommerce website

NueVax is currently the largest vaccine manufacturer in the world, generating over $2B of revenue annually thru their ecommerce website. They've controlled the global vaccine revenue market for decades, but in the last ten years, its been a different story. Digital business transformation has enabled competitors to close the gap by delivering new value streams to their customers. Businesses now have access to a sea of customer data and NueVax must leverage theirs to create a best-in-class customer experience.

Also during this span of about ten years, NueVax identified a shift in their customer's mindset. The majority of their customers are healthcare providers. They are slowly adapting to the new Value-based healthcare delivery model. Providers are being incentivized and measured against their patient's health outcomes. They are now more concerned with immunization rates, sustained vaccine inventory, cost, and more personalized service from their vaccine provider.

In 2018, NueVax's customer strategy was rewritten to include the enhancement of their customer digital touchpoints. The first intitiative was to transition the ecommerce business to a new platform. The existing platform is a fifteen year old homegrown application – a system that would be unable to host advanced digital tools and features. NueVax hired a development partner to build the new system and myself to redesign the user experience and create a custom UI design system that would eventually scale across all their brand properties.

Product Vision & MVP

The engagement started with a collaborative workshop, bringing together the business, design and development teams. The intent was to involve key stakeholders and give them an opportunity to shape the future product experience together.

We conducted activities to identify short-term, long-term goals, customer pain points and a new vision statement. The vision statement represents a unified purpose for the entire organization, meant to be a guide for product teams moving forward.

During the weeks following the workshop, the team synthesized all the learnings and put together a design delivery plan. Our goal was to design a new baseline experience for the website and launch it in 12 months. We started with an analysis of the existing user experience. From this, we generated insights that became the new UX and UI design principles. These principlese are creative guardrails that are tied to the customer strategy.

UI Design Principles

Less clutter is more inviting

A user's perception of content that's cluttered and drab can be negative. Simplicity and aesthetic pleasure as features tend to foster more positive attitudes. Utilize effective white space, color and text styling to guide, satisfy and impress users throughout their journey.

References: John Maeda's Laws of Simplicity, Laws of UX

Less complexity is more actionable

Including functionality in more places does not necessarily translate to better usability. We want to balance necessary complexity (and avoid cognitive load), so we can ultimately provide customers everything they need to move quickly through the ordering experience.

References: John Maeda's Laws of Simplicity

Less color is more direct

Use color purposefully and sparingly. We've defined a color system to serve both functional and marketing content types. The goal of the color system is to be flexible enough to provide the business with content styling options that maintains a clear visual hierarchy for every possible scenario.

Designing the eCommerce Experience

The NueVax.com experience is highly complex in both scope and scalability. The new experience needs to be flexible enough to accommodate the needs of large, multi-tiered healthcare systems and smaller independant medical practices. Within these segments, there are several levels of user types with different roles and privileges.

Customer behavior on the website is almost strickly transactional. The site is used, first and foremost, to purchase vaccine products. However, it does also provide account management, invoicing, order shipment tracking, and access to patient educational resources.

Typical behavioral cycle for a customer ordering influenza vaccines.

UX Goals and Metrics

The majority of the users who are ordering vaccines aren't interested in browsing and spending any more time on the website than they need to. Ordering vaccines for them is just another task they need to fit into their busy office schedule.

This insight indentified a real customer challenge that we turned into UX goals for the phase 1 redesign.

Site Performance

Reduce loading time across the board – This is a big pain point for customers.

We worked with the development team to reduce the current avg. page load time from 3s to 1.5s.

Usability Performance

Reduce the number of steps to complete the order checkout flow.

We reduced the number of clicks to complete the order checkout process from 10 to 6.

Design Phase

The design phase kicked off with 6 weeks of daily requirements gathering sessions to hear from the business stakeholders and technology teams as they demonstrated current state functionality and discussed what was to remain in the new MVP. Our strategist then translated requirements into user story tasks for the design teams to work from. User stories were grouped into Epics and assigned across multiple UX and UI design team pairs.

We adopted a modified agile/SCRUM delivery model that estimated our entire design phase lasting about 15 (2-week) design sprints with usability testing and feedback implementation planned in between each sprint. We met with the Product Owner daily to demo and receive feedback on all our work-in-progress.

After a Sprint, we ran usability tests with actual customers to get feedback.

Fast-forward 6 months later, we completed the design for the MVP relaunch date. Considering the complexity of the business rules and the wide scope of the entire sitemap, the design team was proud to deliver an end-to-end user experience in this timeframe.

Our atomic UI architecture is what enabled us to do so.

UI Architecture

Defining "how" the user interface is designed, built and maintained is a crucial step that needs to be clearly defined and understood upfront, amongst all team members. Why? Because if design and dev teams aren't aligned on the methodology, the designs and code will not be compatible and communication between domains will breakdown and mistakes will continue to be made. We ran into this issue early on as a team.

What we realized is our design team thinks of the UI experience as reusable, modular components - but our dev team thinks and builds from static page layouts. Our architectures are fundamentally different.

We’re not just designing pages anymore, it's terribly inefficient and not scalable. Instead, we’re designing, building and maintaining a system of reusable components.

This UI architecture is referred to as Atomic Design. The structure of the UI is broken down into its smallest parts, which are combined and built-up into larger parts we call components. Components are modular units that are combined into page layouts. Lego is a really great analogy for atomic design. UIs are essentially modular building blocks that can be combined in different ways.

Image adapted from "Atomic Design" by @brad_frost and "Multiscreen UX Design" by @wolframnagel.

It's a powerful model that we decided to adopt for NueVax for a number of reasons. For one, it addresses the long-term tech debt issue that they've dealt with. We can't eliminate 100% debt over time, but we can get pretty close if we keep up with the maintenance of the atomic component system. The business benefits financially from long-term cost $avings of not having to redo everything in the near future.

Other benefits:

Modularity

Atomic design is inherently modular, which is a property that naturally enables UI consistency across all device sizes.

Reusability

Reusable UX/UI patterns simplify the user experience, resulting in faster learnability for the users.

Acceleration

Design and development production velocity increases over time.

We estimated an average +25% increase in production velocity once we applied our design system to net new UX designs.

The big challenge for the design team was to apply our atomic system thinking to NueVax.com's 15 year old interface. Multiple business teams had gotten use to editing the website content themselves, without adhering to any styleguide standards, resulting in a confusing user experience.

Image of a vaccine product listing from the original website. You'll notice the many different font styles, icon badges, and call-to-actions being used. There is no clear hierarchy of information, which leaves the user unable to focus on anything.

We took a step back and decided to run a proper interface inventory audit, which helped us look at all the existing UI from a bird's eye view and reorganize it. We were able to boil everything down to a new core set of UI elements that would become the building blocks for all our components and page designs.

Shaping the Design System

Our UI architecture is the core of the design system, but there's alot more around it.

NueVax's design system also includes guidelines for the UX patterns, art direction, copywriting, accessibility compliance, marketing templates, etc.

It is essentially a library of guiding principles, visual standards and shared language. Its purpose is to communicate a coherent story of how to design consistently great product experiences for customers.

At the beginning of the project, the team decided I would be the sole manager of the design system. Throughout the design process, I collected feedback from the design teams (almost daily), as they were iterating on component designs. We eventually scheduled weekly meetings for all the contributors to review system requests for additions/changes.

In 2019, about 9 months after we began the definition process, we published our first version of the design system.

Since then, we've scaled the design system across another brand property, ProtoVax. They both share the same ecommerce function but their customer types are different. In other words, both brands share UX/UI patterns but have their own brand styles and content guidelines.

What's next

Now that NeuVax and ProtoVax have a new baseline UX experience, it's time for them to expand their product team capabilities so that they can continuosly learn, iterate and optimize the UX via customer data analysis.

Learnings & Takeaways for Design Teams

Our design system requires a fully-dedicated staff

Throughout the design process I was the solitary owner of the design team's UI library. I had two roles on the team — product designer and design system owner. After v1 was published, I struggled to continually commit UI revisions and documentation.

A dedicated UI design lead and UI developer lead partnership must be established to manage the two UI systems. This requires a bigger investment from the business, but the benefits are two-fold. The customer benefits by getting a more satisfying user experience over-time b/c the production teams can now build and deploy better UIs, faster.

The business benefits by saving thousands of dollars in long-term IT maintenance costs.

Global teams kills collaboration

Design teams can't really collaborate when we operating on an 8-hr timezone difference. It actually prevents us from having conversations. As a result, our designers have had to over explain design decisions in written form. These documents are handed off to the development team who then have to read and attempt to interpret everything correctly. A lot of mistakes were made.

We think we can be more successful if our teams are more collaborative, separated by no more than a 3-hr time difference.

Here's a diagram of our newly proposed design team model:

Minimum Viable Artifact

Our designers are spending way too much time in design programs, prepping final, pixel-perfect comps before development starts. Keeping up with changes in our design programs is a nightmare and a waste of time. Our design renderings are not the final thing that the customers will interact with. The code is the source of truth and the earlier designers can get out of their tools and into the browser with the front-end devs, the better. We should be enabling teams to be more collaborative so we can agree to create "the quickest thing that needs to be created in order to convey the right thing to the right people at the right time...sometimes it's a full-page mockup, sometimes it's a napkin sketch."

Confluence became a cricital onboarding tool for our internal teams

In early 2020, we found ourselves in a transition period. We had team members rolling off and new ones coming on. At the time, all our working files were spread out across 5 different platforms. We needed a hub to collect everything that made it easy for anyone to quickly find what they need. Confluence as a product team wiki allowed us to quickly onboard team members.