Attain App : Streaks + Badges

The Attain app is a sensor-based health, activity & rewards experience delivered via native mobile apps. Attain combines user health history with wearable data to offer personalized goals, achievable actions and rewards with the goal of driving behavior change to improve user health. In Attain, users earn points for their health interactions that can then be redeemed for gift cards or Apple Watch payment.

Problem Statement: In early 2022, it was decided to open Attain to members of the CVS Caremark and CVS Specialty programs. ​However, due to legal constraints we are unable to financially reward these new user types. We set out to find a solution for a non-financial rewards program that would support healthy habits and behavior change.

My Role: UX Strategy, UX Research, Content Strategy, Wireframes, User Flows, Prototypes, User Testing, Final Designs

Partner in crime: Duncan Okes

01 RESEARCH + DISCOVERY

The team conducted several research studies before beginning any design work to better understand user needs and behavior change engagement tactics that may be beneficial to the Attain user group.

02 workshop

The Experience Design team ran design workshops including Crazy 8’s for non-financial rewards that could impact behavior change. Several workshops were conducted with Product, Architecture and Design teams to define scope of the features. ​Together we looked at all the uncovered techniques and ranked them on their assumed importance to the user and their technical feasibility. ​

Going off the Prioritization Grid, we dove into some of the techniques that scored high on feasibility and user importance.

This exploration process as well as conversations with business stakeholders led us to Streaks and Badges. These would give our users something motivating that encourages daily usage, higher activity and competition with their  past selves.

03 Early prototype

We designed concepts for streaks and badges, exploring the impacted screens and design implications.

Implementing streaks for Healthy Actions reinforces healthy behavior, and daily use. While streaking Weekly Goals allows us to encourage physical activity with less risk of burn out (as streaking Daily Goals would).

After narrowing down some design concepts with business stakeholders, we landed on a prototype to test with some perspective users.

Test Results and Motivation Scores:

Results validated that Streaks and Badges would increase user engagement as a non-cash rewards system:

05 final designs: Streaks

The goal of Streaks in Attain is to increase users consistent engagement with the app. Streaks would be earned by users both within Activity and Healthy Actions. Streaks would start upon the second completion of an action, for Activity a Streak starts with 2 weeks consecutive completion of Weekly Activity Goal, for Healthy Actions a Streak starts with 2 days consecutive completion of a Healthy Action card. Users can view their current streak and best streak within the Activity and Healthy Actions tabs.

06 final designs: badges

Badges would be awarded to all users throughout the app. The feature was planned to release on both iOS and Android. Users who are eligible for financial rewards would view Badges as part of their current "Rewards" tab from the bottom navigation. Non-financial program users would see a "Badges" tab in the bottom navigation instead of "Rewards". From the main tab, users can view their recent Badges and high level stats for achievements across the app.

Badges Detail View

Users could tap into the detailed view of Badges section of the app in order to view by app section and specific Badge details. For example in "Activity Badges" view a user could swipe through achieved, in progress and available badges across this section of the app. By tapping on a specific badge, users could drill into a detail view and see more information on how to earn the badge, track progress toward the badge and see related badges available.

Streaks & Badges In-App Notification

At launch of each feature, all users would receive an in app full screen notification to educate and drive excitement for the new engagement mechanism. Users would also receive notifications in app when they completed badges that could include several badge achievements.

Badges System

To determine how users earn badges, we looked at each section of the app and worked out what they can do there. Looking at each individual action, we determined what badge type would best suit it.

For badging the repetitive completion of something like a daily goal, we landed on a milestone concept. These milestone badges run along cadences with calculated gaps that give a challenge while keeping momentum.

We also provided badges that users can earn several times (ex: 200% their daily goal) as well as ones that don’t show up in the initial list (ex: completing in the top percentile of a challenge). Some guidelines for this decision were inclusive best practices as well surprise and delight moments.

We determined most badges should be named explicitly but others could have thematic names that build with each other (like Base Camp > Ridge > Summit)

