Textie: Onboarding

Something a little extra for the app.

To do some additional elaboration on Textie, I designed a built out onboarding experience for first time users of the app.

What needs to be taught to users?

Onboarding includes two things: the initial set up, and an instructive introduction. My team did a bit of work in the former area for our original task flow, but that wasn’t necessarily fully complete. Identifying gaps in the map helped create a checklist of what to cover with this extra credit assignment.

I annotated my team’s original task flow to understand what more had to be done.

Initial setup

Here users input settings that are required to get the platform to work for them. I needed to get users to:

1. Import chats from elsewhere. Textie sources conversations from outside apps like iMessage and FB Messenger. To have a daily summary, users first need to set that integration up.
2. Turn off notifications for competing message apps. That may sound like I’m trying to establish some kind of nefarious monopoly, but this is necessary to making Textie effective. To not be distracted until your Textie time, you have to silence peer applications and let us ping you once to address everything that was withheld up until that point.
3. Identify and set a Textie time. Luckily, my team already made this screen for the main assignments.

Instructive introduction

Here users are taught how to navigate a platform that’s unfamiliar to them. In this arena, I needed to show them:

1. Where to find conversations on the homescreen.
2. How to navigate between conversations in the story view. This was important because in general our chosen UI is a new paradigm for viewing texts and people need to know to swipe left and right if affordances fail.
3. How to reveal conversations. We initially hide actual texts to limit cognitive load until users are ready, but of course, people will eventually need to read messages.
4. How to exit. Especially since one thing we learned from the usability test is that education was required around this.

Task flow

By organizing the checklist items above into a linear map representing how users would step through the onboarding experience, I created a task flow diagram.

Wireflow

Wireflowing was simply a matter of turning each step(s) in the map into a low-fidelity screen to get a more concrete idea of how an interface might allow users to accomplish those tasks.

This organization of screens maps to the structure of the above task flow.

Mockups

Initial setup

Bringing the wireflows to life was firstly a matter of extrapolating what intiial set up screens might look like based on the existing UI of work done to date. The existence of the Textie Time screen as part of my team’s original work helped provide a great model for what conversation sourcing, notification set up, and permissions might look like.

👆 Conversation sourcing. 👇 Notification setup.

Instructive introduction

In this space, I leaned on other apps for cues on how to onboard users as the work done to date on Textie had no good examples for approaching this. TikTok came to mind as its popularity obviously speaks to how devastatingly effective the first-time experience is.

Noted: interstitial instructions, explicit indication of what gestures required to interact.

In particular, I wanted to make good on creating a task-based experience where rather than merely telling users how to do something, each piece of copy would be a clear prompt to take action that would simultaneously educate about how to move across the app.

👆 Textie time (slight adjustments made) to homepage (with new gestural instruction). 👇 In-story interaction guidance.

Interactions within the summary stack are both the most important (since texts-as-stories are an unfamiliar pattern) and dependent on detailed timing and animation, so I also prototyped what that might look like.