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 active community engagement through interactive walkthroughs and the app's first motion designs along with 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 problems contributing to user abandonment:
1. Vague about the use
There is no guidance or informational indicator that shows people what makes Connections' useful. E.g. There is not indicator that shows there is a strong supportive community.
2. Dated
There is no visual engagement from the registration of the application to getting into the application. It felt very not developed and people don’t want to participate in the community.
3. Unaware
Individuals do not know what available tools they have access to. Some individuals 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
There is no guidance or indication of what makes Connecitons’ a useful tool for these individuals logging into the application.
2. Add testimonials
There is no visual engagement from the registration of the application to getting into the application. It felt very not developed.
3. Brighten up the visual designs
There is no visual engagement from the registration of the application to getting into the application. It felt very not developed.
Design Iterations
We went through a lot of design iterations mostly cause the stakeholders were changing their minds and pivoting their decisions for certain design choices. However, eventually we came to a decision. I did try to wave them towards a direction where it’s not as long of a onboarding. However, they prioritize their own input and research. I worked with them and tried to cut down the information and support their direction.
I created this flow for when the individuals are going through the preboarding, after creating their account.
The things I took to consideration:
They usually provide a lot of information. So I made cards that would allow that opportunity for them.
Similar approach to the iteration prior. Instead I included the testimonials during the preboarding before getting into the application.
The things I took to consideration:
They usually type a lot of information. So I made cards that would allow that opportunity.
I wanted these screens to be simple and feel somewhat modern. Mostly similar to what’s currently on the application.
The things I took to consideration:
They usually type a lot of information. So I made cards that would allow that opportunity.
Stakeholder Feedback
During the alignment meetings, they’ve came to a few solutions on what they want:
1. Present the tools & features
There is no guidance or indication of what makes Connecitons’ a useful tool for these individuals logging into the application.
2. Add testimonials
There is no visual engagement from the registration of the application to getting into the application. It felt very not developed.
3. Brighten up the visual designs
There is no visual engagement from the registration of the application to getting into the application. It felt very not developed.
The Final Designs
Design Iterations
We went through a lot of design iterations mostly cause the stakeholders were changing their minds and pivoting their decisions for certain design choices. However, eventually we came to a decision. I did try to wave them towards a direction where it’s not as long of a onboarding. However, they prioritize their own input and research. I worked with them and tried to cut down the information and support their direction.
Testimonals
This is to introduce beginner climbs on this tool and how to use it. However, I wanted to keep it brief, the beginners just want to climb it and try the offerings on this application. Thus, I just show the information of this application.
Reveal Actions
I wanted to keep this pretty similar to lot of the streaming services available. This would feel a lot like similar to what is out there; Netflix, Spotify Apple TV, and YouTube.
Conclusion
Overall, I am happy how this has come out. Definitely think it would’ve been different if I was leading this project. However with all the constraints and pivots. It came out decent for us all.
Key Take Aways
• Separating my own feelings and the business wants. I feel like the more I work in design, I’ve come to realize sometimes it’s not always going to be about what I want to do. Comes down to what the stakeholders want and what they envision. A lot of the times, I’d try to present better solutions and less of length-y onboarding or encourage more user research to further understand why people are not engaging with the app. It’s not prioritized nor seen the same light.
•I’ve learn a lot about how to communicate and pass over works 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 the finickiness of how easily broken down it becomes after a slight change was jarring.