CVS Health

Redesigning a pharmacy app to address user needs

Creating an efficient user interface, by focusing on information hierarchy.

About CVS Health (The Project?)

Staples Promotional Products offers custom printing on promotional products. They carry a large selection of products with fast turnarounds and low minimums.

The Challenge

The goal was to streamline the user experience, enabling users to achieve their goals with minimal effort and friction.

My Role

I was responsible for the User Experience (UX) and User Interface (UI) Design.

I Created/Designed

User Flow
Wireframe
Research Questions
Interaction Design
User Interface Design
Visual Design

The Team???

Director of UX / Director of Digital Product Management / Product Manager / Art Director

Design Process

Empathize

Focus Groups

Define

The Goal

Ideate

User Flow
Wireframe + Information Hierarchy

Wireframe

Usability Testing with Users
Validate + Iterate

Design

User Interface
Interaction
Visual

Original Application

The original application was inefficient. The most important information was difficult to access, requiring multiple steps. Information was redundant, increasing cognitive load. And related information was separated, leading to friction. Based on user needs, content was reprioritized and reorganized.

Screen #1 - Inventory Information

???The primary navigation should be easily accessible. Similar content should be consolidated. And unnecessary content should be removed.

User research identified often searched content (the most important content).

Value props were removed because they increased cognitive effort without improving navigation.
The primary navigation was pulled out of a mega menu. From a glance, without clicking or hovering over any elements, users are able to easily determine the products and services that are offered.
One of the primary goals is to help users find products, especially those that don’t know what they’re looking for. The “Get ideas” link was designed to be more visually prominent.
The chat, phone, and help link provided similar content and was consolidated into a “Contact Us” link.

Screen #2 - Clinical

???Feedback from stakeholders were used to iterate wireframes and create high fidelity designs.

Team wanted to move forward with a mega menu. “Products” was changed to “Shop” to align with Staples.com. Since “Shop” was the primary navigation, it was moved from center to left align for easier discovery.
In a mega menu, it’s intuitive to read from top to bottom, and then left to right. Links were reorganized to reflect this reading pattern.
Due to the high volume of calls that are received, it was determined that the phone number was more important than the chat and help links. The phone number was retained, while the chat and help links were moved to the footer.

Screen #3 - Product Messages

???Feedback from stakeholders were used to iterate wireframes and create high fidelity designs.

Team wanted to move forward with a mega menu. “Products” was changed to “Shop” to align with Staples.com. Since “Shop” was the primary navigation, it was moved from center to left align for easier discovery.
In a mega menu, it’s intuitive to read from top to bottom, and then left to right. Links were reorganized to reflect this reading pattern.
Due to the high volume of calls that are received, it was determined that the phone number was more important than the chat and help links. The phone number was retained, while the chat and help links were moved to the footer.

Screen #4 - Pill Image

???Feedback from stakeholders were used to iterate wireframes and create high fidelity designs.

Team wanted to move forward with a mega menu. “Products” was changed to “Shop” to align with Staples.com. Since “Shop” was the primary navigation, it was moved from center to left align for easier discovery.
In a mega menu, it’s intuitive to read from top to bottom, and then left to right. Links were reorganized to reflect this reading pattern.
Due to the high volume of calls that are received, it was determined that the phone number was more important than the chat and help links. The phone number was retained, while the chat and help links were moved to the footer.

Conclusion

The original design was complicated and ambiguous. The goal was to provide suitable content with visual hierarchy, to help users narrow down their search and guide them through the appropriate user journey.