Rapid Prototyping of a Mobile App

GA UXDi Project 1

Jon White
7 min readJun 25, 2016

This was the first project on our course and we were given the task of creating an app that solved a problem that one of our colleagues encountered in their day to day activities. Sounds simple right? Well, it did to me. At first. Then I looked at everything I would need to know what to do to make this happen.

Skills Used: User Interviews, Concept Mapping, Storyboarding, User Flows, Sketching, Wireframes, A/B testing, Wireflows, Prototyping with Marvel, Presentations.

Oh, and it was a 1-week sprint. Which was actually more like a 3-day sprint. So yeah, not as simple as I thought it was going to be.

A journey of a thousand miles begins with a single step. — Lao Tzu

The first step on my thousand mile journey was to interview my user, Farida, and draw up a concept map of everything I could find out about her from a conversation.

My lovely user, Farida, in concept map form

As you can see above, there’s a lot going on. I set about trying to figure out an area which she needs help, and specifically a part of her life that an app would make better.

I found out that Farida likes to plan. Anything and everything is thought out in detail before actioned, work and pleasure need to be put into an itinerary which causes a conflict. What if the act of putting that itinerary together puts my user off the very thing they were trying to plan? And what if that stops the planning any similar activity in future?

The casualty here was holiday time. The amount of work to be put in to book holidays was too much hassle to be worth it.

“By the time I know I can go on holiday, it takes so much effort to find the right hotels, flights, what have you, that I can’t really be bothered”

This was my chance to improve an aspect of Farida’s life, and maybe, just maybe, get her that beach holiday that she was dreaming of. The next step was to draw up a list of questions that would allow me to define the scope of my app and get down to the details of what functionality would make life simpler and more enjoyable.

Knowing me, knowing you

Interviews

My initial questions were a fact-finding mission:

Tell me about the last time you booked a holiday.

What was the reason you decided to go away?

Where did you look for inspiration?

Where did you book?

But by a few seconds in to the first question I realised that the problem was clear. The amount of work Farida was putting into booking a holiday was too extensive, what she wanted was an application that did the ground work for her and presented her with a list of options that were right for her.

“Essentially what I want is a P.A. that gives me a list of options that I know I will like, and I can go from there”

Right, there it was, the issue in a nutshell.

Farida wants to plan a holiday, but when she realises that she has free time it’s too late to plan one.

What if there was a way to help Farida book a holiday quickly and easily?

Now I just have to design the thing.

User Flows and Wireframes

I knew from the conversations and the interview that the last thing my user needed was a complex solution to her problem. Essentially she wanted this:

The ideal user flow for Farida

Of course, the actual user flow would be slightly more complex as there’s a bunch of steps that we assume in the map above. It ended up as the user flow below:

Simple complexity

Easy enough to feel like it’s simple, but with options enough to provide some choice in the destinations rather than ending up with an Orwellian app that chooses your holiday for you whether you like it or not.

If the user flows are a little dry, why not check out the storyboard I did instead:

A storyboard deserves the widescreen touch

Wireframes

After establishing the user flow, it was time to build some screens, and to do that I drew up some wireframes of what I imagined each screen to look like.

They had to hold just the right amount of information so as to provide insight without overwhelming the user. I started with a lot of options, then stripped it back, as you can see below.

Initial Home Screen designs

Very busy home pages, with weather updates, a miniature profile and welcome screen, too much going on.

Initial Profile Designs

I’d like to have the profile filled out as part of the onboarding process to help refine the recommendations a user would receive.

Iterations on the initial screens

Initial designs had a lot of information and as I worked on the iterations, I started to strip back a little each time to try and simplify.

I also made sure to give options in the designs which I would bring back to my user, Farida, to see which she preferred which was A/B testing at an early stage and this led me to keeping it simple.

Getting user feedback was crucial during the wireframe process. It let me know where steps were clear, where screens needed additional copy, where there were dead ends, and where I was on the right track.

A great example of this was on the calendar screen where I thought it would be pretty obvious what you needed to do to pick the dates of your travel. But without copy to guide the user it ended up being a stumbling block that caused confusion and irritation. A simple line of copy saying “Pick the day you want to fly” made it much smoother and reduced the time spent on the screen massively.

It was great to go through that process because I realised really quickly how easy it was to get things wrong if you don’t take into consideration how your user is going to interact with everything. UX is, obviously, the User Experience and solipsism is completely at odds with that.

Prototyping

Using Marvel, I uploaded the final wireframes and put them into a clickable prototype, which you can find here: https://marvelapp.com/geb4i9

I’ll be working on updates to it periodically and I’ll try and upload each version to show my iterative process.

If you don’t want to click through it, check out the screens below for a small glimpse of what it looks like right now:

Home Screen and Calendar Screens with copy

Testing it with Farida was a pleasure, and it was great to see that what I’d done helped solve her problem.

“It’s such a simple process, I love the idea that things that I like would appear in the recommendations”

As a work in progress at the end of a sprint I’m happy with what I’ve made so far and I’ll be looking to improve and make changes moving forward.

Next Steps

A big feature that I want to include is a way of importing any calendars or schedules you may already have on other platforms into the app. This would allow the app to send push notifications to users of any upcoming free time.

I would also like to mock up the onboarding process to show a clear method of gaining the information that the app would need to make recommendations, and also how the information gathering would continue at un-intrusive points during use of the app.

Finally I would like to add functionality to link friends and family to your schedule. That way, if you have the same time off as others you can all book a trip together.

So that’s it. Week one, project one, done. I hope you enjoyed reading about it as much as I enjoyed working on it, and I’ll be updating you regularly on the progress and any findings I may make.

Follow my progress on Medium, or follow my musings on Twitter @jonwhiteux

--

--

Jon White

User Research @ Bookatable — all views are my own!— follow me on twitter @jonwhiteux