Timeful is a smart time management application. Founded in 2013 by two experts in artificial intelligence and a behavioral economist, Timeful leverages algorithms to intelligently find optimal times for you to do all the things you need to do.
The onboarding flow is the user's first touchpoint with the app. It serves to both facilitate account setup and sell Timeful's value to our new users.
I own Timeful's onboarding flow. We've been through many iterations together, and I love it. (It's gotten to the point where I keep a screenshot collection of other apps' onboarding as a mini hobby.)
Onboarding is so appealing because, as an experience somewhat separate from the app itself, it gives me more free reign to experiment. I enjoy prototyping fun interactions and exploring ways to express Timeful's value to our customers. The huge challenge of telling a compelling story to multiple audiences (while convincing them they should let us send them push notifications) makes it all the more fun.
On this page I'll highlight a few components of the last publicly released flow, as well as touch on some of my process.
Streamlining the Signup Flow
Critique of Previous Signup Page
In other words, a lot going on.
I didn't see many hitches with signup during usability testing. But, in asking our analytics team what people were actually doing on this screen, I learned that a small but noticeable percentage of users were toggling between signing up and logging in without actually progressing to the following screen. That was not the goal, so something needed to change!
A Different Approach to Signup
In seeing an issue with the sign up / sign in toggle, I started to think about whether there was a way to remove the toggle altogether.
I reviewed my onboarding benchmarking collection and figured that there was a way to do this: We could know whether a user is new or returning by looking up her email address.
The strategy of using a person's email address to determine her account status enabled me to break up the cluttered page into a simple, multi-page flow.
This is one of those cases in which more pages is actually simpler. We're asking for just one piece of information per page, so there is no question as to each screen's purpose.
In usability testing, users breezed through the newly simplified pages.
Clip of Revised Signup Flow (FramerJS Prototype):
Engaging Interaction for Permission Request
Permission Request Requirements
Before allowing people into Timeful, we need to request access to two restricted permissions: calendar access and push notifications. That means, as required by Apple, we need to pop up two standard modal windows asking for these permissions.
This is usually a pretty dry step in onboarding flows. I wondered whether there was a way to make it a little more (optionally) fun.
I approached the goal of making permissions requests fun by reframing what the requests were all about: Another way to look at allowing permissions is that you're actually adding functionality to the app.
When you permit calendar access, you add your calendar events to Timeful; when you permit push notifications, you add alarms. My next question was, what's the physical interaction for adding functionalities to an app?
With this reframe, I came up with the concept of dragging and dropping icons. Dropping each icon into Timeful triggers the permission request popup.
Note that the fun is optional. For our more impatient audience, I made sure that you can still trigger the request popups without the dragging interaction by simply tapping the Next button.
Clip of Icon Dragging (Filmed in iOS Simulator):
Setting Up an Immediate "Win" in the App
The First-Touch Experience
Beyond initial onboarding, the first moments of interaction with an app are often make or break. We want a highly engaging first-touch experience that has our users coming back for more, but I've learned through many failed callout and walkthrough attempts that this is tricky--especially for a productivity tool. Timeful isn't a media consumption app with content ready to go; we need people to do a little work up front to get real value.
So, how do we clearly show a new user what Timeful's value will be to them? How can we give our users a "win" in their first session so they come back for more?
Set Up the First-Touch in Onboarding
Timeful's most magical experience is when it automatically schedules your to-do at a perfect time. Therefore, I want people to experience this magic scheduling on the app's first launch.
To have Timeful schedule a task on first launch, we need people to enter tasks in onboarding. What's an easy way to enter new data before you've seen the app and before you're familiar with its UI?
Iterating on Adding Tasks in Onboarding
My initial inclination for adding tasks in onboarding was to just let people type a few in. But, when I ran that idea by a handful of people, there was immediate resistance. I heard again and again that they didn't want to be forced to spend the time adding new things until they saw the app's value: "I'd just add Test." "My favorite test phrase is just the word Fish." "I always write Write report for that sort of thing."
What worked much better in user testing was letting people pick from a list of samples. It was quick way to add a lot of relevant information.
In working with our analytics team, I learned that more users were returning to the application when the sample to-dos they selected were repeating items. Therefore, I optimized for repeating items in the onboarding selection.
Tasks selected in onboarding are automatically scheduled the first time you enter the calendar.
The List of Sample Onboarding Habits:
Below are a few images collected from the development process.