Prototyping a Self Exploration Mobile App

For the past year, I have been enrolled in series of Interaction Design classes which has culminated in a capstone project, where the ultimate goal was to create my very own mobile app prototype. The process was at times frustrating, rewarding, confounding, and yet enlightening, sometimes all at the same time. Let me walk you through the steps that this 9 week process involved.

The first step to the prototype was identifying a problem. As someone who has personally struggled with self exploration, and creating a system of steps through which this could happen, and to keep myself accountable through my self exploration and be able to identify concrete steps to see my progress, I decided to make this problem the one that I would have my mobile app address.

One of the most important things this class has taught me was that too many start-ups and companies come up with their ideas without speaking to the public and making sure their idea addresses an actual problem in society. So the first step after identifying the problem, or (more accurately) what I perceived as a problem, was to go out and interview some people and see what sort of strategies they used to solve this problem, if there were already effective solutions, and if these interviews might offer me some sort of insights into how I might solve the problem with a mobile application. To be clear, these steps could be used for almost any type of digital tool, but we were limited to creating a mobile app for this project.

My interviews gleaned some useful information. It wasn’t just me who struggled with self exploration, but many of my friends also did not know how to hold themselves accountable or find tangible ways to assess their progress in this important area of life. Some of them tried using to-do-lists to little or no avail, others just kept nebulous track of these goals through a mental map of their own progress. None of the people I met were already using any particularly useful tools for this process, the closest were apps like Soon which help keep track of things you’d like to do in the near future, primarily very tangible things like books to read, movies to watch, and places to visit.

The SOON Application

After deciding that my application was still viable and taking note of my interviewee’s feedback, the next step was to investigate any existing applications doing the same thing or similar things to what I wanted my application to do. At this point I actually hadn’t completely solidified what I wanted that to be, I only knew that I was interested in how people kept track of bucket lists and big ‘meaning of life’ type personal discovery goals.

I came across some interesting apps, mostly in the territory of bucket lists. Some of them even tempted me to sign up, especially those that created a social experience and some friendly competition around reaching your bucket list goals. Bucketlist.org is one of these examples, which gave me tons of ideas of things that I wanted to do that I didn’t even know about!

Bucketlist website

The problem that I noticed with a lot of the bucket list apps was that none of them really helped people accomplish these goals in a step by step manner. Nor did it help them identify goals that were in keeping with who they are as a person. After all, the most meaningful goals are tied to self discovery and personal development, but these apps didn’t seem to make that distinction.

So my next step was to make some storyboards with a range of ideas from what I had learned so far. This was a fun part of the process, because it involved posing a problem visually with little cartoons and showing how the problem is solved from the user perspective, where the app intervenes in the process, and how the user feels once they are finished. It isn’t supposed to go into many details of the app at all, but rather convey what the user gets out of your app in just a few cartoon panels.

It ended up being pretty challenging, especially because conveying an existential crisis does not come easy with sharpies and a letter size piece of paper. Perhaps because I was already thinking one step ahead of the curve, I found story-boarding to be less useful, though it was very fun to create these doodles and see everyone else’s ideas. It opened my mind to just how many app ideas were out there, that could still be implemented and solve real-world problems.

If you are still reading this you are probably wondering why there were so many steps. One of the important tenets of Interaction Design is going from low fidelity and drawing/wire-framing things in a very fast, experimental way where the process from low to high fidelity is a slow one. This is because the higher fidelity you are, the closer you ought to be to your final product and the more difficult it is to make changes. Keeping this in mind, it makes the most sense to extend the earlier steps of the design process so you can avoid the pitfalls of creating something high fidelity too soon and then wasting a ton of time rehashing it when you get negative feedback (which lets face it, every design does).

We were finally starting to move into the latter steps, however. After story-boarding I was able to start sketching out on paper some potential user interfaces. These very early drafts of interfaces were then tested out “Wizard of Oz” style where I would shift the cut out pieces of the interface around in order to replicate how it would behave were it an actual app.

I created three interfaces, and ended up going with the simplest one, which reduced the process of self-discovery to just three steps: identifying past issues or haunts that you would like to be rid of, providing your core values, and identifying small week-long tasks that are in sync both with your core values and relate to overcoming your past issue/haunt. It was a major decision, and though it felt like a compromise with my more ambitious ideas, I decided that anything more would end up being either confusing or disappointing in the end. At least it was still a rough draft, and I hoped I could refine it and become happier with my decision in the next steps.

Only after a series of these “Wizard of Oz” tests and wire frame refinements from the results were students finally moving into the actual mock-ups of our app. We were free to use whatever tools we wished for the mock ups, and so I went with Photoshop because I have used it for years and am familiar with the interface. Looking back, though, I rather wish I had used something more geared toward mobile app design like Sketch. This was a stressful phase of the project, because I had to make some commitments that seemed a little bit rushed, but there were also some moments of epiphany where I thought ‘hey, maybe this simple interface really has something special after all’.

You might be wondering, what is the use of a tool like Photoshop where all you can do is make static screenshots of different pages of your app? Doesn’t this thing need to be interactive? Yes, you are right. Luckily there are tools created just for this purpose, allowing the designer to plug in their screenshots and controlling where the user clicks and what sort of change will result. My personal preference and the tool recommended by the professor was invisionfree. Free because yes, you can create one interactive prototype and share it on the internet without paying a penny.

I was pleased with how simple and straightforward invisionfree was to use, albeit plugging in all my screenshots and making sure I didn’t miss highlighting any buttons was a tedious affair, it’s still worth it to convey exactly what your finished app would look and behave like. My app not only looked like a real app, but could actually be interacted with! I couldn’t help but feel proud of what I had accomplished, being able to actually click around and see my ideas finally as reality. Now that my prototype was complete, there was one step left to do. Another phase of testing, this time with strangers on the internet.

This is where another tool comes in. Usertesting allows you to set up audio and screen recording of your prototype and ask the user a series of questions which they answer orally, via multiple choice, or even written answer format. You can even define specific steps and instructions for the user as they go through the process. When they are finished using your app, the video of their interactions gets sent to you along with all of their narrations and thoughts as they used it.

Actually at first I had a really hard time watching these videos, because I was overwhelmed with fear of negative feedback. However, with the help of my husband and taking baby steps I finally dove in and watched the four user feedback videos I received. Overall, the feedback was positive and only a few user interface issues were presented. This was such a relief, and such a boon after all of the hard work I put into the project. Although I still have a lot of work to do if I want to publish this app to the marketplace, I now know so much more about the prototyping process and the viability of this type of application. I haven’t decided yet if I will program this app or not, but I am certainly inspired and motivated to keep looking into it.

Interested in seeing the final prototype? Check it out here!

https://invis.io/JN9VUVQ5K