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

Uncovered User Pain Points

• The product image was frequently needed, but because it was buried on the fourth screen, users had to bypass the first three every time.

• Screen 3 was seldomly used. It was an unnecessary hurdle to the more frequently accessed fourth screen.

• Users identified “Cash Price” visibility would be beneficial.

• Ambiguous terminology led to user confusion.

Identified UX/UI Friction

• The lack of visual hierarchy required excessive cognitive effort.

• Related content was not positioned in close proximity.

• Redundant information increased cognitive load.

• Irrelevant data contributed to information overload.

New Solution

Single-Screen Design

Four screens were consolidated into one, reducing cognitive load and increasing efficiency.

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design eliminated navigation friction and improved discoverability. Information was instantly accessible resulting in a faster experience.

The following design decisions optimized the user experience:

• The simplified single screen design, improved discoverability and resolved several user pain points.

• Essential information was moved to the top of the screen to ensure immediate accessibility.

• Added navigation links for “All NDCs” and “In-Stock Stores Nearby” to help users conveniently resolve inventory issues without having to leave the page.

• Bottom navigations were repositioned near related content for efficiency.

• Collaborated with the business team to refine and finalize terminology to resolve user confusion.

• Added “Cash Price” with the ability to conveniently calculate total cost based on inputted quantity.

• Redundant “drug information” and “product messages” were eliminated to reduce cognitive load.

The Goal

• The product image was frequently needed, but because it was buried on the fourth screen, users had to bypass the first three every time.

• Screen 3 was seldomly used. It was an unnecessary hurdle to the more frequently accessed fourth screen.

• Users identified “Cash Price” visibility would be beneficial.

• Ambiguous terminology led to user confusion.

Creating a quick experience was the main priority.

Every decision, physical and digital, needed to support a fast, frictionless experience. The happy path needed to be effortless while taking into consideration the unhappy path, with issues.

The experience needed to require the less amount of effort.

Every decision, physical and digital, needed to support a fast, frictionless experience requiring the least amount of effort.

Done.

New Solution

Action-Driven Experience

Keyboard interactions slowed down users. The new experience was streamlined with AI and automation.

The original design required extensive movements and actions. Users were constantly switching between product handling and keyboard interactions. The new experience only required users to interact with the product. Automating keyboard interactions resulted in a more efficient experience.

Done.

The original design required extensive movements and actions. Users were constantly switching between product handling and keyboard interactions. The new experience only required users to interact with the product. Keyboard interactions were automated resulting in a more efficiently experience.

Determining goals through user research

• Determined essential vs optional information to prioritize content appropriately. Some information was required to reviewing while others were extra. It was important to distinguish. It was important to distinguish between the two to create a more efficient experience. Determining must-need vs additional information. Through user research, determine essential and optional information to prioritize content appropriately

• Users frequently needed to enlarge the captured image, optimizing this action was a high priority. Users frequently needed to enlarge the captured image, making this an important action. Enlarging the captured image was important and often needed. Ensured necessary info was easily accessible (enlarging image with one keystroke).

• The screen lacked instructions, making it difficult for new users. Difficult for need colleagues to learn (no clear instructions)

• The lack of visual hierarchy, forced users to focus across multiple areas of the screen, creating visual fatigue and increasing completion time. The lack of visual hierarchy, forced the user's eyes to jump across multiple areas of the screen, creating visual fatigue and increasing completion time. Problem: Needed to look at too many different places. Eyes need to focus/look everywhere

• Recognizing that different use cases required distinct information, a comprehensive design was necessary. Empathized with the varying use cases to create. Understood different use cases may require slightly different information. Created a design that encompasses all. That worked for everything. "Recognizing that different use cases require distinct information, I created a single, comprehensive design that successfully accommodates them all.

• Ensuring worst case scenarios were accounted for and not an afterthought. Kept in mind worst case scenarios with long notifications

• Done

• Leverage proximity for efficiency.

• Used visual hierarchy to create focus

• Optimized happy path while improving unhappy path

• Working within constraints

• Ensuring layout supports ease of use. Reducing scanning, visual search

• Recognizing that different use cases require distinct information, I created a single, comprehensive design that successfully accommodates them all.

New Solution

Product Verification

Information requiring mandatory review was centralized, reducing cognitive load and accelerating task completion.

Done

All information that must be reviewed were grouped together. So the user did not need to scan the entire page.

All information that must be reviewed were grouped together. The user no longer needed to process unnecessary information to complete the primary task.

All information that must be reviewed were grouped together, increasing completion speed and reducing cognitive load.

All information that must be reviewed were grouped together, resulting in a faster task completion.

By Centralizing essential information, the completion task was accelerated.

resulting in an accelerated task completion.

resulting in a faster task completion.

Information requiring mandatory review was centralized, resulting in a faster task completion.

Pharmacists spend as little as 5 seconds on this screen. Strong visual hierarchy ensured the primary task was quickly completed.

Pharmacist spend as little as 5 seconds on this page. Visual hierarchy is pertinent. Maintaining speed was important. Wanted to create an efficient layout to support the user.

Pharmacist spend as little as 5 seconds on this page. Visual hierarchy was essential in guiding the users focus to quickly complete the primary task.

Pharmacist spend as little as 5 seconds on this page. Strong visual hierarchy helped guide the user to quickly complete the primary task.

The original screen lacked focus, requiring users to scan the entire page to find necessary information. By establishing a strong visual hierarchy, visual search was reduced and the primary task was quickly completed.

Done

All information that must be reviewed were grouped together. So the user did not need to scan the entire page. Efficiency

The following design decisions optimized the user experience:

• Didn’t want scrolling

