view more
v

About The Project

localeStorage( ), in its current state, is a prototype for sharing explicit location data, primarily for outdoor recreational activities. Users are able to paste location data or gather their current location and begin to add: gear required to get to the spot, notes to warn other users or share discoveries that were made along the way, and detailed spot directions for transportation by foot or vehicle. localeStorage stands to accomplish taking a user from seeing a photo, to standing directly in the spot where it was taken so they may experience it for themselves.

This was the final capstone project I completed when finishing my Human-Computer Interaction Certificate. I took this project from idea generation to post-AB testing results with a functional prototype. I completed all the work seen and mentioned (aside from the landscape photos provided by Unsplash) meaning I completed the research, design, prototyping, and testing in full. The prototype made is the mobile version of what would be a website.

The landscape images on the posts in the prototype were graciously taken from Unsplash.

> VIEW EVERY LAST DETAIL OF PROJECT WORK <

Storyboarding

In my storyboarding, I focused on what I saw the two main use cases to be: browsing through other social media and appearing upon a link, and searching for your next spot to hike, camp, etc. and appearing upon the site. I went into explicit detail to show a relatable and likely scenario that gives context to how beneficial the service could be.

The paper prototypes were direct complements to the storyboards made. They depict what the user would see if they were linked to a spot from a social media post as well asif they were actively searching for a new place to visit.

Wireframing

Wireframing allowed for testing and finalizing navigation thoroughly, comparative to paper prototyping, without having to worry about a style guide. Through this development and experimentation, I was able to finalize the flow the app would have up to usability testing the mockups that would come after it.

Aesthetics

The style chosen was formed in order to keep the user focused on the content of the post. Instead of focusing on getting the user to stay on the site longer, view more posts, and dream endlessly the style reflected the focus of the site: you see there, you go there. The design style chosen is minimal and attempts to equate all information to the same level of importance. For the majority of the post, all text is exactly the same size, other than the heading of that section (Spot Directions, etc.). The only exception to this is the location data itself (Address, Coordinates).

What I hoped to reflect in the site is similar to how I view pastebin: if you are linked to a pastebin, you don’t care about all the other fluff that it may be able to offer you, you are looking for exactly the content that you are getting linked to. If it’s a paste of a terrible chat log with a support line, you receive exactly that. There may be other things around that portion of the interface but due to its wide variety of uses, it correctly focuses on giving you the content you are trying to access.

Usability Testing

At this point in the timeline, mockups have already been made by the plenty. Determining whether to use InvisionApp or Pixate for the choice prototyping platform was done. Prototyping the few and heavily on-rails clicks was done. Secondary run-throughs were complete as was finding the participants.

Usability testing was conducted at each of the three participant’s houses and was filmed over the shoulder for later review. Tasks were given step-by-step in succession and consisted of finding a spot in a specific location as well as completing and making a new spot.

Problems found through these tests ranged from issues with the actual prototyping platform to multi- and single-user problems. Most problems were minor and can be found, along with every possible explicit detail regarding the project, at the bottom of this page with the assignment PDF’s. However, a fair amount of design opportunities were found and proved that some minor changes could result in a smoother experience. These changes fixed the problems and addressed the opportunities in the AB testing period.

AB Testing

AB testing was interesting to say the least. It was originally stated that we, the students, would AB test 20 users through google analytics. This existed on the assumption that most would be building their site through code instead of a prototyping platform with mockup images. It was already going to be strange if you did do it in such a way, given that you’re AB testing people instead of users since you don’t have an actual user base or people stumbling upon your site. But add a prototype that can’t be tested in such a way due to lack of analytics probing measurements, and you are left with a fun time of leveraging connections to 20 people (you need to know 20 people firstly) and recording their interaction with the site with the instructions of exactly (find a post and make a new post). This was the solution that I made at least, in order to get relevant data.

The versions tested were the difference of adding the link of “New Post” in the hamburger menu and a version without. A chi-squared test was performed on the data as well as recording and averaging of data like completion time. The numbers can be found in the PDF’s at the bottom of the page but what I learned in testing these is that the version with the additional hamburger menu link proved to be better by a large margin. Chi-squared data predicted certainty of betterment with the statistic being a hare above .001.

All Project Work

These links are all of the PDF’s I turned in for the capstone portion of this certificate. At each one you will find the entire wealth of my submitted coursework. Overly explicit details that were not covered here for sake of summation were covered in full throughout these PDF’s.

Needfinding | Ideation | Paper Storyboards & Prototypes | Heuristic Evaluation | Skeleton Plans | Ready for Testing | Usability Testing | AB Testing

The Prototype

Below is the final prototype of the site. Give it a whirl.

Go to the Invision prototype >