Attain App : Healthy Actions Card Redesign

The Attain app is a sensor-based health, activity & rewards experience delivered via native mobile apps. Attain combines user health history with wearable data to offer personalized goals, achievable actions and rewards with the goal of driving behavior change to improve user health.

In the Attain App, Healthy Actions are easy to digest tips and actions deployed via content cards daily. Healthy Actions are an opportunity for users to develop daily engagement with in improving healthy habits around topics of sleep, nutrition, mindfulness and activity. There is also an opportunity for more personalized clinical content deployed based on user's medical history.​​​​​​​

The Problem Statement: The goal of optimizing the design of the Healthy Action Cards was to increase engagement rates with the cards (current rates) through improved readability and hierarchy of card content. I also explored creating a more holistic experience, one that would inform the user of their progress, help them determine which content was of importance to them, and provide a more overall personalized experience.

My Role: Lead product designer, User Research + Discovery, Workshops, Wireframing, User Flows, User Testing, UI Design, Interaction Design

Baseline Test

The purpose of this test was to gain feedback from both Attain members and non-Attain members on the current lifestyle and clinical Healthy Action card experience in order to have something to compare to later when we are testing the proposed solution.

6 participants total: 3 Attain members, 3 non-Attain members

Each participant saw both the clinical and lifestyle cards, 3 participants saw lifestyle first and 3 clinical cards first.

Results:

• Participants did not notice the difference in cards bw lifestyle and clinical even though they were different shades of purple and had a different headline

• Participants understood the relationship between cards in multistep experience

• CTA language was either not understood or felt irrelevant. Users were confused by the number of CTAs.

We conducted usability baseline testing, design exploration and workshopping to identify the first phase of improvements planned to launch, collect real time user feedback learnings, then continue to adapt and improve.

Design improvements include:

• Improved CTA hierarchy: Updated call to action hierarchy to include clearly denoted primary and secondary buttons for adjudicated actions as well as links for related resources.

• Update in the color of the cards for improved readability: White background with black text is easier for most users than white text on violet color, especially for longer clinical cards.

• Retain branding personality: Retained brand colors and personality with the use of violet toned illustrations

• Added theme visibility: With the addition of a label that denotes the theme of the Healthy Action cards, users will have more awareness of content themes that span over a week of time of clinical cards that span over several weeks.

• Increased visibility of points and date: Based on user feedback of importance, moved the points value and expiration date from the bottom to top of the card.

• Removed ineffective copy: From user feedback, we learned there was a lack of attention paid to and clarity to the headlines that delineated the "everyday health" and "just for you" sections of Healthy Actions. This cleans up the space so users can focus on the information of higher importance rather than what had become white noise.

Competitive + Desktop Research:

One of my favorite things about working on Attain is the amount of time and respect given to proper research. Having a UX researcher embedded on the team was helpful though not enough. Due to capacity issues I took over the research for this redesign effort. I completed competitive research, design discovery, and Card UI Best practices audit and report. As well as user testing proposed solutions in the later stages.

Cross-functional Workshops

In order to get the most out of our early sprints of informational gathering, I organized and ran several cross-functional workshops with Product, Architecture, Data Science and Design teams. The outcomes of these workshops were very helpful in organizing the information that was independently stored in everyone’s heads. Working with highly experienced team members across the teams I learned that many folks had many strong opinions and different ideas on what Healthy Actions could or should be in the future state. Having everybody on equal plane workshopping in design thinking really set the stage for synthesizing concepts. These workshops along with the research conducted helped me create the narrative, user flows and other deliverables to inform and back up our approaches to be eventually tested.

wireframes

We identified several use cases where there was opportunity to improve the experience and to create more engaging interactions for our users. Major areas of opportunities to explore were in long content, multi-step cards and fitness tracker based actions. We identified the need for users to better understand a connection between certain cards and the surfacing of in progress actions.

Preview cards / content hierarchy exploration:

