CVS search widgets

CVS Search, right there when you need it.

With the support of my Product and Development partners, I designed and shipped a search widget, aligned to the future of CVS and native ecosystems.

I worked with another designer on this project, where I handled the android designs and they did iOS. We collaborated through out the design process, bouncing ideas off each other, and ensuring our experiences were consistent with both native practices and the goals of the CVS Search widget.

An image with two android phones. On the right, an android phone is on the widget gallery screen viewing the CVS search widget. on the left is an android devices home screen with a cvs search widget displayed

Project details

My role

UX designer

UI designer

A11y designer

Tools

Figma

Material 3

Human interface guidelines

Duration

1 sprint for design work

1 sprint for development work

Shipped in Q4 2023

The experience

An iphone in light mode, with 2 cvs search widgets on the home screen. one is the medium sized variant, one is the small variant.

The journey starts on the home page.

an iphone on the cvs search screen with nothing typed in yet, viewing trending searches in the suggestion area

Users are brought directly into search.

An iphone on the cvs search results screen, looking at product results for the search term "easter candy"

Results delivered faster.

Process overview

Discovery

Competitive Analysis

Reviewing HIG/M3

Syncing with Developers

Reviewing future state of internal design system

Ideation

Low fidelity mock ups

Review resizing with Devs

Align HIG/M3 mock ups

Finalize approach

Final touches

Worked with Design System team to support dark mode

Implemented variables and tokens

Reviewed high fidelity mock ups with leadership and stakeholders

Deliverables

Design Annotations

A11y Annotations

Content annotations

QA Testing

Different.. but the same?

An android device on the widget gallery screen, viewing the cvs search widget. the text reads out, search cvs, 3x1, quickly find products and services.

Android widget Gallery

An iphone on the widget gallery screen, with the CVS widget gallery being shown. text reads, search cvs. quickly find products and services.

iOS Widget Gallery (Medium Sized widget selected)

When designing native experiences, all too often I see designers using a one seize fits all approach. In the United States, where iOS is king, this usually means native experiences are built to iOS standards. Android users deserve better, and when you consider that many inexpensive phones come with android software, it becomes clear that designers need to familiarize themselves with Material 3.

Part of our ongoing app work is making inconsistent experiences consistent, via native components, updated design systems, and more resources dedicated to app work. This has proven to be a fantastic opportunity to educate stakeholders on platform differences, and get encourage folks to think beyond the UI. User flows have also been crucial to help illustrate how although these UI’s look very different, this is the same user journey. An experience will feel much more familiar to a user if its similar to first party apps, not similar to another operating systems version of the same app. In simple terms, we have encouraged seeing things from the users point of view, as opposed to writing features from a Business/Technical perspective.

Native widget overview

Widgets are essentially a hyper focused version of an app, usually restricted to one or very few functions. They typically don’t have interactions available within them, but rather serve as an entry point into a specific function of an app. Some widgets might be a simple search widget, or a bit more complex like Robinhood where a user can configure what list of stocks to show.

In this, android and iOS are the same. But the differences become apparent when you start adding and customizing widgets on your home screen.

an iphone on the widget gallery screen, viewing the small top charts apple music widget.the text reads play top charts based on a location or city of your choice.

iOS Small Widget

an iphone on the widget gallery screen, viewing the medium top charts apple music widget.the text reads play top charts based on a location or city of your choice.

iOS Medium Widget

an iphone on the widget gallery screen, viewing the large top charts apple music widget.the text reads play top charts based on a location or city of your choice.

iOS Large Widget

an android home screen, with the cvs widget selected, showing the widget in the 1x1 size variant.

Android 1x1 Widget

an android home screen, with the cvs widget selected, showing the widget in the 2x1 size variant.

Android 2x1 Widget

an android home screen, with the cvs widget selected, showing the widget in the 3x1 size variant.

Android 3x1 Widget

an android home screen, with the cvs widget selected, showing the widget in the 4x1 size variant.

Android 4x1 Widget

The problem statement

How might we enable our users to find their favorite health and wellness products faster and easier?

In many of the UXR studies i’ve been involved with at cvs, we hear the same thing over and over again. Users want to find items quickly and easily (go figure!). Search widgets was our Search Navigation teams first deliverable for our new assignment on the super app train. As a team, we came to the conclusion that a search widget would be a great and simple deliverable for us to support our users, and the super app initiative.

As the first team to deliver both widgets and deliverables for the newly formed Super App team, we had the opportunity to create the foundation for future CVS Widgets. Our work to determine dark mode versions of style tokens also created an opportunity to help our Design Systems and Enablement team with their ongoing dark mode work.

Dark mode support

An iphone in light mode, with 2 cvs search widgets on the home screen. one is the medium sized variant, one is the small variant.
an iphone home screen with two variants of the cvs search widget, in dark mode.
an android home screen with 3 variants of the cvs search widget, in light mode.
an android home screen with 3 variants of the cvs search widget, in dark mode.

Some highlights

Adoption rate was initially low, but growing over time, as much as 34% in one week.

About a month into its release, we saw about 300 people engaging with our search widgets, as well as leading users to conversion.

Search Widget is not only the first CVS Widget shipped, but also the first designs shipped that support dark mode in native devices.

Next steps

We are continuing to monitor engagement with search, as well as bounce rate, engagement with search suggestions, and conversion rate of users engaging with the search widget.

As for the overall search experience, we are continuing to make improvements to our native apps. Without getting into specifics, we plan on tapping into more native capabilities to create a powerful yet simple search experience for CVS customers, I’m excited to bring more empowerment to CVS users, and allow them to continue to pursue their health and happiness.