As a user, I want a frictionless experience from downloading the app to signing up and using the product. I want to understand the product firsthand before I commit. As a current or legacy user, I want to feel respected.
We wanted to allow the user to start using the product right away, without giving us any information. We wanted to lower the barrier of entry and get users engaged right from the start. So, we decided to allow the new user into the app and give them a practice step goal card so that they can start using Walkadoo right away. I knew that I didn't want to do a swipe-through tutorial; the app really doesn't take much explanation anyways! Instead, I opted to include a bunny character (WD has long used a bunny as our mascot) that would walk the user through the onboarding steps.
In order to start counting the user’s steps right away, we needed them to grant their permissions. One option, of course, is to serve the user the iOS permissions pop up right when they enter the app. However, if the user is not prepared to accept, and clicks deny, then they would have to dig in to their settings to change it. So, we presented them with a button that they could click when they knew they were ready to grant us their permissions, and then we served the pop-up. Once permissions are granted, we encourage the user to start walking! I wanted to find a magic step number for the practice card. A number low enough that they could finish the card with their phone in their hand, but high enough that they wouldn’t count up to it in their head (just in case the phone mechanics are off!). I did a few tests walking around, and decided that 25 worked best.
I wanted to approach the user who was not able to complete this flow in one feedback loop: the user on the bus, or in a car, or can’t immediately start the practice card for whatever reason. So, if a user is on their phone and grants permissions, but then doesn’t start walking after 10 seconds, we show a full screen message that entices the user to sign up. If they sign up, they will be all set up and ready to go for whenever they are ready to start taking those steps.
The user that does start taking the practice steps, however, will finish the card and receive a celebration moment, and a full-screen message inviting the user to sign up. If the user swipes the message away, we will continue to serve them daily cards, but won’t be able to use any other parts of the app.
With the topic of onboarding laid out, we worked as a team to pinpoint the user and product goals.
I chose the priority goals and looked at how to handle issues such as receiving permissions from users. I also spoke with our customer service team to see what kinds of things get in the way of a user's registration flow with our current onboarding.
I started sketching wireframes to play with the idea of lazy registration- allowing the user to start using the product right away and give a strong value prop for sign up.
I brought my wireframes into Sketch and started laying them out in high fidelity. At this point, I had another check in with the team to get feedback.
Some parts of the flow would need specific animations, so I created a prototype in Pixate to work out the kinks. The prototype also helped the iOS developer who I was working with better understand what I was going for.
I worked closely with the iOS engineer on my team to work through the implementation and check that the design and animations worked properly.
We tested the onboarding flow internally, and I made edits as necessary.