From Concepts to Implementation

When I'm starting a brand new idea, or I'm not fully committed I like paper that is loose.

That's when I grab sheets of 14"x8.5" printer paper.

Sometimes I need to see everything to SEE the big picture and loose paper is fantastic for spreading out on a large desk.

For me storyboarding is very iterative (I am by no means an expert).

I might start an idea on a piece of loose leaf or a napkin, and then flesh it out in more detail on a full page.

In October 2017 this was my initial sketch for my vision for the onboarding process in our "Super Easy Timer" app.

The goal was to show the user some of the features.

I really, really, really wanted to do an interactive tutorial.

So that's where we started . . .

To get an interactive timer we had to approach the UI design differently. The timer view needed to be able to inserted into other windows.

We also wanted to show videos and built a quick prototype using Storyboard and tabbed pages.

Each tab in our Tutorial window can have different content with a headline, subhead, and an some kind of multimedia content (image, embedded timer view, or a video).

Using tabs was a fast way to mock up the experience and make it easy for programmers to edit.

Future Proofing with JSON

Ideally I'd like to switch over to JSON based content, but that requires defining the types of content, and any special popover content items or animations (i.e.: dynamic callout arrows on top of tutorial screens).

The JSON format would be more design friendly, but it requires WAY more engineering.

There's more to the story than building the "best" onboarding feature. We need to ship something, and the real important part is content.

Our content needs to tell our story as quickly and concisely as possible.

Creating the User Onboarding Content

I sat down for 2 hours to review the current state of UX and UI from existing apps.

After getting some inspiration I took two paths.

First I Started to List Out the Content That Should Be Displayed

Heading copy (the benefit/feature to demonstrate)

Subhead copy (the details)

Storyboards for videos (the flow)

Second I Mocked Up a Checklist

While I was looking at examples I came across a few web apps that were doing a checklist (which seemed like a good use of gamification and open loops).

People like to cross things off, but this can back fire if your users struggle!

I know from my experience, there's one app I'm using that wants me to enable Notifications. It won't let me check off the final item until I do, and I won't.

I don't want to be interrupted.

The checklist onboarding is neat because it would allow us to move the interactive tutorial outside of our initial user onboarding screens.

We can incentivize our users to try some of the other ways to create timers using a checklist.

It also means that my initial idea for an interactive embedded "timer" in the tutorial onboarding might have been a bad idea.

AND we spent a good deal of time working on that feature . . . thankfully we are using it to implement our mini-mode and large-mode feature, so it works out if we cut interative timers from the tutorial.

Improving the checklist

We could craft a nice little window with checkmarks for tasks completed, and even provide content for how to do a task with an embedded video/description. See the sketch above for my quick mockup.

Storyboarding the Tutorial Screens

It became clear that I needed to capture a whole lot more details for what content we would show in the tutorial screens.

Here's what my next iteration of storyboard screens started to look like:

Going through this iteration phase was essential for starting to figure out all the pieces we would either need to build, or the modes we might want to support (development time).

Again, this was very rough, but it was enough to pass off to Luke (my intern) to code up the initial experience for our beta testers.

The Importance of Storyboarding

I took for granted the power of storyboards for videos. Especially when I don't create the videos . . .

Luke quickly threw together some videos, but it was clear from my initial storyboards that you need to capture the timing and the feel.

It's hard to hand off a storyboard to someone else and have them implement it. Especially when you want them to capture your vision.

The more details you can capture in your storyboards the more likely someone else is going to be able to understand what you want to convey.

Watch the Super Easy Timer Onboarding Experience

Let's dive into what the onboarding feels like:

Watching our video you can see how the embedded videos create a fun experience.

We might scrap the inline interative timer in a future beta, but to keep things simple, we're going to ship our beta test as is.

No new features, just copy and video tweaking for this beta test.

What App Are You Making?

Do you need to onboard users for your app?

Share a sketch of what you're planning to do for when someone first opens your app.

I'd love to see what you're working on. If you have questions, email Paul@SuperEasyApps.com with the title "[Super Easy Timer] User Onboarding"