~ An Overview

Context

The CVS website and mobile app serves 44,000,000 customers, providing essential details about their orders, prescriptions, and other related status updates. While most CVS customers have push notifications enabled and their accounts properly tied to different lines of business, many customers do not.

CVS aimed to boost digital enrollment and monthly active users by using Braze for modal campaigns, prompting users to enable push notifications. I led the Digital Reach team, defining design direction and creating modal prompts for the CVS app.

The Problem

Most CVS users are enrolled in push notifications and have their retail and pharmacy accounts linked. However, CVS still has hundreds of thousands of users who have not tied their pharmacy and retail accounts together or have not enabled push notifications.

As a result, CVS cannot effectively market to customers with unlinked accounts or those without push notifications enabled, missing opportunities to engage users and most importantly, increase conversions and monthly active users within the app.

The Challenge

The Digital Store team was tasked with tasked with determining how CVS could encourage users to enable push notifications, link their retail and pharmacy accounts, and stay updated on their orders through Braze modals within the app.

My team and I decided to utilize Braze and Figma to create actionable modal prompts to be shown to users who met specific criteria as they spent time in the app by using the following problem statement:

How might we help CVS increase conversions, grow monthly active users, and improve marketing accuracy by encouraging customers to link their accounts and enable push notifications?

Pausing for Clarity: These modals are periodically displayed for specific customer cohorts throughout different user journeys within the CVS app.

The Result – This is a spoiler! Click or tap here to show the result.

My team leveraged Braze to implement three types of modals encouraging users to enable push notifications in the CVS app.

By presenting customers with modals encouraging next steps and provoking action, our designs:

• Increased the number of users enrolled in push notifications by 120,000+ each month since launch, resulting in a larger user base for marketing via the CVS app.

• Increased the number of users with Pharmacy and Retail tied accounts by 72,000+ each month since launch, dramatically improving the number of tailored and personalized messages sent to customers.

• Boosted the number of monthly active users in the CVS app by 239,000+ since launch, increasing the amount of interaction and spend by customers using the CVS app.

Take a look at the final prototype linked below:

      ➤ Mobile app final prototype

1.   Researching the Problem

Primary Research

Before starting my research, I met with the product team to understand their goals for using Braze and how our designs could meet their needs.

After getting an understanding of what the product team needed — in app modals that provoked a multitude of specific conversions — I started my primary research, learning how other retail companies used modals to effectively capture their users' attention and increase conversions.

I found that the companies I researched utilized related imagery, bold brand styling, and a specific structure to communicate important information to customers, helping increase potential user conversions. Some examples include:

• Imagery: Incorporating imagery with branding captured users' attention, making them more likely to engage with a modal and read its content.
• Brand Style: Using consistent app branding, encouraged customers to view modals instead of dismissing them, as they felt more aligned with the app's overall design.
• Structure: Maintaining a consistent structure across modals drew users in, as they recognized visual similarities with previous modals they encountered in the app.

A Competitive Analysis

To better understand how I could design a modal that provoked customers to act, I completed a competitive analysis. I analyzed the modals used by other major retail and pharmacy players Walmart, Walgreens, and Amazon, to learn how each utilized similar modals in their apps and websites.

This competitive analysis, helped me identify how we could utilize imagery, bold brand styling, and a specific structures, holistically communicating important information to customers while increasing conversions.

2.   Ideation

Defining the Direction

After working with my team to determine our approach, I utilized the CVS Health user persona to guide further research and define design direction. I then shared the strategies and approaches I found during my research with the larger team to inform our modal prompt designs.

Based on input from the product team, we decided to use Braze to build the requested campaigns, with Figma as a sandbox for iteration and UserTesting to gather feedback on the designs and copy before implementation. This allowed us to gather structured user feedback on both design and copy, avoiding the need to create multiple Braze campaigns for user testing.

Analyzing the User Journey

To understand how the copy, positioning, design, and style would impact the user flow, I analyzed each user journey where these modals would appear. This helped my team and I determine the best approach to designing modals that encouraged users to complete the presented prompts.

As shown below, the modals we were tasked with creating could be presented to the same users during different user journeys. This allowed me to assess which modal design may best serve users regardless of which user journey they were in.

Sketches

After discussing with my team, the product team, and stakeholders, I explored Braze to understand the design limitations. Then, I created a demo campaign within Braze to establish the guidelines my team should follow during the design process.

This ensured the sketches I created for these modals adhered to Braze’s limitations, helping me define and visualize design direction before wireframing, prototyping, and testing.

Wireframing

Once I understood the design limitations and modal positioning through different journeys, I created wireframes within the Braze Campaign Manager. This helped me refine the look and feel of the modals on the app's screens and provided visuals to share with my team and stakeholders before creating the initial prototype for testing.

3.   Prototyping & Testing

Designing the Prototype

I created the initial prototype by translating my designs from the Braze Campaign Manager into Figma. This allowed me to easily share the prototype with the copywriter on my team, the product team, and other stakeholders.

Figma also made it easy to launch UserTesting tests to test different modals for various use cases and quickly make copy changes.

Testing the Designs with Customers

After designing the modals for each user journey, I set up a UserTesting test to A/B test our designs with smaller cohorts of CVS customers. This helped us identify necessary design and copy changes to ensure the modals captivated users.

With the feedback provided from the UserTesting tests, my team and I understood which copy resonated most with users and whether the designs influenced them to interact with or ignore the modals. We learned the following insights from our tests:

