vicnere.png

Vincere Health

Summary

Vincere Health is a website and mobile app that assists users on their journey to quitting smoking. The app offers financial incentives, real-time biofeedback, and a personal health coach for each user.

The company hired me and two other designers when they noticed a decrease in retention during their onboarding process. My job was to redesign their onboarding to keep users engaged and excited about starting the program.

Tasks and Tools

Figma

User Personas

User Journeys

Iterative Design

Wire-frames

affinity mapping

Visual Design

Miro

Otter

Design Studio

User Interviews

Accessibility

My roles

  • Project manager

  • UX Writer

  • Lead in synthesizing research, user personas, and journey maps

All the graphics in this case study were created by me.

Style guidelines

This was the color palette I was given by Vincere. 

Group 1211.png

The quick brown fox jumps over
the lazy dog

Title: Roboto, Regular, 35pt

The quick brown fox jumps over
the lazy dog

SubTitle: Roboto, Regular, 20pt

The quick brown fox jumps over
the lazy dog

Text: Roboto, Regular, 14pt

Vincere's current onboarding

Frame 24.png

During our stakeholder interviews, the CEO mentioned wanting to change this “brain looking thing” they had as a background.

Frame 25.png

Users filled out a questionnaire through website and then were directed to the app.

Group 1210.png
Frame 25.png
Frame 26.png
Frame 24.png
Frame 26.png

Vincere used the word “smokalyzer device” to talk about their biofeedback device.

Test Card.png
Frame 27.png

Vincere was very clear that we could not guarantee to users that they would quit at the end of the program.

Frame 28.png

Because the platform onboarded users through a survey on the website, they were able to kept their questions sections short.

Group 1209.png
Frame 27.png
Frame 28.png

What did competitors offer?

Group 1208.png
Frame 24.png
Frame 25.png
Frame 24.png

I did a competitive analysis on 5 different smoking cessation apps' onboarding processes. Most of these apps began their onboarding process with a few intro screens.

Frame 25.png

After the initial introduction, they began collecting information from the user.
To make the process more appealing, many apps used colorful graphics and colorful backgrounds.

Key takeaways

  • Keep it short and sweet

  • Colorful graphics make it fun

  • Avoid asking for too much too soon

 

Identifying with the user

Group 1212 (1).png
Frame 25.png
Frame 24.png
Frame 26.png
Frame 24.png

Cycle of change chart reminds us that relapse is just a part of the cycle.

Frame 25.png

New users were likely those who have contemplated quitting, and are now taking action.

Frame 26.png

What are some of the feelings and emotions that happen when they’ve decided to quit smoking?

Key insights

  • By referring to the "Cycle of Change" chart, I was able to understand what the user may be experiencing in this phase.

  • The user may go from being excited to quit, to absolutely dreading the idea, and back again many times before they are successful.

Group 1154.png
 

Before interviewing the user there were a few considerations to make...

Group 1213.png

"I've gone through TSA twice in order to smoke."

Frame 24.png

Smoking and quitting are both sensitive and loaded subjects.
We wanted candid info and feedback from our users, so coming from a place of neutrality was key here.

Frame 25.png

Not only did I want to hear from people who were contemplating quitting, I also wanted to hear from those who had successfully quit smoking.

Frame 26.png

By speaking with these users, I could get an idea of what worked for them.

Key interview takeaways

  • They like the idea of having a coach help them through the difficult moments.

  • Users have tried many times to quit. They ultimately want to quit, but become overwhelmed, or don’t know how to identify their triggers.

  • Users smoke to self-medicate. Smoking relieves their anxiety.

  • Their lives revolve around smoking.

  • Users felt guilt and shame around smoking.

I took these insights and plugged them into Miro 

From that I made two personas:

Mark is my primary persona.

  • He is married, and has two middle school aged boys.

  • He has tried quitting before, but was never successful in the long term. ​

  • He hates gum and patches, but the idea of quitting cold turkey makes him feel really anxious.

  • He asks his wife to make him accountable, but when he slips up he feels twice as bad, causing him to lie.

  • Mark feels a lot of shame around smoking. He feels like he should have quit by now. He feels like a failure.

  • We want Mark to feel like he is being supported without judgement.

  • A health coach will be really beneficial for him to feel empowered

“Now I’m putting WD40 on the door hinges so she doesn’t hear me sneak out to smoke.”

Group 1214.png

Click below to learn more about Mark:

Ardalan is my secondary persona.

Group 1246.png

"I smoke almost never, but sometimes."

  • He is 31, has been smoking on and off for a long time but doesn’t consider his habit an addiction

  • Guilt doesn’t work on him. He pushes back when authority figures try to give him any unsolicited advice.

  • He decides he will consider quitting, but only if he can see real changes. If he doesn’t see any big impact, he doesn’t really see the point.

  • He doesn't really think his smoking is a problem.​

  • If he's going to quit he needs to see hard data.

  • He needs to go at his own pace.

Click below to learn more about Ardalan:

 
 

Sketching the intro

1/1

Design Studio Objectives

  • Be friendly

  • Have colorful graphics

  • Convey information clearly and transparently

  • Be short enough to keep users engaged

Imagery

Group 1217.png
Frame 24.png
Frame 25.png
Frame 26.png
Frame 27.png
Rectangle 40.png

This graphic needed to show diversity, represent the program and be clear and easy to understand.

Rectangle 41.png

Here we wanted to show the user that they get paid, and that the insurance companies cover the bill.

Rectangle 42.png

This page needed to show the visual of a device connecting to their phone, and a graph to represent real time feedback.

Rectangle 14.png

This graphic needed to show the health coaching process. The coach needed to come off as warm and non-judgemental.

 

Designing the intro.

1. What does Vincere offer?

Frame 24.png

The intro page should break down the whole scope of the program. I especially wanted to hook people in by letting them know they could earn money.

Frame 25.png

Users could skip the intro

Frame 26.png

I often heard “What’s the catch?” By being transparent about the process, I could keep users excited and build trust.

Frame 27.png

User's don't want to be policed. They want feedback on their progress. I switched the language to reflect that.

Group 1219.png
Frame 24.png
Frame 26.png
Frame 27.png
Group 1227.png
Frame 25.png

From my competitive analysis I knew that color was going to be my friend.

Group 1221.png

Initial Stakholder feedback

  • Make the background white, to match their current design

  • Cut down on the information given on each screen and rely on graphics

Group 1222 (1).png

Between the two designs, I really thought the color was the way to go... so I let the users decide. I tested both designs against each other, and...

I was wrong!

Users found it hard to read the colorful screens. Because conveying information was my North Star, I kept the white.

Ch-ch-ch-ch-changes.

Group 1174.png

I added this screen to introduce users to the “Quit Kit”, to explain why Vincere needed user's address.

Frame 24.png
Screen Shot 2020-12-08 at 5.46 1.png
Frame 25.png

Men felt they weren’t being represented in any of the graphics, so I added a male graphic.

Group 1229.png
Frame 26.png

When we were transparent and thorough, our users felt more informed about what Vincere offered, and showed a stronger interest in moving forward.

 

The final design, and prototype

The end result was an onboarding process for Vincere Health that used inclusive language and was easy to understand. The visuals were friendly, and inviting, but not overwhelming.

Go ahead, click around.