My Capstone Journey — Pinpoint Mobile App

Florence Li-Kenno
5 min readNov 4, 2016

--

Over the last year, I’ve been a part of the Interaction Design specialization course through the University of California San Diego. After 7 courses, I made it to the ‘Capstone’ course where we utilized everything we learned to create a mobile app for our final project. Here is my journey to creating the location-based sharing app, Pinpoint.

Needfinding & Ideation

For my project, I wanted to learn more about people’s habits and routines when they need to know where there family and friends are — whether they’re lost, running late or if they arrived at a location safely. I find we spend a lot of time waiting around for people, often wondering where they are, why they’re running late and how long we have to wait for them.

From my interviews with a few individuals, I was interested in learning:

  • What do people usually do before meeting up with someone?
  • What goes through their mind when they’re lost?
  • What do people do if they are running late?
  • Are they any apps that they use to help with this?
  • What information do people give or would like to receive when wondering where someone is?
  • How different would it be if people were on vacation and couldn’t read street signs or were not familiar with their surroundings?

Could we find a more efficient way for our family and friends to know our whereabouts without always wondering, ‘Where are they?’

This is where the idea of a location-based sharing app was born.

Storyboards & Paper Prototypes

To start, I created some storyboards to flesh out some ideas where a location app would be needed. I came up with two different storyboards that would feature two different uses of the app — one was strictly sharing your location and the other was adding the option to request your friend’s location as well.

One of my storyboards for Pinpoint

From there, I created two prototypes based on the storyboards and was ready for my first in-person testing.

One of my paper prototypes for Pinpoint

Heuristic Evaluations

After I had my in-person/peer evaluation, I found there were a lot of changes needed for my prototypes. Basic things like giving more information about what to do on each screen (or even what the app is about) needed to be added. Working on the prototypes so closely, you tend to forget things that may seem glaringly obvious to others. I also needed more options to be able to go back to the previous screen if I wanted to give the user options to edit their selections for a certain screen. Re-wording certain sentences/calls-to-action would make it more clear to the user as to what they’re supposed to do.

From here, my evaluators and I were able to come up with some solutions to the issues found in the heuristic evaluations and I was ready to move onto my digital prototypes.

Digital Prototypes and In-Person Evaluations

Before starting my interactive prototype, I created a development plan so I could manage my time properly for all the tasks that were required from now until the end of the project. I created my interactive prototype in Axure and found there to be a bit of a learning curve but I was able to build out a prototype that I was happy with for others to view. I was ready for some in-person testing with my prototype.

User testing my interactive prototype on his iPhone

I was able to test with co-workers and family members so a lot of issues were worked out before moving onto my next step — A/B testing.

A/B Test

The last task for our Capstone was an A/B test through UserTesting.com. My test was to compare whether the way a user added a friend to share their location with was easier with one method over another (or made no difference). In Version A (below left), there is a [+] button where the tester has to click on it in order to add a user in their address book. In Version B, the user simply clicks on the name (or anywhere on the row) to add a user. Would users automatically understand that the [+] icon was to add a user? would not having any icons make it easier or harder?

I was surprised by the user testing because what I thought would be the more intuitive interface actually frustrated users because they either didn’t know they had to click the [+] button or they thought they could just click the name instead to add the user. Both users assigned to the A prototype took twice as long to move past this screen then the B testers. With the B test, the users were both able to add contacts from their address book quite easily. One user clicked on the name and the other clicked on the row and both were able to move on from this screen effortlessly. The clear winner was version B.

After the A/B test, I made a few more refinements and my prototype was finally done.

Final Thoughts

This course has been a fun and rewarding experience. I was surprised and challenged every step of the way and loved all the user testing exercises we were presented with along the way. Thanks to family, friends, co-workers and peers for helping me along the way!

Here is my final prototype:

http://g1j2xw.axshare.com/home.html

Here is my video:

https://www.youtube.com/watch?v=fxfFN-JLHTQ

--

--