Bringing a Mobile App Idea to Life

My Role

Prototyping
Usability Testing
UI Design

Academic Project

As a part of a 5-week prototyping class, I worked on this project on my own. I designed, prototyped, and tested the app idea.

Concept

Between AF is a mobile app concept to help you find the perfect spot for you and your friend to meet.

Problem

You live on the north side of town; your friend lives on the south side.

You want to meet for coffee.

How do you find the coffee shop equally between you?

Project Summary

The best ideas happen in the shower

I had this idea kicking around for a while. I thought SVC’s prototyping class would be the perfect place to dig in and see if an app like this would have any traction.

I focused on making sure the app idea was understandable and that the interactions were usable. Through iterative prototyping and user testing, I was able to quickly learn how to improve the experience for the user.

“I would have used this app last week if I had it!”

- User Test Subject

Early Prototypes

Rapid Iteration

After quickly sketching a few screens in my notebook, I created a paper prototype using notecards and swapped them out as users tapped the sharpie-drawn buttons.

From there, I built a mid-fi prototype using Sketch and InVision.

User Stories

The perfect Arby's

An early user tester has an ex-husband with occasional visitation rights for their two kids. He’s in Montana. She’s in Seattle. They often argue about where the midway point is. He argues distance. She argues time spent driving. The app may not settle that argument, but at least they would have accurate information on which Arby’s to meet at in the middle of Washington State.

Test user trying to figure out what to do first

Humble Prototyping

The first round of prototypes was... let's say, humbling.

What I thought was the most logical design for the first few screens turned out to be confusing for users.

I found that the first screen wasn’t intuitive if the user hadn’t seen the app before. During an early test, the user stared at the screen for 14 seconds before asking for help: a clear indicator that the user experience was not great.

Users were asked to find a coffee shop in between their current location and their friend’s home on the south side of town. They were then given the app, launched with the first screen. I found that the majority of users were unsure of what the first step should be or what next steps to expect going forward.

Iteration

The value of labeling

I’m always happy to iterate. I like time spent refining and perfecting an idea.

The next couple of iterations were much more successful. I found that labeling is critical. By adding clear labels that guide the user through the process, they were able to confidently fill out the text fields. Once the user made it past the initial screens, the experience tested much better.

Design Highlights

Visual Information

Featuring a visual representation of how far a given location was tested well with users. The primary function of the app is to find a place in between two locations. The bars allow the user to quickly see how close to the midway point a search result is and, whether it’s closer to them or their friend. It’s a way to pack a lot of information into a small space.

Distance vs. Time

The feature to view Distance Between vs. Time Between was a result of the user story from the initial research. I hadn’t thought about the battle for the perfect Arby’s until then. So, I was sure to incorporate the feature.

Filter for Breakfast

Users need a way to narrow results. A filter system tested well. It immediately made sense to most that were tested. Filters allow the user to narrow results but with the flexibility to search multiple categories, i.e., Breakfast and Coffee.

Final Thoughts

Through prototyping Find Between, I was able to learn how users interpret my designs. I took what I learned and quickly iterated on the first screens the user sees. By changing the labels and subtly changing the UI, I was able to improve the user experience.