Redesigning the over the counter health care services app for increased conversion with BJ Frogg's behaviors and triggers

Man at a desk in front of an iMac viewing CVS weekly ad online.

Date Completed

June, 2023

Overview

CVS provides health care plan based accounts for health and healthy foods goods. These (OTCHS) over the counter health care services accounts bring in an outsized amount of CVS revenue, however the web based experience is old and no native experience has been built.

At the request of my digital director, I took on the role of being the point person for OTCHS (Over-the-Counter Health Solutions). To ensure inclusivity and accessibility, I collaborated with an accessibility designer. Together, we reviewed the high-fidelity user interface designs created by CVS teams and subsequently adopted by a contracted external agency.

I spearheaded an initiative to gather and organize a comprehensive system map encompassing both web and native application screens and then designed a new flow with improved messaging for motivation and triggers. In this endeavor, I worked closely with external team designers and CVS product leads, urging them to contribute and collaborate in order to ensure the success of the project.

Feature requirements

  1. As part of our ongoing efforts to enhance the benefits of insurance plans, we are introducing a second account in OTCHS apps specifically dedicated to the purchase of healthy foods. It's important to note that the process of searching for products and making purchases for these two accounts is mutually exclusive. In other words, health foods cannot be purchased using funds allocated for Health products, and they will not be included in search results.
  2. To enhance the in-store shopping experience we are integrating a multi SKU scanning functionality which can scan a store self from feet away. Results will show eligibility for purchase.
  3. From Cart, we will persist the order. When a user switches between different benefits, cart will save multiple instances (of the cart).  Cart will hold these incomplete orders for 30 minutes (or 1 hour) and will delete these in complete orders after.

Before

Screenshot of the current CVS weekly ad page1
After
Screenshot of the current CVS weekly ad page1

Process

learn

Without a clearly defined scope I began the process of learning about the OTCHS app by creating an end to end flow from existing screens

Initial critique

  1. Remove card that makes the app look like a wallet.
  2. Consolidate Balance, activity & scan into "Home" page.
  3. Group paths to purchase and details with benefit type.
  4. Surface the scan code to message that this app is used to pay at a register.
  5. Do not support scanning as a form of search (no need for screens with results in bottom sheet)
  6. Do not support search (within scan or elsewhere)
understand

Alongside the introduction of the account feature for foods, the native application primarily serves as a tool for in-store shopping. Its key functionality revolves around the scanning feature, which allows users to determine the eligibility of products for in-store purchase.

Upon completing the end-to-end flow of screens created by the previous team, I scheduled a meeting with one of the designers to delve deeper into the details and gain further insight.

In addition to questions about the rationales for current architecture, I was concerned about the way in which the scan functionality was represented.

While Julia was unwilling to go beyond explaining the screens her team had design into critique and redesign, she was able to share that she was not present for meetings in which the scan functionality was discussed.

To learn more about the scan functionality I conducted a series for searches ultimately learning that there was new technology that matched the represented functionality in the screens I had inherited.

To learn more about the scan functionality I conducted a series for searches ultimately learning that there was new technology that matched the represented functionality in the screens I had inherited.

To learn more about the scan functionality I conducted a series for searches ultimately learning that there was new technology that matched the represented functionality in the screens I had inherited.

Man holding up smartphone to scan shelves of boxes sith barcodes
Scandit produces a scanning SDK which can recognize batches of barcodes. This software works in difficult conditions like low light, and on devices without autofocus.
Bartenders working in front of a back-lit wall of bottles
Most reported it would be unlikely they would download an app or use a mobile phone to manage the benefit.

User interviews

Having learned that the target user group are older and less technical, I interviewed family and their friends to learn more about in-store shopping and how these benefits were being used by current recipients. These were some of the observations I collected.

  1. Everyone I talk with had these benefits.
  2. Everyone shopped the benefit on desktop.
  3. Everyone regularly visits their local pharmacy and would be motivated to visit a CVS to shop these items in-store as it would be less trouble than online shopping the benefits.
  4. Some reported shopping these benefits by snail mail. They would receive a document of items, check off their selections, and mail it in.
  5. Most reported it would be unlikely they would download an app or use a mobile phone to manage the benefit.
define

Equipped with a deeper comprehension of the OTCHS application and its intended users, I was ready to assess the end-to-end flow and its content during the upcoming formative and summative cycle of work. In this process, I soon found myself exploring the perspectives of behavior scientist BJ Fogg and his insights on constructing effective triggers.

Info graphic of BJ Frog's theory

Motivation

The users of this application are driven by the desire to save money by utilizing their benefits to acquire goods they would otherwise pay for in cash.

Ability

Although the demographic for OTCHS generally possesses average capabilities, their proficiency in using more advanced applications with complex navigation is expected to decrease.

  1. While there are plans to incorporate multiple accounts in the future, the primary focus of the application remains on shopping. It is worth noting that other wallet apps do not primarily cater to shopping needs. Additionally, the placement of the location at the top of the app without a clear call-to-action can cause users to feel disoriented or uncertain about the next steps to take.
  2. Balances are the top of the typographic hierarchy following from the wallet concept.
  3. The "Shop" call-to-action (CTA), which aligns with user intent, is grouped together with balance details as a link button section within a tile pattern. It is important to note that this pattern often serves as a tap surface instead of merely acting as a container for multiple links.
  4. The significance of the scan technology in this native app can be easily disregarded without sufficient context. It's worth noting that the scanning functionality in other applications involves a completely different technology, utilized from a close proximity to a barcode.
Info graphic of BJ Frog's theory
Prototype

Armed with the analysis of the current solution, I commenced the task of effectively eliciting user intent by employing BJ Fogg's formula, B=MAP. According to this formula, behavior (B) occurs when Motivation (M), Ability (A), and a Prompt (P) align synchronously. To achieve this, I focused on providing clear prompts that would effectively engage users based on their motivation and ability.

While the notion of the application as a wallet accurately captures its functionality for managing multiple OTCHS accounts, it does not fully align with the primary user intent of making purchases.

  1. When possible it is often effective to directly and succinctly tell the user about the application and how to use it. I decided to use a simple sentence, top left. The sentence explains that the app is useful for in-store shopping and can also show all relevant products for shopping online.
  2. Tiles are employed as their correct standard pattern in which the entire tile is a tappable surface. In this case, for viewing details.
  3. By surfacing the scan code, users are shown that they can make in-store purchases by presenting the barcode for scanning at the register. Further testing may be needed to determine if the two barcodes are problematically close together and lead to scanning mistakes.
  4. The benefit details has been rendered with a more appropriate level of importance in the hierarchy.
  5. A button is added for the primary CTA to prompt online shopping clearly and visually by being rendered as a standard button.
  6. In-store shopping is given equal visual treatment to online shopping by rendering it as a standard button grouped with the CTA for shop online.
Man holding up smartphone to scan shelves of boxes sith barcodes