YSDN 4003 | Interactive System Design | Documentation Site

Final Site

View my final site here: Loco app. *It might takes a few seconds to load!

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. Adding the download button on the menu bar is a great call-to-action especially for the users who don't want to read everything.

When creating this site, I was really inspired by the new Google Calendar app site, Inbox, Paper 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 one day.

Overall I'm extremely happy with my final product, from ideation to execution. Thank you David, and the Facebook team for giving so much support, feedback, and time! It's been such a great learning experience working with Facebook. :)

Updated Nov 30, 2014

Rough App Site

For my one-page app website, I played around with the Pagepiling.js script. I want to use full-sized photos to make users feel wanderlust, and to have the desire to travel. Currently for my rough site, I have the static mobile screens under each section. I want to replace those with animations later on to demonstrate how the app works. I may also consider adding a final ending section for call-to-action, where to download etc, to make it feel more real.

View rough site.

Updated Nov 25, 2014

Final Video Sketches

These are my final videos. I had to think carefully about which interactions to demonstrate as well as how the screens transition between one another. The videos below show some of the highlighted features of the app, and shows cool interactions that enhance the user experience. (See week 8 for more basic interaction demos.)

Sketch 1. Search and profile.
When onboarding is complete, the user lands on the discovery page. In this video, it demonstrates the search process, and how you can scroll through a user's photos before clicking to see their page. Once you're on their page, I've created a sticky tab feature where the 'about', 'spots', and 'tours' tabs stay at the top when you scroll down. This is an important feature because it helps the user navigate between tabs easier no matter where they are on the screen. The user avatar section also shrinks so that it saves real estate space.

Sketch 2. Pinned detail, viewing itinerary, and message.
This video shows the interaction of hiding the pinned tour details when a user is looking at the itinerary. This is important because it helps save real estate space. The pinned detail is also convenient for users to know what they're looking at, and to quickly contact the traveller through that.

Sketch 3. Sharing a photo spot.
This video demonstrates a user sharing a photo. Once the photo is shared, there is a tiny delay before the photo appears on the stream. It follows the standard Android sharing photo interaction.

Updated Nov 17, 2014


Worked with Andy and Brandon in class today for more advanced videos!

Updated Nov 11, 2014

Initial Video Sketches

First time playing with Quartz Composer. Not quite sure how to change the device into a Nexus 5 at the moment so it's a little off but I managed to play with a few animations. Definitely still have a long way to go!

Sketch 1. Filter slides up from the bottom.

Sketch 2. Side menu is revealed.

Updated Nov 4, 2014

Finalized Hi-Fi Screens and Prototype