• Chunking / simplifying

• Better information hierarchy

• Show what the users find most important first and let them choose what cards to interact with

Tab structure and Navigation systems:

• Wallet

• Carousel

• Connecting tips and challenges

Multi- step cards:

• Opportunity to create a sense of traction/accomplishment

• Connect daily cards to weekly theme and show progress toward a greater goal

• Link similar cards together to see the timeline of that theme

• Group related cards in completed section

In progress Challenges:

• Lifestyle content served provided a tip and a challenge. The tip being the “why” and the challenge being the “what”.

• In our baseline test users saw the connection between the cards but were often confused as to when a card is completed an how they were to earn the points

MULTI-STEP DESIGN EXPLORATION

Once we had some wireframes and flows worked out I moved quickly into prototyping some designs so that we can test with users. For the multi-step experience I wanted to explore surfacing up all the content for the week, leveraging unlocking mechanism to keep users interested and aware of the connections between cards as well as differentiating between tips and challenges and status (in progress, completed, expired). Some navigation structures I explored included horizontal carousel and wallet style interactions. Users would be able to tap into each preview card and see the detail view and take action there.

MODERATED USER TESTING

Test goals:

• Ensure the information shown is useful

• Identify participants interpretation and feedback about how card series work

• Inform decisions between design variations

• Capture future state value-adds for the Healthy Action redesign

The prototypes shown included a conservative, moderate and ambitious approach. Users were shown the same content in these 3 variations. All 3 versions showed points in a more prominent location and treatment on the card. Conservative approach showed a card that was more similar to the current experience, but the cards were stacked. The moderate approach displayed the preview cards in a vertical scroll with headline dividers, the moderate approach featured the influencer / theme for the week, displayed total points earned vs available and preview cards displayed in horizontal scroll.

A new pivot from Product

While we were testing these prototypes new direction was coming from our Product team. There was a decision made to separate activity based challenges from Healthy Actions. This change had a big effect on the proposed solutions.

This simplified the experience, decreased the number of cards available daily, removed the need to differentiate between a tip and a challenge, and would no longer need to show healthy Action cards in progress (because those were activity based and would now live int he Challenges tab). It was determined that having the preview card -> detail card navigation structure wouldn’t be necessary with this change. And since Prototype 1 tested well it was decided that we would choose that direction and create a phased approach for future states.

We did however determine that we would still want to make a connection between tips and challenges, but that connection would be reflected via linking 2 sections of the app.

Progressive Insurance: Shower Sessions Podcast

Problem Statement: In 2018 Progressive Insurance wanted to expand their audience to the young homeowner segment and reposition themselves more like a lifestyle brand. There is a direction from internal partners to try and tap into that audience through their favorite past time - MUSIC!

My role: Workshop Facilitator, Creative pitch team, UX/UI Designer, Interaction Designer, Functional Specs

01 STRATEGY KO

First we partnered with our strategy colleagues at Arnold to come up with the pitch. Some highlites that resonated with our client:

The purpose: To show that movement in long term brand measures can improve in near term ROI on acquisition and retention programs

The hypothesis: If we appeal to their passions we’ll improve our brand impression

The how:

• Building an emotional connection with our YHO audience by sharing and contributing to their passion: Music

• Prove that what matters to them matters to us - which makes us the brand for people like them

• Give people a reason to join and stay with Progressive that is more than just a price.

• Create the first insurance brand as a lifestyle brand

Shared insight: Home is the one place in the world where you can be completely and totally yourself. At home you’re free to be 100% you, quirks and all.

02 design thinking

As a former singer-songwriter this was by far one of the most exciting opportunities I had while working at Arnold Worldwide which says a lot because we did a lot of ambitious things at Arnold under the guidance of Sean Will and Icaro Doria.

For this effort I created a war room - where creatives could come in and be immersed in Design Thinking. I ran a workshop for the creatives to brainstorm ideas on how Progressive fits in with this young audience, and how music can naturally be a part of the conversation.

