Overview
The Connections onboarding redesign addressed critical user retention where 80% of new users abandoned the sobriety support app after first login. The goal was to guide patients from registration to an active community through interactive walkthroughs and as well as add the app's first motion designs along with implementing a new visual design language.
Skills
Figma
LottieFiles
FigJam
Role
Product designer
Interaction designer
Visual designer
Platform
iOS
Android
The Problems
Through stakeholder alignment sessions, they’ve identified three core issue that contributes to user abandonment:
1. Unclear purpose of the app
There is no informational section that shows people what makes Connections' useful. E.g. There is not indicator that shows there is a strong supportive community.
2. Visually outdated and cluttered
Lack of visual engagement all the way from registration process to the actual application. It did not look professional nor cohesive. Rather with it’s cluttered appearance, it made Connections somewhat vague and overwhelming.
3. Limited awareness of services
Continuing with the cluttered appearance, there was no guidance to show what features patients have. They were unaware of the different type of surveys, and group messaging we have in Connections’
Design Opportunity
"How might we connect new individuals with our supportive community, proven tools and dedicated staff?"
Our goals for the project
During the alignment meetings, they’ve came to a few solutions on what they want:
1. Present the tools & features
An on boarding process that presents information for the patients. This would give patients a wider perspective of Connections than an app for "sobriety.”
2. Add testimonials
Show personal comments made from those in the community. It would allow the patients to reasonate and see how Connections’ is useful.
3. Brighten up the visual designs
The design and layout is very much dated. There wasn’t consistency nor use of micro interactions to provide more engagement.
Information Architecture Flow of the three
Design Iterations
We went through a lot of design iterations due to stakeholders pivoting. However, eventually we came to a decision. I did try to point them towards a direction where the onboarding does not become exceedingly long. However, they prioritize their own input and understanding of what they want.
I created this flow for when the individuals are going through the preboarding, after creating their account.
I used some inspiration from other applications, where people would create their account and then walked through.
Similar approach to the iteration prior. Instead I included the testimonials after creating their account and inside the application instead.
I created this iteration, where the designs show literally what is in the application. Then at the very end, include an already existing screen where it gives the new coming patients a direction to go.
Stakeholder Feedback
During the meeting for feedback, they’ve felt like the designs I’ve created were not exactly what they envisioned. Later I learned, they’ve been changing their minds as I was designing. Which later we discussed and came to a few new goals on what they want:
1. Literal reveal actions
They mention about how they want some of the information to be click to reveal. To drive user interaction and interest in the application.
2. More excitement
With the thought of driving more engagement, they want more playful illustrations
3. Longer boarding process
I wasn’t expecting them to want an extra long onboarding. They wanted the onboarding to make the patients see all of the benefits.
The Final Designs
The finalized after registration screens, very much more illustrations
Testimonials
The stakeholders wanted to show these testimonials to the patients to build trust.
Reveal Actions
As stated before, they want a literal reveal action to showcase features of the application. When tapped, it reveals the features that are beloved within Connections’.
Outcome & Reflections
Key outcomes
Transformed a part of the application that was very unclear.
More clear and informative
More visually appealing
Opened new potential areas for the application
What I learned:
Separating my own feelings from the business wants. I feel like the more I work in design, the more I’ve come to realize that sometimes it’s not always going to be about what I want to do. Depends on what the stakeholders want and what they envision. Often, I’d propose better solutions, shorter onboarding, or additional user research to understand better why users are not engaging with the app. It’s not prioritized nor seen in the same light.
I’ve learn a lot about how to communicate and pass over work to the dev team related to animations. I’ve never made animations before, and it was my first time working with LottieFiles. It was not hard to pick up, but it is very finicky. It readily breaks down, and even a slight change makes it jarring.
To be completely honest, illustration is not my best skill. However, I am proud that I tried to deliver and improve my illustration skills.