Our 2 reasons for designing an iphone in-app tutorial

In this blog, I’m going to talk about how we approached the iPhone in-app tutorial for the Bullet Accounts iPhone App. The app itself is pretty simple to operate, so I’ll explain why we had to build a tour, and how we approached the design of it. You can download the orignal working iPhone-Tour.ai file here – each screen is a layer.

The Problem we were trying to fix

With any UI change, feature or indeed product you go to build, there should always be a good reason to do it. Adding features, or design for their sake alone, will ultimately just lead to bloat. Therefore adding our tour was driven by a problem, well two actually so lets jump to those problems.

1) Problem: 2 Different Entry Points
You can get to Bullet’s iPhone app in two ways. One, via the app store and two, via our site. This creates a user who knows about Bullet and understands how we fully integrate, and a user who arrives via the app store and doesn’t know us from Adam.

2) Problem: Communication
For both users, this tour emphasises how our app links to Bullet Payroll and it’s Money Out section. There is quite a bit of competition in the expense and mileage tracking app space. The real power we believe isn’t in the apps on their own (they’re just a nice to have), but it’s the integration that makes it powerful. We don’t just track mileage, we also work out how much you that trip was worth to you in cash, and pop that cash value into your next week’s payroll, with all the taxes worked out.

Design Process:

Feature & Function Mapping:
I start out with some really rough sketches of the app’s functions. I do this because we’ll look to create a tour mixing benefits and functions. This will cover both the user bases we’re looking to hit, and the sketches help me keep focused on that. (Sorry about the bad quality, we’ll fix that next time)

Feature and Function Mapping - iphone in-app tutorial

Feature and Function Mapping

 

Mapped Sketches – Reducing Their Number
Here, I’ve drawn out boxes mimicking the tour slides. I’ve added the ‘Key’ features and copy I want to explain my story. The circles between boxes means I’m going to merge the two – you want it nice and quick.

Mapped Sketchs - Reducing There Number - iphone in-app tutorial

Mapped Sketchs - Reducing There Number

 

Creative Graphic Mocks:
Then start mocking them up as I want to see them.

Rough Creative Graphic Mocks - iphone in-app tutorial

Rough Creative Graphic Mocks

As I’ve mentioned before, I’m a limited designer.  Drawing a hand and phone in Illustrator (my first time using it) was well beyond my skill set. John had said he liked the tour in Google’s Goggles, so I coped that slide of a hand & phone, and did a live trace of it in Illustrator.

Final Tour Slides:

Below are all the slides of the tour, the final thing we added to it was Bullet’s cheeky branding – so instead of having ‘slide to next screen’, we took inspiration from this hilarious scene in ‘Lost in Translation‘. We expanded the width out to the full 640 but set the height at 720 so you can still see the menus.

 

Menu Visible - Background Needs Widening

 Receipt Capture

Step 1/2 - iPhone-Tour-1-Snap-Photo

 

Step 2/2 - iPhone-Tour-2-Upload-Photo

 Mileage Recording

Step 1/3 - iPhone-Tour-1-Start-Journey

 

Step 2/3 - iPhone-Tour-2-End-Journey

 

Step 3/3 - iPhone-Tour-3-Upload-Journey

Let me know what your thoughts are?

Pin It on Pinterest

Share This