1. The copy lacked clarity. Users were unclear about the benefits of enabling push notifications, which made the call to action less compelling.

2. Users believed the only way to close the modal was with the "Not Now" button. Many requested a more visible close icon for easier dismissal.

3. Users felt the modal wasn’t meaningful, as its design resembled a third-party notification rather than a message sent directly from CVS.

4.   Modifying the Design

Redesigning from Feedback

Based on the feedback and insights from the UserTesting test, it was clear which changes needed to be made to the designs. I discussed these findings with stakeholders, the product team, and my team ensuring everyone understood what motivated or hindered CVS customers from engaging with the modals we were preparing to release.

With these issues noted, I made the following changes from feedback:

• I worked with the copywriter on my team ensuring users clearly understood the benefits of enabling push notifications, making the call to action more compelling.

• I redesigned the close button, ensuring that it was more defined and darker than the previous close button, allowing for clear utilization by users.

• I revised the modal designs in Braze to better align with our design system, ensuring our modals felt like a typical CVS communication to users.

These changes aimed to provide clear, concise actions and information, helping users understand the suggested prompts while offering enough context to either proceed or easily exit the modal.

Testing the Redesign

I shared the new modal designs with the product team then launched a new UserTesting test. The second UserTesting test revealed to us that the new modal designs were easier for users to understand, helping users determine if they needed to take action.

Additionally, users felt the new design was more aligned with CVS branding, unlike the previous version. We learned:

• Customers quickly understood the purpose of each modal, as the potential benefits of taking the recommended actions were clearly defined.

• Users were more comfortable interacting with all elements of the modal, with the close button being more noticeable and frequently mentioned in the tests.

• Customers felt the new modal better aligned with the CVS branding, making them more likely to trust and engage with it when displayed in the app.

5.   Launching the Finalized Design

Conversations for Production

After sharing the UserTesting results with stakeholders, I continued discussions with the product team about next steps. As this project did not have allotted engineering bandwidth, it was up to product and design to implement these modals.

We discussed the best approach for implementation and how Braze campaigns would be used to push the modals my team designed into production.

Stepping up to the Challenge

By taking on this side of the project and working closely with the product team to launch the modals we designed, I understood:

➤  Eagerness to learn is invaluable. To translate designs from Figma to Braze, I tackled HTML and inline CSS, stepping in with my development skills when engineering bandwidth was unavailable.

➤  Adaptability is key. When my team was reduced to one copywriter and my design partner was reassigned, I filled the gaps by finding answers and tackling challenges, ensuring project continuity.

Pushing to Production

The product team and my team translated our designs into the Braze Campaign manager by coding and pushing to production. Both teams collaborated closely to ensure alignment between the design and copy changes made in Figma, providing a seamless implementation.

After pushing the designs to production via the Braze campaign manager, we conducted QA testing to confirm that the modals had been correctly implemented.

Take a look at the final prototype linked below:

      ➤ Mobile app final prototype

6.   Launch

Statistics from Going Live

After we implemented our designs, I spoke with the product team to gather metrics to share with my team. By presenting customers with modals encouraging next steps and provoking action, our designs:

• Increased the number of users enrolled in push notifications by 120,000+ each month since launch, resulting in a larger user base for marketing via the CVS app.

• Increased the number of users with Pharmacy and Retail tied accounts by 72,000+ each month since launch, dramatically improving the number of tailored and personalized messages sent to customers.

• Boosted the number of monthly active users in the CVS app by 239,000+ since launch, increasing the amount of interaction and spend by customers using the CVS app.

7.   Reflecting

Looking Back

Leading and launching a project into production was an incredible learning experience. I learned the importance of preparing for the unexpected, from teammates shifting teams mid-project to applying development skills beyond typical design work.

While team successfully carried the project from start to finish we still faced a few challenge.

What I Learned

Being prepared is crucial. As someone who has been moved teams multiple times due to reorgs at CVS, I expect that others on my team may experience the same.

• When a teammate is reassigned unexpectedly, there is usually only one opportunity to have a knowledge transfer before they dive into their new project. With this in mind, I make sure to take detailed notes during all meetings and knowledge transfers, asking any and all questions in mind.

This taught me the value of detailed note-taking in all conversations, even those that seem less important, as any notes can help fill gaps that arise. In subsequent projects, taking detailed notes in all conversations has allowed me to bridge communication gaps caused by teammates leaving or unexpected reorgs.

What I Would Do Differently

This project had many moving parts I was unfamiliar with until I got deeper into it, one of which was Braze. As someone who primarily lives in Figma, using new software was rewarding. However, with a program like Braze, I feel I could have done more to fully understand how it worked.

While the project achieved its intended outcome, I didn’t fully grasp the power of Braze’s capabilities until my designs were implemented. Since this project, I’ve made it a priority to thoroughly understand new tools as they’re introduced, learning how to apply them effectively to drive project success.

This approach not only helps me grow as a designer, but also enables me to support my team by leveraging these tools, as they may not be familiar with how such tools can help us achieve our goals.

Thanks for Reading!

I appreciate the time you’ve taken to read through my case study and get an understanding of my process. Please reach out if you have any questions about my work on actionable push and modal prompts for CVS! I’d love to discuss it with you.

Feel free to take a look at another project by clicking one of the links below.

Back to All Projects