This week, I revised every screen that I had made previously for pixel perfection as well as some larger improvements.

  • Removed the tour fees because it was socially awkward which would scare off people.
  • Added a filter for search, making it easier to find people with similar interests.
  • Improved onboarding to understand the goal of the app and how to use it better.
  • Travellers have the option to choose to request a tour, or just an itinerary.
  • When viewing your own profile, it will say 'Tours' so you can view upcoming/pending tours, but when a traveller browses your profile, it will show as 'Request' for them. I realized it didn't make sense to show 'Request' if you were on your own profile.
  • Created an 'View Itinerary' page that is shared between local/traveller.
  • Added a tour proximity map in the user's about description so that travellers know what area the local gives tours to.

  • Loco Prototype
    Just a note for the prototype, there are 2 use case scenarios combined into one prototype. Melissa Florres is a traveller where she searches and requests a tour with Fiona. After she finishes requesting a tour, the rest of the screens are from the view point of the local, Fiona Yeung. I did this so that you can see what the app would look like for both types of users. Loco Prototype using Marvel.

    Improved onboarding set: I wasn't happy with what I had the previous weeks so I did some onboarding analysis! I decided to show the interface so help communicate more easily what the app does instead of only using words + travel-related photos.

    User Profile from traveller's view:
    The request form is a bit simpler now with straight-forward options. The traveller can add other people into this request by tagging their profile. And finally, instead of having to pay a fee for the tour, the traveller has the option to donate a tip instead.

    Animation: When you scroll on a user's profile, the top profile area will shrink into a small bar so that it takes up less real estate.

    User Profile from local's view:
    You can view upcoming and pending tours inside your profile 'Tours' tab. Clicking a tour will bring you to the itinerary that you've created. Both people (local and traveller) will be able to see this. This can also be access from your inbox message.

    Animation: You can hide the pinned tour detail by dragging the grey bar up.

    Updated Oct 26, 2014

    Hi-Fi Screens, Prototype, and Logo

    After weeks of having an unnamed app, I've decided on the name 'Loco'. I chose this name because of it's simple and sounds like the word 'local'. This app connects travelers with locals, and lets them experience local spots so the app named Loco makes sense. I chose to spell it differently to give it a more fun and 'hip' vibe.

    I chose to go with a balloon as my product icon because to me, balloons represent curiousity, fun, and being 'up in the air'. Balloons go where the wind takes them. I want my brand to have these similar characteristics. The logo name is literal, but the icon is metaphorical and symbolic, representing values of Loco. I also think a balloon is a unique visual representation instead of the typical location pin, map, or plane icons.

    Prototyping the app
    I decided to try out Flinto to prototype my hifi mocks. I've updated all of the ones that I completed last week with various changes and also incorporated the new branding. There are still screens that are not finished yet so the flow on Flinto is not finalized. Click here to try out the Flinto Prototype.

    Below are a few examples of screens that I made minor changes to.

    Updated Oct 20, 2014

    Hi-Fi Wireframes/Mocks

    Use Case #1. Onboarding:
    Fiona recently heard about this app and is interested, but isn't too sure how to use it. She opens it up for the first time and goes through the onboarding process. *Photos, branding, and copy are not finalized*

    Onboarding: Fiona opens the app and sees helpful onboarding screens that tell her a little more about what the app is used for. She can choose to skip these screens and jump to the sign-up page.

    Signing Up: There are options to sign up via Facebook, Google, or email.
    Email Signup Fiona chooses to sign up via email. A very straight-forward signup page slides in. Users have the option to log in if they already have an account or to skip completely. They will eventually need to sign up if they want to book or become a guide.

    Use Case #2. Setting up a Local's Profile:
    Fiona Yeung is a local living Toronto. She finished the onboarding process and now wants to set up a profile so that she can start giving tours. She'll need to complete the onboarding process by creating an account. She wants to update her profile and add some photos to get travelers interested.

    Editing basic profile: Fiona goes to her profile for the first time. She is prompted to add a profile phoot, small bio description, and interests. There is also an account verification section that can help build trust between Fiona and the community.
    Menu: The sidebar menu provides easy access to different tools for Fiona. She wants to post a photo so she can do that from the menu, or directly from her own profile, under Spots.
    Posting a photo spot: Fiona is ready to share her first photo spot.

    Selecting Photo: To select a photo, the standard Android photo select screen shows up.
    Photo Detail: Fiona is prompted to add a caption, and location detail before sharing her photo.
    Viewing Tours In addition, Fiona is able to see her upcoming tours from the sidebar menu. She can see her confirmed tours, and any upcoming tours that are waiting for her approval.

    Use Case #3. Booking from a Traveler's Perspective:
    Melissa Florres is travelling to Toronto in October and wants to explore a few local spots for thrift shopping, and art. The flow below shows how Melissa will book her tour for her visit.

    Discover page: Melissa lands on this page and sees several local spots from different cities.
    Search page: She knows she will be visiting to Toronto so she searches that immediately by clicking the search icon on the top right.
    Results page: Melissa is shown a list of local guides from the Toronto area. She can filter based on location proximity, ratings, etc. She takes a look at Fiona's profile.

    About: Melissa clicked Fiona's page so she reads about Fiona. There's reviews and rating information visibile making Melissa feel safer about booking a guide with Fiona.
    About: Spots: Fiona seems like a nice tour guide. Melissa checks out Fiona's photo spots and sees if they have similar interests that way Fiona would be a good match for a guide.
    About: Book Me: Melissa likes what she sees and decides to book a tour with Fiona. She fills out all the information including the length of tour, and what spots she liked from Fiona's photos so that Fiona can create the best itinerary for her.

    Tour Confirmation: After clicking the Book Fiona button, Melissa is led to a message box between her and Fiona with tour details pinned at the top. She checks her inbox a few hours later and sees that Fiona has left her a message, and also confirmed their tour.

    Updated Oct 13, 2014

    Lo-fi Wireframe Sets

    For my lo-fi wireframe sets, I focused mainly on a few screens, primarily explore (home page and by city/hashtags), content detail, and the user profile page. I wanted to focus on how tourists will explore and discover places, as well as the type of info needed in the content detail page to encourage engagment between locals and tourists.

    • Explore photos/search by location & hashtags
    • Message users for tips or to book tours
    • Content creation: upload photo, add story, set tour info
    • See easily who offers tours
    • Creating verified and safe user profiles

    Below are the 3 divergent sets of wireframes that I've created with different explorations and approaches.

    Set 1:

    Set 2:

    Set 3:

    Updated Oct 6, 2014

    Elevator Pitch

    When people travel to new cities, often they only know about typical must-see 'touristy' spots. Imagine travelling to a new city and being able to meet local people that are eager to share their culture, stories, and home with you. Currently, tourists have to either know somebody local personally, book a tour guide, or be lucky enough to bump into a local that offers to show them around.

    This app will bridge the gap between tourists and locals so that tourists can truly understand the culture and places they visit opposed to only seeing tourist spots created and moulded for them, meanwhile locals have the option of being monetized for meeting up and showing tourists around, or simply giving suggestions and tips via the app. This isn’t just any typical travel guide app where you can see recommendations and hotspots, but more so focusing on the connection between the locals and tourists. There is something magical about sharing your culture with visitors and being able to bridge this gap would fill an unmet need. Users will have social verification and accountability to ensure safety, and to prevent scams.

    Updated Sept 30, 2014

    Design Brief

    Describe the problem, space/needs, goals, planned solution and it's value.
    Design brief PDF

    When people travel to new cities, often they only know about typical must-see 'touristy' spots. Majority of tour guide brochures and websites available to travellers offer only information and tours on attractions and sites that make their city appealing. But travellers will never truly understand the culture if they only visit places targeted and moulded for tourists, which is why my app will open up opportunities for them to explore deeper. If only every traveller knew somebody that was a local whenever they went somewhere new that way they would be able to see and understand more about the places they’re visiting. The app will connect tourists with locals so they can truly experience the places they're visiting.

    There is a need for the connection between locals and tourists because there is a still a large gap between these two groups. Currently, tourists have to either know somebody local personally, book a tour guide, or be lucky enough to bump into a local that offers to show them around. I want to close this gap and make it easier for both locals and tourists to help each other. The tourism industry is constantly growing globally so there will definitely be tourists who will be able to make use of this. It’s also important that locals have a reason to want to help so they will be monetized and also get the opportunity to share stories about their community.

    Prime objectives/goals
    The primary goal of this app is to provide locals with monetization and an opportunity to share their culture and home to tourists while the tourists benefit by seeing the genuine and real homesteads and culture, instead of tourist creations. An additional goal is to create relationships between locals and tourists from around the world, helping people connect with each other. Aside from the concept idea, some important goals and concerns include making sure that culture rituals and lifestyle do not become commodities for tourists, negatively impacting the local communities.

    Planned solution
    The proposed solution is that locals will share photos and stories based on location in a feed/gallery. Tourists can search based on hashtags or locations to see what photos or areas interest them. When they see something they like, they can contact the local through their profile. If the local permits, the tourist can either message them, or book them for a tour/meetup flexible between the two groups. Both groups would have social verification and ratings to make it safer for everyone.

    There is value in this concept app idea because there is a large market for tourists and travellers. There are unmet needs for both locals and tourists making this app valuable and potentially bridging the gap in the tourism industry from local communities.

    Updated Sept 27, 2014

    App Analysis

    What is it? Who uses it? Why do they use it?
    I'll be exploring a few apps that have similar features and/or goals as my idea. The apps I'm analyzing are Instagram, FieldTrip, and Airbnb. They vary in category and purpose but all have features are relevant to my app idea.


    What is it?
    Instagram is an online mobile photo-sharing, video-sharing and social networking service that enables its users to take pictures and videos, and share them on a variety of social networking platforms.

    Who uses it?
    90% of the 150 million people on Instagram are under the age of 35. Majority are within the 18- to 34-year-old age bracket. The app leans more towards users in urban areas than rural areas, with 68% of its users being female.

    Why do they use it?
    Users share photos, explore photos of similar interests, see photos that friends share, and can add filters to their photos for an extra touch. There is also a large sense of community where you can follow based on interests such as profiles sharing only fitness photos, food, fashion, etc.

    Visual/Interface design
    Instagram has 5 sections in the navbar at the bottom; Home, Explore, Camera, News, and User profile. The app always opens on the Home tab giving users content to look at right away. The visual design is simple and clean. They are only a few shades of blue that are used so that the colours in the photos have the main focus.

    Features that relate to my idea
    I want to focus on the Photo Map feature on Instagram. As a user, I've clicked on the location that someone has added to their photo, and continuously browsed through those photos tagged under that location. The idea of looking at photos in a specific location is similar to what I want to incorporate in my idea.

    The tags are also useful in helping users find other users and photos that share similar interests, helping them see more content, and building on their community.


    What is it?
    Airbnb is a service that connects people to unique travel experiences, at any price point, in more than 34,000 cities and 190 countries. It is a trusted community marketplace for people to list, discover, and book unique accommodations around the world.

    Who uses it?
    People who want to make money by listing their space, as well as travellers looking for a more unique place to stay. It can be more affordable, or offer a better location.

    Why do they use it?
    For the host users, they use it because it's a great and convenient way to monetize their extra space and showcase it to travellers. Studies show that Airbnb is an important source of income for local residents who use the platform to share their home. They can also proudly share their culture and community with the travellers.

    For travellers, it often gives them a more unique living space during their trip. Often getting a better idea of a city, or living in unique homes, etc.

    80 percent of guests use Airbnb because they want to explore a specific neighborhood, and 45 percent of their spending occurs in the neighborhood where they stay. The average age of Airbnb users is 36 years old.

    Features that relate to my idea
    I chose to analyze this app because the idea of connecting travellers with local hosts is similar to my app idea, except instead of providing living space, it would be providing local tours. I really like the social accountability that Airbnb uses so that both the traveller and hosts feel safe and comfortable before booking.

    Field Trip

    What is it?
    FieldTrip is a mobile app guide by Google to help you discover cool, hidden, and unique things in the world around you. When you get close to something interesting, it pops up a card with details about the location. This app is can also be used with Google Glass.

    Who uses it?
    People who want to explore and learn more about a certain place, city, or area. These users might not know much about these places and want to learn about what's popular or what to do in a place. The age bracket Field Trip targets is probably around 18-40 years old from the look of its visual design style, and content.

    Why do they use it?
    Users use Field Trip to learn about everything from local history to the latest and best places to shop, eat, and have fun. Users select the local feeds they like and the information pops up on their phone automatically, as they walk next to those places.

    Users can order it to speak the titles and descriptions aloud and even choose the conditions under which it should speak (such as when it thinks you’re driving). Users can select the individual feeds, which are organized by interest, that seed the app; give individual updates a thumbs-up or thumbs-down; and tell the app to show you more or fewer things from any single data source.

    Updated Sept 22, 2014

    ----- New Idea! -----

    Problem: When people travel to new cities, often they only know of the iconic places to visit; the 'touristy' spots. It would be really cool to be able to find the local spots, and talk to and even meet locals while you're travelling.

    UVP: The app connects tourists with locals so they can truly experience the places they're visiting. The storytelling aspect is when locals post photos, stories, videos of a place to share with travellers and vice versa.

    Opportunities and Unmet needs

    • Most apps for tourists only show you the iconic places. Often not what it's really like to live in a certain place.
    • Hard for travellers to see local spots if they don't know anyone from that city
    • Locals want tourists to get the most accurate portrayal of their home
    • A better travel experience is created

    PACT Analysis

    • 17-55 yrs old age bracket
    • Targeting both locals and tourists
    • Travellers, adventurers, foodies, tour guides
    • People who want to experience more culture
    • Both experienced and inexperienced travellers
    • Medium to high income bracket for travellers

    • Use before and during trip
    • Locals share photos and stories of places
    • Tourists browse and explore these spots
    • Tourists and locals connect; they can chat, or book locals as a guide

    Context (Environment):
    • Used outdoors, on-the-go, or in hotels/homes
    • Could have language barrier problems (translator)

    • Mobile/tablet/web
    • Online/offline modes
    • Media: Photos & videos

    Who else is in this space?
    • FieldTrip
    • Foursquare
    • TourPal
    • Instagram (explore)

    Updated Sept 20, 2014

    Welcome to my documentation site for YSDN 4003.
    • Created documentation site
    • Uploaded to server
    • Brainstormed areas to explore
    • Researched what storytelling means

    Brainstorming Stage

    Storytelling - Links to read
    The Future of Storytelling
    We're all storytellers now
    Visual storytelling in the digital age

    Potential Categories
    • Fitness
    • Discovery
    • Food
    • People (inspired by Humans of New York)

    There's a popular fitness community on Instagram however it makes it difficult for users to see detailed stories and guides at a glance. Users often have to go outside of the app to find external blogs. People also often have a hard time tracking their workouts with no convenient way of sharing with others.
    • Transformation stories
    • Community for healthy living
    • Meal tracking
    • Workout plans/guides
    • Fitness tracking

    Who else is in this space?
    • Strava
    • Fitocracy
    • Nike Training app
    • MyFitnessPal

    Opportunities and Unmet needs

    • Users don't have a good way of tracking workout plans (Notepads, Note app, etc)
    • Currently it's inconvenient for users to follow the workout plans created by trainers
    • Transformation stories are inspiring and should be highlighted more
    • Sport teams or fitness trainers can use this as a management tool
    • Users can be engaged in a dedicated fitness community

    PACT Analysis (People, Activities, Context, Technologies)
    Useful PDF on PACT
    • Different levels of strength/skill level
    • Fitness trainers, athletes, teammates
    • People who aim to lose weight
    • People with motivation vs those wanting to give up
    • 18-35 year old age group
    • Medium to high income bracket

    • Use before, during, and/or after workouts
    • Usage is frequent (4x or more/week)
    • Can be used individually or together with people
    • Doesn't require high focus or concentration
    • Length of usage at a time is short and frequent

    Context (Environment):
    • Outdoors, public gym, studios, at-home gym
    • Noise level: varies
    • Can be used alone or together with people
    • Mobile usage, on-the-go, but also browsing at home

    • Mobile/tablet/web application
    • Online/offline modes
    • Users are content creators
    • Communication - users will be connected/social media aspect

    Updated Sept 17, 2014