OD GO

UI/UX l 2020

Motivation

When I plan a trip, I had to use Photoshop to create my own travel map, by marking tourist attractions on a map, using different colors or symbols for different categories, such as tourist attractions, restaurants, lodging, and others. Then I can see locations that I decide to go only, visually on a map. In that way I can decide where to go first and where to go next to travel efficiently, minimizing the moving lines to save my time and stamina. However, I could not find an application that has the feature I want. I enjoyed my past travels with my own travel maps, created with Photoshop, but the process of creating them was cumbersome. Therefore, I designed OD GO.

My Role

UI/UX Designer

Design Process

User Research - Competitors Research - Define Problem & Propose Solution - User Persona & User Scenario - Sitemap - Wireframe (1st) - User Testing - Wireframe (2nd) - Moodboard - Style Guide - Interface Design

1. User Research

To study public sentiment,

I carried out a survey, instead of an interview, therefore more people could participate in the user research, and participants could answer the questions with integrity. Furthermore, I was able to collect data and statistics on how people plan their travels and their needs, and the result of the user research was surprised me.

Means of travel planning

65% of participants used web browsers to plan their travel, and only 5% used mobile applications. The main reasons for using web browsers are:

  • Easy to navigate to different websites and apps
  • Be able to access the most information
  • The easiest way to find reviews

Among 10% of mobile application users, Google Maps(26%) took up the largest share, but users’ experiences were not satisfied. Although Google Maps has a label feature that allows users to keep track of all of the places they need to go, but technically Google Maps is not a travel planning app. On this account, users could save places, however, they could not plan travel.

Formats of travel plans

Because I prefer to see my travel plan visually on a map, I thought most of the participants would choose ‘Map’ for the format to see travel plan, but interestingly:

  • 45% of participants chose ‘Map’
  • 45% of participants chose ‘List’
  • 10% of participants chose ‘Both’

Features, users want

  • Create my own travel app
  • Local culture
  • Organizing all of my tickets/reservation in one location
  • Organizing itinerary
  • Public security
  • Recommendations from local people
  • Save the locations that I visited
  • Suggest good places around me based on my preferences
  • Travel app like Yelp

2. Competitors Research

To find out current trends,

I used, studied, and analyzed top travel plan apps on the market, and also learn from their successes and avoid their mistakes.

3. Define Problem & Propose Solution

Problem Statement

Information is scattered all over different apps and websites. Users have to spend quite a lot of time and effort to find and assemble them to plan their travel.

Solution Statement

OD GO provides most of the essential travel information, so users do not need to wander around various apps and websites to plan their travel. OD GO lets users create a travel schedule and it converts to a map as well.

4-1. User Persona

To walk in user’s shoes,

I made a user persona, based on the result of user research.

4-2. User Scenario

Trigger

Tim is planning to visit San Francisco for the first time in September, to enjoy his vacation.

Action

Tim googles places to visit in San Francisco, looking for business hours, photos, reviews, descriptions, ticket prices, location, and more information. He sorts out places to visit in a list format and opens Photoshop to visually map out his list, because he likes to use a list to put detail information of places, and a map to organize the order of travel.

Frustration

Tim wishes there was an app that has all the information, and features he needs to save time. He has to spend too much time researching each place. For each place, he switches back and forth in-between different apps and websites. For example, to visit The Walt Disney Family Museum, Tim uses Google Search, Yelp, and other blogs to find reviews and useful tips, then opens Instagram to see photos, other visitors posted. Next, he visits the official website of the museum to find up-to-date ticket prices, hours, and location. When he gathers all the information, he writes them down using Pages, marks the museum on a map using Photoshop.
Tim laments about how inefficient it is, to his co-worker Nick, then Nick recommends to use OD GO to Tim.

Solution

Tim installs OD GO on his phone, and uses the app to find places with all the necessary information and organized them easily on a map. He is grateful that he can now use just one app to plan his travel save his time.

Reward

Tim finds information about places he wants to visit on OD GO and add them to his list. When his list is complete, OD GO creates Tim’s own travel map, automatically and he can switch back and forth between the list view and map view.
The whole process is easy. It allows Tim to find everything he needs to know for traveling in one app and saves his time.

5. Sitemap

To establish a pathway of the app,

I arranged a sitemap, organizing functions, and its flow.

6. Wireframe (1st)

To visualize the sitemap,

I constructed wireframe, placing texts, buttons, image boxes, and other elements on the screen-ratio artboard. In this process, I could get a better sense of how each screen would look, and be able to use wireframe for user testing.

7. User Testing

To get feedback for the wireframe,

I conducted user testing with four of my friends who often travel. I let them play with the wireframe, answered their questions, and asked them questions about the usability of it.

8. Wireframe (2nd)

To improve the usability of the app,

I modified the wireframe, based on the result from the user testing. Previously, it was more likely a location saving app, than a travel planning app, so I added a Trip tap, where users can create and manage multiple travel plans.

9. Moodboard

To get inspired,

I created moodboard, so I could decide a look and feel for the app.

10. Style Guide

To make the app’s appearance consistent,

I developed a style guide, where I contemplated the logo, typography, color scheme, icons, and other elements.

11. Interface Design

To infuse life to the app,

I designed interface, on the basis of my moodboard and style guide.

Prototype

Design

OD GO is an app to uncover lots of trusted information about mysterious places, hence violet with blue hue is used as point color. Also, it’s interface is designed to be as simple and intuitive as possible, so users do not get any confusion, using the app. Information is organized according to the order of priority.

Trip plans

Trip plans tab allows users to create and manage multiple travel plans. Users can search and add places to users’ plans. When users are done planning, users can see their plans in both list view and map view.

Design of drag tabs

Drag tabs is a weighty feature that allows users to change Day1 to different Days, one place to others, on a map.

Detail

Detail page includes essential travel information, such as photos, hours, admissions, reviews, locations, and others. The information is organized according to the order of priority.

Placement of Upload photos button

OD GO wants to induce users to upload as many photos as possible, so users do not have to exit the app and go to different sources such as Instagram, or Google Image to look for photos. To induce users to upload photos, the app needs to let users know they can upload photos. Hence, the Upload photos button must be easy to find.

Placement of Reviews section

Review is important for OD GO. According to the user research, users rely more on reading reviews than descriptions of places, because users get more useful tips and information from unfiltered reviews. Reviews section must not be hidden on the bottom, but should not cover too much space.