AbbVie

Desktop & Mobile Web App for Patients & Healthcare Professionals

Background

AbbVie is the second largest pharmaceutical research and development company in the world. Their medical information portal is a digital tool that provides resources surrounding AbbVie's medical products to patients and healthcare professionals.

AbbVie brought me on as the lead product designer for two separate engagements to explore and implement new features for this tool and make improvements to existing features.

Success

Positive user feedback
Increase in traffic & time spent using tool
Decrease in inquiries via other channels

Project Goals

Create a more useful tool to foster a better relationship with users
Reduce inquiries received via other communication channels
Increase feature parity with competitors
Improve mobile responsiveness site-wide

My Roles

Research: Interviews & competitive analysis
Low-fidelity Exploration: Presented multiple explorations for all features
High-fidelity Prototypes: Delivered high-fidelity interactive prototypes using Figma
Supported Engineers: Worked closely with engineers to deliver final product

Team Structure

I was the lead product designer working in a pod with front- and back-end engineers, a business analyst, and a product manager.

Timeline

Five months

Examining the Problem

One feature AbbVie was originally looking to improve was an existing "digital assistant". Due to increased mobile traffic, they wanted to create a mobile version of this feature (it only worked on desktop).

Here is the original desktop home page with the digital assistant in the bottom-right corner:

Observations

Usually, a feature in the bottom right corner of your screen that answers your questions is a chat system that you can have a conversation with, but that wasn't the case here.
Rather than a chat system, this appeared to me as some sort of secondary navigation.
AbbVie was attempting to fit a lot of functionality into this physically constrained experience.

My Questions for AbbVie

What was the original intent of this feature?

Note

I often ask folks this question to focus their thoughts on the actual problems at hand, not an existing solution they feel tied to.
Is there any intention to make it more of a chat feature?
Why would a secondary navigation, separate from the main navigation bar, be necessary?

Learnings

Usually, a feature in the bottom right corner of your screen that answers your questions is a chat system that you can have a conversation with, but that wasn't the case here.
Rather than a chat system, this appeared to me as some sort of secondary navigation.
AbbVie was attempting to fit a lot of functionality into this physically constrained experience.

New Solutions

AbbVie and I ultimately came to the agreement that enhancing their digital assistant was not the best way to move forward. Instead, I brought forward several more promising opportunities to work on:

Improved main navigation
New Products page
New Home page with most-used resources
New Site Feedbackpage

Challenges

Feature discoverability
Difficult to distinguish navigation bar from rest of page
Difficult to know which tab is selected

Solutions

Added important new functionality (Products, Resources, About Us)
Added drop shadow to increase separation between navigation and content
Increased contrast for selected navigation item
Friendlier language like “Ask Us a Question”
Reduced logo size for better visual balance

Challenges

Providing multiple ways for patients to search or browse products
Desktop tables didn't translate well to mobile so new mobile design was needed to display documentation

Solutions

Ability to search and browse entire catalogue by brand name and generic name
Quick jump on desktop provides a helpful way to browse a long list of items
Ability to view general docs for each product and search for more specific documentation
Responsive card view on mobile for documentation

Challenges

The old home page was just duplicating functionality other parts of the site: Submit Inquiry & Search
How do we provide more value to the patient for this page?

Solutions

The new home page directs patients to useful resources, both internal and external
Submit Inquiry: This feature was renamed “Ask Us a Question” and kept as its own tab
Search: This feature was rolled into the new Products tab, since the search functionality was tailored to products specifically

Challenges

AbbVie was previously collecting feedback through a 3rd party service:

Users had to travel to another website just to give feedback
AbbVie was having trouble collecting the feedback through this 3rd party system

Solutions

The new feedback system is a custom front- and back-end solution built directly into the website

Easier for patients to give feedback
Easier for AbbVie to receive and organize that feedback

Final Thoughts

I worked on this project at an interesting time in its development. It was no longer new and it was starting to mature. We had valuable feedback from patients that we were able to use to aid our decisions. This is a great place to be because you're not starting from scratch and you have an idea from users on what needs to be improved.

I was fortunate to be able to design a lot of improvements and new features. AbbVie was receptive to our ideas and our team worked quickly to implement them.

Daniel Crespo

AbbVie

Background

Success

Project Goals

My Roles

Team Structure

Timeline

Examining the Problem

Re-examining the Problem

Observations

My Questions for AbbVie

Learnings

New Solutions

Main Navigation

Challenges

Solutions

Product Catalogue

Challenges

Solutions

Home Page

Challenges

Solutions

Site Feedback

Challenges

Solutions

Final Thoughts