We came up with wild concepts and some very relevant ones. When presented to the client they really liked the idea of a podcast series called Shower Sessions. The initial concept was that we bring emerging artists and film them singing in the shower “ Where we feel most at home”.

04 RESEARCH

First we did competitive research. We found that the idea of singing in the shower as a marketing campaign for products had been used by several brands but never for an insurance company and never quite like our idea. We identified best practices for podcast microsites, music podcasts, and interview podcasts. Armed with this info we went into sketching and wireframing.

03 wireframes

We knew we wanted to build a microsite to house the episodes and we knew this was not going to be a traditional podcast site where visitors are usually kicked to podcast players in order to optimize streaming. Progressive had one goal in mind for the Shower Sessions website: keep users on the website for as long as possible. PGR needed to gather data on non-traditional podcast-listening behavior.

We didnt know who the host and artists were going to be yet, but knew we needed to create a lot of content to keep users engaged so we came up with a couple of directions for the site. For season 1 we wanted to create and launch with 6 episodes about 15 mins each, where each artist has a dedicated page with an interview, a live video performance and some behind the scenes footage. We quickly mocked up a home page and an artist episode page.

04 Early Prototypes

Knowing our clients respond better to designs we created quick prototypes to validate our thinking. The look and feel was very on brand for Progressive and they really resonated with that. We were clear though that this was all FPO as there was no host yet, no set location for a bath/shower and both would really drive the visual direction for the site.

For this prototype, we brought the host and featured artists front and center at the beginning of the experience. When a user lands on the microsite, they have the chance to listen to a one minute teaser to learn more about the podcast while a short highlight video plays at the top. Below the scroll, episodes are listed out in chronological order.

Mobile Home page

04 ST Vincent signs on as the host and Everything changes… for the better

Having been a big fan of St Vincent (and having gone to Berklee College of Music with her) I was elated to see that our partners at UMG also represented her. I suggested early on that St. Vincent should host the show and had even snuck her into the early mockups (see above), but ultimately it was not up to me. I recommended her as the perfect candidate and somehow things aligned and it worked out. And what a revelation it was to us all.

Suddenly the whole project felt refreshing and the commitment and input that St Vincent shared with us pushed us to think a little more outside the box. Luckily the clients were willing to let St Vincent set the tone, choose the artists and we could be a little less “on brand” in terms of look and feel and a little more quirky and daring. St Vincent shared a mood board with us that helped bring this vision to life. We decided to sketch out and wire a new experience based on her brand.

05 Back to the drawing board - sort of

What we wanted to create was an immersive experience - with performances and videos right upon entering the site, in hopes of getting you to spend time watching and listening, and eventually deep-dive into each artist’s episode. This was in line with Progressive’s goal to keep users on the website for as long as possible. Another change we made was removing all the icon links for podcast services to keep in line with Progressive’s goal. These episodes would live on the microsite for the first 6 months of the campaign but eventually would be available on Podcast services.

06 UI Design + Interaction design

For all the time I spent at Arnold this was the first time I was part of the creative team filming on set. Being there really helped inform the UI decisions we would eventually make. The quirky bathroom setting, the edgy vibe the St Vincent brings to everything really set the tone for the look and feel of this site. This was not just a podcast, this was way more than that!

07 WCAG

In addition to designing a fully interactive & immersive site, we also had to create a WCAG-friendly experience. Given that this was still owned by Progressive we did have to meet their accessibility guidelines. We didn’t want to compromise the site but we knew we had to be inclusive. We decided to create a parallel experience for those with visual or other impairments. We created separate user flows, guidelines, and functional specs for the WCAG version. We had to eliminate some of the functionality and micro-interactions in order to meet compliance standards. If a user turned the animation toggle off, they would no longer be in the interactive version of the site but the simplified one. In this experience we hid the sticky episode list tab that was at the bottom of the page.

OFFICIAL TRAILER