Introduction: Paper Prototype for a Mobile App

About: I am a former community manager here at Instructables. I'm interested in baking, crafty things, and learning new ways of making!

For my first project in an intensive UX design course I was given 3 days to create a paper prototype of a mobile app for a partner in my class and to present it to my fellow classmates and instructors.

That may sound like plenty of time, but everyone in my class is really talented and trying to make sure that my app and presentation were up to snuff took a lot of effort!

Step 1: Interview

The first step in our prototyping process was to interview our partner about their daily lives and try to find a pain point where an app could help them solve a problem.

My partner likes to run. He currently runs a few times a week and can run as far as 6 miles. He is planning on completing his first marathon this summer. He wants to have a more solid running routine that will put him on the path of having a successful marathon in 6 months, but he doesn’t want to have to comb through websites and forums to find a routine. He wants something that is more interactive than just a flat training schedule.

This sounded like an exciting opportunity to explore how to make a customizable scheduling app that would adjust to my partner’s specific needs. It also needed to be a good motivator for my partner.

Step 2: Research

After learning about my partner’s problem, I began to research current marathon training strategies. I read a lot of articles and looked at training calendars online.

Looking back now I regret not looking more specifically at apps that attempt to solve this problem. Or at other types of calendaring or goal setting apps. I think that if I had pulled more app ideas together and presented them to my partner and let him choose his favorite features early on then I might have had a better handle on what specifically my partner was looking for.

Step 3: Storyboarding

Our next step was to begin storyboarding the interaction that our partner would have with the app.

This was really helpful for me. As I put my ideas down on paper, they became a lot more clearer and I could then add more frames and really flesh out the interaction.

Step 4: Feedback & Adjustment

I presented my storyboard to my partner, and he liked that the training regimen was created based on the data that he put in, and he liked the option to opt out of a given workout and receive a substitution. But he stressed the desire to see a stats or achievement page and said it would help him to stay motivated if he could track his progress.

We also talked about having the app work with his phone’s GPS so that walks and runs would be tracked automatically.

I went back to my storyboard and added a stats page that included an activity log, I fleshed out the features of my workout prompt pages, and started dabbling with GPS synchronization and what that would look like.

I also started to develop a weekly calendar that the user could then customize as their schedule changed.

Step 5: Sketching

When it came time to sketch my first prototype of the app, I knew that I had to focus and cut out some of the features that I had been playing around with. I was still really liking the customizable calendar idea and the option to refuse prompts and receive different ones. I felt like I hadn’t really seen that in an app before and I could imagine how the flow for it would go.

Step 6: Speed Dating

For the next step of our project, we took our sketches into a speed dating activity where we showed our sketch to 5 of our classmates for 5 minutes each and got feedback from them on the idea and functionality of our app.

My takeaway from this exercise was that the duplicity of a monthly and weekly calendar was confusing and also that the opt out was confusing. I showed my sketch to my partner as well and he was still pushing for a stats page (I had left it and the GPS feature out of my sketch for the sake of clarity).

With this information I went back to the drawing board to create my final prototype.

Step 7: Prototype

I wanted my final prototype to be as close to full functionality as possible. I wanted to create something that was free of dead ends.

Ultimately I dropped the GPS feature, but I did add in a stats/achievement page as I knew this was really important to my partner.

Step 8: Takeaways

It was really interesting working on this project and trying to execute on it in such a short period of time. Looking back I would definitely spend more time exploring other fitness apps and sharing really rough ideas with my partner in order to find his likes and dislikes early on.

In the end I was happy to have created an app that can function from one screen to the next and that provides customization for my partner’s training routine. Putting back the stats page for my final prototype was the right decision as it was a really important feature to my partner and added more of a motivational factor to the app.

One of the things that our instructors stressed in the first week was how important it is to trust your design making decisions, and I definitely saw how that was an important factor in completing this assignment. While more research in the initial drafting phases would have been helpful, I couldn’t hum and haw over it later on down the road. I had to trust in my own intuition and execute my design decisions in order to complete the project.

Tech Contest

Participated in the
Tech Contest