Overview
MySwimPro is a personalized swim training mobile app with companion smartwatch apps and various other integrations. It offers both paid and free features, including workout logging and analytics, personalized workouts, training plans, and more.
In addition to sharing full UX responsibilities, I facilitated many of our team's work and brainstorming sessions and oversaw progression, organization, and communication throughout the project.
Problem statement
During the app onboarding flow, users don’t seem to fully understand all of the app’s features, particularly those included in the premium plan, and as a result don’t subscribe to premium.
This was the old MySwimPro onboarding experience:
Challenge
How can we improve MySwimPro’s mobile onboarding process to better inform users about the app’s premium features and help them achieve their swimming goals?
Process
Research & analysis
Initial research
We conducted a heuristic evaluation, competitive analysis, a survey of 114 MySwimPro users, and 6 remote interviews with MSP users of different swimming levels. Our main findings were:
- Many users don’t fully understand what features come with the premium subscription
- Users want more relevant and personalized workouts tailored for them based on their specific goals and swimming levels
- Many users don’t understand the swimming terminology “dynamic intervals”, a premium feature shown during the onboarding process.
Personas & user journey maps
We then consolidated the information from our user research into user personas and journey maps to better visualize our target users’ different needs and how different users might convert to the premium subscription.
We used these 3 personas throughout our project, but decided to focus on designing for Michael Thompson, the intermediate swimmer. Based on our research, this user group shared some common goals between the beginner swimmers (who want the app’s premium training plans for workout guidance) and advanced swimmers (who want to log their workouts, see analytics, and utilize the app’s “workout of the day”).
Primary design requirements
We synthesized our research into the main requirements:
- Redesign the onboarding process so it’s more personalized for users based on skill levels and types of goals
- Incorporate a clearer understanding of premium features into the onboarding process to encourage users to subscribe
Conceptualization
After conducting our research and analysis to better understand the MySwimPro application and its users, we moved on to the ideation phase.
I proposed that we individually brainstorm our ideas, share them and discuss to generate more ideas, and repeat the process until we converged on a user flow that was suitable for initial user testing.
Initial brainstorming
I facilitated a brainstorming session where we individually wrote down our ideas for the onboarding process on sticky notes, then did an affinity diagramming exercise to visualize similarities and differences. The limited space of the sticky notes enabled us to focus on high-level, overall concepts rather than get bogged down with details.
After reviewing common themes, we individually wireframed our ideal onboarding flow to help visualize our ideas.
Group user flow
After much discussion, we consolidated our individual design flows into a single text-based flow to ensure we were looking at the redesign from a high-level perspective.
Individual paper prototypes
With our ideas of the group flow in mind, we began creating paper prototypes thinking we’d eventually test with users for our first iteration.
Two people created prototypes for the first half of the onboarding experience (screens 1-4), and two created prototypes for the second half (screens 5-9).
We did this to iterate on our initial design and narrow down our choices while still leaving room for future improvements.
Final user flow for testing
We showed our paper prototypes to the MySwimPro team for feedback. They liked the direction it was heading in, but had concerns that onboarding would be too long and users would drop off.
With this feedback, we went back to the drawing board, brainstorming ideas to reduce the overall length of the onboarding experience while retaining its overall functionality and level of personalization.
Key decisions:
1️⃣ We initially considered removing the premium screen from the onboarding flow completely. However, we realized this could alienate users interested in premium features beyond the personalized training plan, so we decided to keep it.
2️⃣ We needed to decide where to put the premium screen. We eventually decided on combining it with the personalized training plan screen since the training plan is a premium feature.
3️⃣ After determining the final onboarding flow, we moved on to the design phase.
2️⃣ We needed to decide where to put the premium screen. We eventually decided on combining it with the personalized training plan screen since the training plan is a premium feature.
3️⃣ After determining the final onboarding flow, we moved on to the design phase.
Design, prototyping, & testing
Iteration 1
We used the original app onboarding process as a jumping point for the actual design. To test with users, we decided against using paper prototypes and instead created a cleaner, high-fidelity digital prototype via Figma so participants could read the prototype.
The biggest changes from the original app onboarding were:
- Remove the “dynamic intervals” screen. Users were asked to input their best swim times for personalized interval sets, but this is time-consuming for an onboarding process and is not clearly advertised as a premium feature.
- List out the premium benefits rather than use a scrolling image carousel.
Iteration 1 - full user flow for onboarding
Testing iteration 1
We had 11 participants from the Michigan Triathlon team and Ann Arbor water polo community walk through our prototype and respond to follow-up questions. We chose these participants to represent the target users of swimmers.
Question | Summary Response |
Length of onboarding process (too short, somewhat short, just right, somewhat long, too long) | 9/11 said "just right." |
How well users understand premium (extremely well, very well, moderately well, slightly well, not well at all) | 5/11 said "moderately well"3/11 said "slightly well"3/11 said "not well at all" |
Likelihood of subscribing to premium (extremely unlikely, somewhat unlikely, neither likely nor unlikely, somewhat likely, extremely likely) | 7/11 participants were "extremely unlikely" to go premium. |
It was also important to note that two users didn’t know there was a free version of the app.
Based on these results, our next iteration focused on improving users’ understanding of premium features during onboarding.
Iteration 2 (final design)
For our final design, we clarified the difference between free and premium by making the following changes:
- Use a carousel to show users what premium features the app provides on the premium screen. In contrast to a bulleted list, the carousel allows more room to briefly explain each feature.
- Add a screen showing what users can do for free with the app for those who choose not to subscribe.
Validation testing
Following our research and design work, we wanted to measure whether our redesign was an improvement from the current MySwimPro onboarding flow.
Method
We conducted multivariate testing to compare prototypes of the current MySwimPro application onboarding and of our redesigned version.
Half of survey participants saw a prototype of the current app onboarding. The other half saw only the redesigned version. Participants were asked the same set of questions before and after going through one of the prototypes.
Results
Metrics | Current App | Redesign |
How well users understand premium (multi-select quiz question; max score = 4) | 2.57/4 | 3.33/4 |
Likelihood of subscribing to premium (1 = extremely unlikely; 2 = somewhat unlikely; 3 = neither likely nor unlikely; 4 = somewhat likely; 5 = extremely likely) | 3.85/5 | 4.66/5 |
System Usability Scale score to test general usability (higher is better) | 58.33 | 81.25 |
In short, we were happy to see that the redesign did much better than the original based on these metrics.
Possible biases to consider
- The System Usability Scale is best used to test entire systems. However, we used it to examine one process (onboarding) within a system.
- It’s possible that some of the participants who were shown our version of the application were familiar with the current application, making it easier to understand what premium offers.
Project wrap-up
To ensure a smooth transition, we had a final meeting with MySwimPro to present our final deliverables and results, hand off our full report, and share our design specifications for implementation in Zeplin.
Made with Bullet