Designing A User Flow
As of right now, I am so far from finishing my very first app. I am a little closer today than where I was when I began this process a few weeks back, so I suppose that’s what counts — step by step, bit by bit, right? For those just tuning in, I’ve decided to teach myself how to build iOS apps and publish my process along the way. This is the 4th installment in the series, all other posts can be found here.
This app will provide a simple, fun way to meet people that are going to be on the same plane as you, for better or worse. Ha.
Although it feels like I’m miles away from completion I can’t help but get ahead of myself. When I dedicate time to this project my mind begins to race — I’m swept away into a daydream about what it will look like, how it will function, and what it will be called. What will it be called!?
These sorts of macro-questions, to me, are the fun stuff. I love envisioning the big picture, and trying to imagine what the best possible outcome looks like. Honestly, it makes the micro-work, namely learning to write iOS code, much harder. I’m tempted to jump to the end but in reality that’s impossible until I spend the time and do the hard work. This I know.
Regardless, the other day in a moment of weakness I let myself indulge. One of the most fun daydream exercise for me is thinking about user flow. This is the path that a user experiences as they navigate through the app. Ideally, you want this path to be as frictionless as possible. It should be fun and effortless, a joyous experience for both n00b to seasoned iPhone vet. Every user, from grammas to kiddos, should be able to locate the area of the app that they were looking for simply and efficiently.
It’s important to think these things through in detail so I figured I might as well take a stab now and revise along the way. Anyhow, without further adieu:
Here’s how my app will work, maybe.
The below will serve as a crappy sketch of a blueprint. An initial stab at how a potential user could flow through this app. I’ve done my best to think through every interaction a user might have. What’s the first thing they see? How will they get from point A to point B? Why type of experience do I want them to have while in the app’s ecosystem?
Upon first downloading / opening the app you’ll see a neat little title screen, perhaps with a little animation to welcome you. I love these things. You can be so creative here and really make the user feel safe as they get their very first impression of their new toy.
Next, you’ll be marched through a simple information gathering flow. Big dumb questions will keep it light and easy while collecting the bare minimum amount of information. The flow moves left to right:
When are you flying? > What is your flight number? > On what airline?
This will give the app enough info to find your specific flight and check if anyone else has joined the session yet. Once you’re happy with the info you’ve given the app, you hit the “Meet people on your flight” button (right).
Depending on whether or not there is anyone logged into the flight yet you’ll see one of the two screens above. If there’s already a session open for your flight, you can join it right away (left). If not, the app lets you know that you’ll be notified when someone else joins (right).
For me, signing up for new services is always a daunting process and pretty much a major turn-off. I’ve tried to minimize this so people don’t get pissed off and bail.
In this user flow, you’ll see the signup requirement at the same time that you learn whether or not anyone’s on your flight yet. Ideally, this will encourage new signups because you’re staring at a real incentive to continue forward.
Also, I’d like to figure out a way to eliminate passwords altogether. Not sure how to do that, or if it’s even possible, but I think with some combination of email verification and usernames I can get there.
When you log into the open session for your flight you’ll immediately be taken to an all-plane chatroom – AOL style (left). Super simple, just text to begin with, one message after another.
The two buttons on the bottom of the flight chatroom toggle between the chatroom and the list of participants (middle). Clicking on the “Participants” button gets you a list of everyone on the flight. By tapping on a username you can see details about that person (right).
Now, this is where it gets a little testy. Everyone I talk to about this app raises concerns about privacy. Nobody wants creepers getting a bunch of info about you before you get onto a six hour flight with said creeper. So to mitigate this, profiles by default will only display a username and a random dummy avatar. You’ll be able to adjust your global privacy preferences in the settings. Alternatively, you’ll be able to tweak your individual, person to person, chat privacy settings. So, for instance, you can set your account so that the whole plane can see your username and bio, but if you start a chat with a funny boy you like you can choose to reveal to him and only him your picture(s), hometown, seat number, or any other pieces of private information.
This last flow mockup (above) represents how a home screen could function for a return user, i.e. someone who is firing up the app for the second time. You could also access this menu from within the app at anytime by clicking the “⌂” icon in the top right corner. Clicking “New Flight” at the top would walk you through the same initial flow that we started with. “My flights” would show you a list of all flight sessions new and old. “Chats” could be a simple, quick list of private chats that you have going so you can access them easily. And “Profile” would be the place where you’d input information about yourself and adjust your privacy settings.
Boom.
Dang.
Walking though all that has been revelatory. Not only was I forced to think though user scenarios that I hadn’t before, but I came to realize that this app is pretty dang complex. In order to pull this off, not only am I going to need to be able to display pretty information on a screen, I’m going to need to have a firm grasp of push notifications, I’ll need to find and implement a simple chat protocol, and I’ll need to build a database that can record all kinds of information like usernames and such. I don’t know how to do any of that stuff and I’m pretty sure it all goes beyond Swift, the programming language I’m teaching myself.
It is with this realization that I pause for a moment to think about how I may be in way over my head here.
I also realize that this flow probably has gaping holes in it and for right now, that’s ok. Please, if you see some or have any advice, thoughts, suggestions or comments, feel free to leave them.
Nothing left to do but plow forward.
Next time: But wait there’s hope! Learning Swift so far has actually been easier than I thought. I’ll fill you in on my progress learning a new language.