• Least amount of interaction required. Reduced required interactions.

• Reduced thinking. Didn’t want technicians to do math.

• Easily pivot if there was an issue.

• Important information was upfront and centered (currently hidden in the side)

• Automation

The Goal

• The product image was frequently needed, but because it was buried on the fourth screen, users had to bypass the first three every time.

• Screen 3 was seldomly used. It was an unnecessary hurdle to the more frequently accessed fourth screen.

• Users identified “Cash Price” visibility would be beneficial.

• Ambiguous terminology led to user confusion.

A versatile design was created to increase efficiency and reduce maintenance efforts. Done

Creating a versatile design was the main priority.

A versatile design was created to reduce development and maintenance efforts.

Recognizing that different use cases required distinct information, a flexible design was needed for a comprehensive solution.

Done.

Recognizing that different use cases required distinct information, a flexible and comprehensive design was necessary. The final design maintained an 80% baseline consistency with a 20% variance to accommodate the different use cases. A more efficient experience for the user and less effort for the engineers.

To create one unified experience that could accommodate the many use cases.

"Designed a versatile, all-in-one solution that seamlessly accommodates the unique information needs of various use cases."

To reduce development effort.

New Solution

Unifying Multiple Return to Stock Use Cases

One versatile design was created for three different use cases, providing a consistent and familiar experience.

Done.

One versatile design was created for three different use cases, providing a consistent and familiar experience, significantly reducing cognitive load.

Took all the flows and created a design that was suitable for everything with a slight variation in content when needed.

3 entry points were unified into one with slight variations. There’s 4 with maintenance. But need to create RxConnect screen.

3 flows were unified into one with slight variations, providing consistency and ease-of-use. Familiarity. Quicker learn curve. Faster.

One design was created for four different flows, providing consistency and quick learnability.

One design was created for four different flows, providing a consistent and familiar experience, significantly reducing cognitive load.

Don’t have to learn new behaviors. Familiar, predictable interfaces. Easier navigation. increases task completion speed

The original user flow was inconsistent and complicated. The new design maintained an 80% baseline consistency with a 20% variance to accommodate the different use cases while reducing development effort.

Done.

The following design decisions optimized the user experience:

• Didn’t want scrolling

• Least amount of interaction required. Reduced required interactions.

• Reduced thinking. Didn’t want technicians to do math.

• Easily pivot if there was an issue.

• Important information was upfront and centered (currently hidden in the side)

• Automation

USER RESEARCH

Uncovered User Pain Points

• Information was difficult to access. Because screen 3 was rarely used, it was a pain point for users to skip over this screen to get to the next screen, which is often used

• User needed to skip 3 screens to get to this screen #4

• Wanted information that was not available.

• Confusing verbiage

• Screen 3 was rarely used

• most used information was not prioritized

UX/UI AUDIT

Identified UX/UI Friction

• Redundant information

• Things were not organized together

• Related information was not positioned in close proximity

• Some info was unnecessary and confusing

• No visual hierarachy

• Did not know what to prioritize

EXPLORED

UX Opportunities

• Create visual hierarchy based on user needs

• Simplify the user flow

• Clarify verbiage and content

• Eliminate unnecessary information

• Reduce cognitive load

• Create efficiency

SOLUTION

Four screens were consolidated into one, reducing cognitive load and increasing efficiency.

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design eliminated navigation friction and improved discoverability. Information was instantly accessible resulting in a faster experience.

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design reduced user effort and improved discoverability.

NEW DESIGN

Four screens were consolidated into one, reducing cognitive load and increasing efficiency.

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design eliminated navigation friction and improved discoverability. Information was instantly accessible resulting in a faster experience.

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design reduced user effort and improved discoverability.

NEW DESIGN

4 screens were consolidated into 1

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design eliminated navigation friction and improved discoverability. Information was instantly accessible resulting in a faster experience.

1. Value props were removed because they increased cognitive effort without improving navigation.

2. 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.

3. 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.

4. The chat, phone, and help link provided similar content and was consolidated into a “Contact Us” link.

Established Visual Hierarchy

The original design lacked visual hierarchy, creating a frustrating experience as users struggled to prioritize and find information. Through research, content was prioritized according to user needs. Related information was positioned in close proximity. Related information was grouped together.

Content and actions were stragtegically, structured in close proximity for ease of use.

New fuctionality was added to help users quickly resolve issues

1. 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.

2. 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.

3. 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.

Reduced Friction

Four screens were consolidated into one, reducing cognitive load and increasing efficiency.

The original flow was excessive, using four separate screens. The new flow was optimized, four screens were consolidated into one, reducing cognitive load and simplifying the experience.

Requiring four screens, the original flow was excessive. The new solution was optimized, four screens were consolidated into one, reducing cognitive load and simplifying the experience.

The original screens were excessive and confusing. The new design was optimized and simplified. Four screens were consolidated into one, reducing cognitive load and simplifying the experience.

The original screens were excessive and confusing. The new design was optimized and simplified. Four screens were consolidated into one, verbiage was clarified, and redundant information was eliminated.

The original screens were excessive and confusing. The new design was optimized and simplified. Four screens were consolidated into one, reducing cognitive load and increasing efficiency. Verbiage was refined and tested for clarity. And redundant information was eliminated.

1. 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.

2. 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.

3. 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.

Four screens were consolidated into one, reducing cognitive load and increasing efficiency.

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design eliminated navigation friction and improved discoverability. Information was instantly accessible resulting in a faster exp

The original user flow was inefficient, requiring users to navigate four separate screens to find information. The new single-screen design reduced user effort and improved discoverability.

1. 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.

2. 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.

3. 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.

Design Toolkit