Project Background

Dovato is a groundbreaking new treatment for HIV that became the first FDA-approved regimen for HIV-infected adults who have never received treatment for HIV.

As part of the agency team responsible for designing the Dovato site, I was tasked with designing new pages to explain the drug’s mechanism of action and benefits.

The live link of the new designs can be found at, www.dovatohcp.com, though the website owners reserve the right to update it any time.

Design Principles

When I started with the project, the information was disorganized and the content was too technical and hard to consume. Through research, information architecture and a lot of iterations, I introduced a new site that was easier to navigate and understand.

Design Process

The design process I used was an inverted funnel: starting wide from competitive research, developing personas, then distilling designs into wireframes and finally high fidelity visuals.

Essential context

DOVATO is the only HIV medicine with just 2 medicines in 1 pill that delivers powerful results* for people who are new to treatment and those who are replacing their current regimen.

As we already know the very specific user 

Competitive Analysis

In order to help DOVATO to be more successful, I started with a competitive analysis. Studying the similar products in the same industry can help me understand the battlefield, help identify where the focus points should be and how others are approaching the business. It also helps us discover strategic areas where we can position ourself for a “win”.

SITE NAME: ACTIVASE

USEAGE: Acute ischemic stroke

SITE NAME: NUCALA

USEAGE: Asthma

SITE NAME: BIKTARVY

USEAGE: HIV

What’s the insight/main takeaways from having done this exercise?

(chart)

After studied multiple drug site, I found a few similar problems:

Brainstorm

In order to search for the most effective solutions, we then started with brainstorming. To expand our ideas in all directions, using out-of-the-box and lateral thinking in a free-thinking environment, thereby broadening the solution space.

Personas

I developed two provisional personas - doctors and patients - to help guide the creation of medical content that’s easy to consume.

Primary persona: doctors, engage them in a way that makes them understand info quickly

Secondary persona: patients, help them understand at high level, provides way to talk about it with their doctors

Sitemap

In order to establish an organized and incorporated site, I made a sitemap to help define a clear vision for the contents’ structure.

Written documents from the doctors. Groupings and clusters.

Wireframe

I did several iterations of wireframes with the client, focusing on these design elements:

• Information displayed

• How different modules, buttons, etc. are placed

• Rules for showing different information

• How different scenarios affect the display

Click left and right to see the whole document below

High fidelity design and interactive content

One of the challenges for this product is organizing the massive amount of content. I approached the design by breaking content down into modules. For example I introduced a progress indicator so users can consume the content in chunks and know where they are at all times. I also defined interactive states like when to use drawers (expand and collapse) to contain information.

Progress View Indication
This Indicates the user’s progress in the respective module.
The progress will be stored locally with the user’s browser so they don’t have to finish the whole experience at one time.
When users return to the home page, they can see their progress.

Begin Chapter
User selects to start the module.
What is more attractive to the users: a formal instruction or a game, I decided to make the process into a point-collecting game.

Chapter Selection
Users can select a chapter they have visited prior or select to go to that chapter page here. Alway letting you know where are you at, and how many did you score

Expandable Content
Using the popup button to allow the user select the popup for more information.

Quiz
I designed the multiple-choice quiz so users get immediate feedback on whether their answer is correct or not. Once they select an answer, the ‘NEXT CHAPTER’ button will be unlocked for the user to progress to the next section.

Reflections 

What would I change?

• One of the accomplishments was working at a facepast with a team of designers and product manager to launch the live www.dovatohcp.com site on time.

• It was a personal learning experience in working on design and content for the pharmaceutical industry, which comes with its own constraints like legal language and dense medical information.

• I enjoyed transforming technical information into easier-to-digest chunks for both the medical audience (doctors) and their end users (patients).