fall 2014 — Independent

Loco

This is an independent school project that involves app analyses, user flow, wireframes, visual mocks, prototypes (Marvel/Origami), and an app website completed in 12 weeks. Thank you to the Facebook design team (Andy Chung, Vivian Wang, and Brandon Walkin) for partnering with my class for weekly critiques and support. You can view the Loco prototype here, and visit my process site here.


PROBLEM

Travelers have to know a local, book a tour guide, or bump into a local that offers to show them around in order to fully experience a new city. 


SOLUTION

Loco bridges the gap between travellers and locals so that they can experience the culture and places they visit opposed to only seeing tourist spots. 


The Process

LOGO

 I've decided on the name 'Loco'. I chose this name because of it's simple and sounds like the word 'local'. I chose to go with a balloon as my product icon because to me, balloons represent curiosity, fun, and being 'up in the air'. Balloons go where the wind takes them. I want my brand to have these similar characteristics. I also think a balloon is a unique visual representation instead of the typical location pin, map, or plane icons. 

LO-FIDELITY WIREFRAMES

 

HI-FIDELITY SCREENS

On-boarding

User onboarding is the user’s initial experience with your brand and product. It spans from the moment someone starts to sign up for your product, until the moment they realize how your product is going to improve their life. I wanted to ensure that users understand what Loco does, how it will benefit them, and ultimately show them how to use the app. 

1_onboard2.png
 

Discover

Let's say you're planning to visit Toronto. Simply search for the city and add filters to browse a list of potential locals that can show you around. Instead of showing a grid of popular photos and spots, I chose to focus on local profiles so that the traveller can learn more about the guide making it easier to find a match, instead of only learning about a hotspot. 

 

User Profile

There are three tabs in the user profile page; About, Spots, and either Request or Tour. If you're on your own profile, it will show your upcoming/pending tours, and if you're viewing someone else's profile, it will be a request form instead.

Communication between Travelers and Locals

When a tour is confirmed, the conversation will have the  trip details on who the travellers and guide are, as well as easy access to the itinerary all located in the pinned tab at the top of the screen. This tab can be collapsed to allow more real-estate space.  

7-itinerary.png

My final vision for Loco is a straight-forward one-page site where the user learns about what Loco is. I used the pagepiling script and have the different features shown in separate sections. Instead of implementing videos, I decided to create a few gif animations to help demonstrate some of the interactions for Loco. Check out the app site here. Please give it a few seconds for the script to load properly! 

When creating this site, I was really inspired by the new Google Calendar app site, InboxPaper by 53, and Facebook Paper. Although mine looks quite different from theirs due to my coding ability, I'd love to be able to learn how to create prototypes, and app sites like that.

App Site