Rapid Prototyping of a Mobile App

This is a case study for my first project in the immersive UX Design program at RED Academy. You’ll find my research, planning, design, and testing process outlined below.

The Opportunity

We covered a lot this first week at RED, and I’m buzzing with ideas & excitement to learn more about the UX process.

Our first project, which we did over the span of one week, was to rapidly prototype a simple mobile app that solved a problem for one of our peers.

Here’s what I’ve been up to this first week at RED!

Research

The first step of this project was to identify a need my partner has that could be addressed through the development of an app. To do this, I interviewed my partner.

Writing my interview script was challenging without knowing exactly what I was looking for. The exercise definitely helped me to understand the importance of well-structured questions when conducting user research. After some follow-up conversations to the initial interview, I had a good grasp on my user. Based on the information I had gathered, I created a persona and came up with an idea for my app…

My User Persona

My user is a young professional whose busy lifestyle has caused her to find she’s been neglecting her photography hobby. I decided to design an app that could help her identify cool places to take photos nearby, in any city she finds herself in — helping her to stay inspired! Notifications can remind her when places she’s saved to her list are close by and/or it is a good time to shoot them, giving her an extra push to get out there and practice.

Planning

The next phase of my project was planning the flow of my app. I started with brainstorming and storyboarding scenarios in which someone might use my app. This helped me to both build empathy for and gain objectivity from my potential users by stepping out of my own frame of mind. The exercise was an important piece when deciding on my app’s necessary features, as well as in determining user goals.

One early use scenario represented in a storyboard.

From there, I began working on a primary user flow. The primary user flow focuses on a typical path that a user would take when using the principal features of the app. This started with pencil & paper as I walked through all of the steps the user would need to take to achieve their goals. After several iterations, I digitized my user flow. During this process, I was able to further prioritize the app’s features and articulate the simplest path for the user.

My User Flow

My app’s features:

  • Browse great places to take photos in your area
  • Filters to browse by category, proximity, popularity, or best time to shoot
  • View a profile for each place showing its proximity, whether it’s indoor or outdoor, and best time to shoot
  • Save places to your list
  • Option to set notifications when user is close to a saved location and/or the best time to shoot is coming up

I’m a visual person, so the planning and design phases overlap a little bit for me. Once I had a rough flow, I began making my first round of interface sketches. Figuring out which interface elements would be used to navigate my app was a key part of finalizing the steps of my user flow. Quickly sketching out my screens helped me to be confident that it was as accurate as it could be before moving on to higher fidelity sketches.

Sketches that helped me refine my user flow.

Design

I created a paper prototype of the screens a user would encounter while following my primary user flow.

Working from the rough sketches I already had, I did a second iteration of my interface designs, making them clear enough to be used in my clickable prototype.

My interface design is minimal and clean, making the app enjoyable and appealing to my creative, tech-savvy target user. I incorporated patterns that users are used to in mobile design to make the app as intuitive as possible.

Low-fidelity interface sketches of the Photohunter app

My design makes use of icons throughout its interface to help users navigate through the app and use filters. This is done to avoid interruption (such as navigating to a new screen to select filters) as much as possible. A back button is consistent across all screens once the user has taken their first step — users can go back as many times in a row as they would like. These design decisions were made to ensure the user does not lose their place, which was determined to be a frustration point in the research phase.

Prototype

Here’s a link to the clickable prototype of my app, Photohunter, made with my pen & paper interface sketches using an awesome app called POP.

A quick note on testing out my POP prototype: it’s preliminary! Not everything is clickable, and its meant to demonstrate key features through a pre-defined path. Tap anywhere on a given screen to see the clickable areas outlined.

Usability Testing

Once I had the first version of my prototype complete, I began my testing phase. For this project, I carried out usability tests with five different subjects. I gave each user a quick brief on the idea behind the Photohunter app. I also told the users what their goals were during this test: log in with Facebook, add a photo to their favourites list, and review their favourites list.

During these tests, I let the users carry out these tasks completely on their own. I asked users to verbally walk me through the steps they were taking, and recorded them doing so (with permission).

This quick first round of testing provided me with some useful insights. All five of the participants completed the tasks assigned in under two minutes. The feedback I received from the users was positive — users felt the app was intuitive. The user who had the most difficulty performing the tasks mainly struggled with adjusting to the functionality of POP, which let me know that I should have outlined it for the users prior to testing.

Several users mentioned that while the app was easy to use, they would have wanted a little more discovery. Based on this feedback, I added an 8th screen to my prototype. This screen allows users to see the option to set notifications, giving users a more complete picture and a greater sense of satisfaction.

Summary

This project has provided me with great insight on how the UX research and planning phases can and should shape the design of any product. I was able to better understand my user after conducting research, and the planning phase forced me to really refine my product through multiple iterations of the user flow. When it came time to sketch my interface, the design seemed to fall into place quite easily after having gone through the research and planning phases. I would say this exercise in rapid prototyping was a success, and I‘m looking forward to continue to grow my knowledge of UX-focused design :)

Like what you read? Give Zoë St-Aubin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.