[ WEB & MOBILE APP DESIGN ]

Visualize your travel itinerary on the map.

DURATION . March.2017 - June.2017 

ROLE . I lead the survey and contextual inquiry in the research process. For the design part, I crafted the interactive prototypes, wireframes and high-fi protoypes.

Web Design      # Mobile APP Design     # Travel itinerary 

Design a tool for trip planning 

Goal

The goal of this project is to design an online platform that allows users to collect the places of interest, customize the itinerary and access it on the mobile phone.

Challenge

There are two states regarding trip itineraries: before and during the trip. We want to make sure that, by using our product, the itinerary-making process goes smoothly, and it is easy to review the itinerary when users are on their trip.

voyager_top_2

01. RESEARCH

SET Analysis & brainstorming

The course project started with a broad scope — Intelligent Life. Our team used SET analysis to list the social, economic and technological trends that are currently prevalent in China. After backround research and team discussion, we selected 29 topics ,of which travelling got the most votes. Since travelling is still a fairly broad topic, we brainstormed for possible issues under this topic.

过程

Questionnaire

To figure out what makes most people frustrated during their trips, we sent out questionnaires via the Internet. These questions are focusing on people's traveling habits and experiences. From the 70 questionnaires collected after 3 days, we found that more than 65% of the interviewees have tried to plan an itinerary by themselves and found it was a really heavy workload. Based on the results, we decided to improve the experience of making itineraries.

question2

Above are some findings of the online survey. In addition, we found that people would like to plan an itinerary mainly because:

  • They have personal requirements for attractions, accomondation and transportation.
  • They want to gain a deep understanding of the local culture.
  • Travel agency is not cost-effective and cannot provide a travel plan which meets their needs perfectly.

Contextual inquiry

Then we tried to gain more insights by observing people planing an itinerary for their trips. We invited three friends to a coffee shop. They were asked to plan an itinerary that met specific requirements. We observed and recorded their steps carefully. 

task
note
analysis

After observation and interviews, we were surprised to find that people spent more than half of the time on STEP 4 and STEP 5. They were struggling to adjust their plans to fit in the schedule and meet the designated reqiurements. In the post session, we asked them about other details which cannot perform in the test and what they liked/disliked about the existing tools.

What we found so far

Before we start to create solutions for the problem, we synthesized our research findings and settled down our problem space to keep all the team members on the same page.

  • When, where, why, and how users accomplish the task?

Users tend to plan their itineraries in front of their desktops/laptops before traveling. Making itinerary makes it possible for travelers to combine the holiday with a nice customized experience. Users will complete the task by browsing travel websites and using auxiliary tools (i.e. Google map). They will store the final itinerary in their smartphones or bring a paper copy when travelling on road.

  • What do users perceive as problems with their current practices?

Too many websites were opened in the browser at the same time. (Map, travel guides, hotel booking...)
Sometimes they travelled an unnecessary long road because they did not realize that some attractions were close to each other.
To share the itinerary with fellow travelers, they needed to write all the things down in a file, which was not intuitive and clear. And during the trip it is inconvenient to view the itinerary while navigating.

2_2
  • User’s wish list for improving their current way to accomplish their task?

Obtain detailed and updated information about the destination.
There could be a feature which enables them to collect all the attractions they desire to go.
Show the best way of transportation and amount of time spent on the road.

Persona

We depicted the target user according to the results of our research.

persona2

02. DESIGN

Quick prototype — Fail fast, learn fast

We first made the paper mockups, and then built some simple interactive prototypes using Axure to visualize the solution. Then we invited three target users to try them out in the usability tests. We conducted these prototypes very quickly to gain more feedback for further iteration.

caotu2

Early design explorations.

1
他行3
手机2
手机4

Some interavtive prototypes to communicate design concepts

Things need to improve

#1 The background color doesn't look very well. Location labels are not clear on the map.
#2 There is too little information for the attractions. Need brief introduction, the address of official website, etc.
#3 Have trouble finding the edit tools. Have no idea how to re-edit their itineraries.

aha

Through questionnaire, observation and usability tests, we had a deeper understanding of what users need when they are making their itineraries. By means of persona and storyboard, we learned more about users and made our goal clear — to integrate maps with itineraries. According to this, we defined the design scope and drew new architecture and wireframe based on the above work.

flow(en)-18

Wireframes

低保真en-29
低保真en-28

Visual identity

vi

Main walkthrough

STEP. 1

know your destination quickly

enter your destination → view others' itineraries → select attractions → view detained information → add to my itinerary

STEP1
step2_2

STEP. 2

create your itinerary

add attractions to my itinerary → check them on the map → adjust order → write memos

手势

STEP.3

view your itinerary while traveling

sync your itinerary to phone → slide the bar on the left to view your itinerary → select attractions to view detailed information / select routes to check transportation

STEP3_1
STEP4
手势2

STEP.4

share your itinerary

select one itinerary → pick a template → automatically import pictures based on geographic information → edit comments → DONE!

03. REFLECTION

At the end of the course, our team won the Best Product out of 6 groups in the class. Our instructor gave us some advice about Voyager's business value. He suggested that we should utilize the big data collected from users or think about how to cooperate with other products.  We also attended the UXPA competition and received much useful feedback.

# Take it as a feature, not a product.

Currently there exist a great number of travelling applications on the market (Google Map, Lonely Planet...). They have a larger customer base and users are familiar with these platforms. Some functionalities of our product, such as searching/adding locations on the lap are overlapped with them. So it is better to view our idea as an optimization of one existing application rather than build a brand new product. In this way, we can pursue greater compatibility and fully realize the value of our idea.

# Add tags on other people's itineraries.

Users who plan to hang out with family may have completely different plans than those who travel alone. When recommending others' traveling itineraries to  users, we can add relevant tags next to the topic, saving their time on browsing.

Thanks for watching!