- For this exercise, I figured it would be easier to make a user flow. Whites are screens, oranges are CTAs!
- The first challenge was to choose the first step of this onboarding experience: I understand that we have already asked the user their name, date of birth and sex, but I still feel bad for asking them about their weight first. I've decided to start with the GPS permission – this is a pretty basic ask for a fitness app and I believe the user should feel this is ok.
- Now that I can't hide from that any longer, I'll go with the calorie counter.
- It felt natural to leave the goals last, I think it would be very weird to start with this. I struggled wether to make the possibilities (an activity, a time frame or a type) options for the user, but I think this is the most fun part of the experience. If I had downladed Pace, I'd like to inform them that I'd want to swim 50 kilometers in 4 months, swimming 3 times a week. This should be the most comprehensive part of the onboarding experience, right?
- All onboarding screens should have a "skip" CTA that leads for the next screen.
- I really liked the designer's suggestion, so I decided to work around it.
- Since this is an onboarding experience, I felt no need to insert a logo or a menu icon. Still, I think we should have the brand name somewhere in the screen, so I added it to the welcome message. The subheader is an explanation about what's happening, but in a very informal and exciting tone.
- Like the mockup the designer sent, I decided to use empty circles to show the step isn't done – and all the other steps are dumbed down in a very light tone of gray, so the user sees what's ahead.
- I've decided to go with a more conversational tone for the headlines, so I decided to repeat the first words at the subheader for the main CTA, with a very clear copy. The "skip" button is secondary, hence the light button.
- I was still upset about the weight and height thing, so I decided to add a tooltip to ensure the user this data is solely for the app to function and would never be used for any other purpose. I believe this is a good way to make the user trust Pace.
- For the second screen, I also used the secondary subheader to inform the user what that data will be used for. Besides the inputs for the data, I also added a toggle swich so the user could select if they're adding this info in meters or feet, and in kilos or pounds. I'm scared this might be too busy, but I'll go with it.
- The third screen was a challenge – I'm still concerned this might be too busy, but I'm confident it can work. I liked the suggested copy for the subheader, but made some changes. I've decided to use a dropdown menu for the first two questions: the first will include the sports the app tracks (running, walking, swimming, cycling) and the second should show a range from 1 to 12 months.
- I believe the user should pick a goal type, instead of focusing on completing a distance within a number of hours, in a number of days. They should pick one and type a number – the toggle swich has the same purpose as the previous screen and should only appear if the user selects the "Distance" checkbox.
- The last screen should have some animation: after the last button turns green, the user will see a pop-up. I've debated if I should use a headline like "Let's do some laps?" but the CTA wouldn't match, so I went with a more straightforward copy. For the CTA, I've tried to be as clear as possible.