— Shared site for patients and doctors.

Background

In 2017, MAVYRET* was released in the market and as part of the product launch, the agency got to create their website to extend their new campaign touchpoints and reach the right target audiences.

After recently having joined the UX team at Publicis LifeBrand Medicus, I had the opportunity lead the design behind the agency's first truly shared website between patients and doctors.

*MAVYRET is prescription medicine used to treat adults with chronic (lasting a long time) hepatitis C virus.

Visit live website →

Research & User Experience

When I joined the team, a big bulk of the research had already taken place as far as collecting data regarding the main target audiences and development of user personas.

The team had also previously conducted a mental model workshop with the gathered information and I helped organize the outcome into a visual tree.

Wireframes

As a starting point, I decided to use the wireframes for MAVYRET's landing page I created earlier in the project. Some of the type scale was already defined, and basic components like buttons and text fields had been created.

Extend the Library

It made sense extending these styles and components, which would later be shaped into the final design.

Initial Approach

I set two main goals for the early iterations:

• Visual
  Integrate the campaign landscape vistas used in other by the brand in other materials

• Experience
  Serve content for patients and doctors in a clear and seamlessly way through one main website

I explored multiple concepts that showcased large imagery and allowed for content discoverability of the right user audience. To help get ideas across the team I created small motion prototypes.

Collaboration & Iterations

I worked alongside one more UX Designer to create wireframes for all pages. By constantly iterating we defined templates and content blocks layouts that were shared by both sites.

Note: All wireframes were created in Sketch and shared via InVision for feedback.

Page Templates

We ended up with three main templates that allowed for further customization of content sections and its components. We also wanted to pull through the off-grid layout style across all internal pages.

Interaction Design

MAVYRET allowed me to think through the user experience that a visitor encounters end-to-end. I drove most of the interactive concepting, created clickable wires to share the vision and content strategy.

Optimizing Patient Sign-Up Form

On the consumer side of the site, the most valuable action was to get potential patients to request for more information and register for a cost coverage card. By going through a few rounds of prototypes with the client stakeholders and their legal team, we are able to combine both flows into one form and optimize the experience.

The Streamlined Flow

Users will have the option to, combined with the sign up form, register to receive a coverage card via email.

In addition to that, users may also want to receive a brochure via mail, which requires additional fields to be filled.

Patient Journey Interactive Tool

One of the ideas for using content in interactive ways, was to build a treatment journey tool.

Searching for Efficacy Information

We also wanted to capture the user flow for a doctor coming to the site looking for information related to the drug efficacy.

Design

I wrapped up the process by creating prototypes for the small pieces on the site, and then incorporated it all, from responsive flow to brand considerations to motion elements, into a robust design system.

In the style guide, every component was thoroughly annotated as far as padding, color and text styles. Videos for motion guidance were also provided to the developers alongside the documentation as reference.

View full style guide →

View motion guidance videos →

Contextual crosslinks components were place next to relevant content to facilitate and ensure users would find what they were looking for no matter which part of the site the came from.