Project Summary - Plan Your Trip

Website Design

中文        한국어

Overview

The website “Plan Your Trip (PYT)” attempts to offer an easier option to answer questions like “Is this tourist attraction worth visiting?” or “Can I visit all these 5 tourist attractions within one day?” for those first-time FITs to Korea. It serves as a standalone website which can also be a part of our Korea travel information website.

DATE

Oct 2015 – May 2016

PLATFORM

Desktop / Mobile Website

MY ROLES

UX Design
UI Design
Illustration
Branding

TEAM

1 PM
1 Designer
2 Marketers
2 Developers (Outsourced)

The Problem

When we were upgrading our Korea travel information website “hanguoyou.org” in 2015, Our PM came up with the idea to add a new feature that could help first-time Korea visitors have a general understanding of their destination. The feature should be easy to use. Also, we need to make it fresh while being aware of our insufficient development support.

Discuss the Vision

We set the goal of our project in the first place, and potential risks and various constraints were also listed.

Understand Our Target Users

Then we shared opinions about the target users based on our different specialties. We also interviewed several potential users to listen to their thoughts and observe their problem scenarios.

Visualize Our Ideas and Findings

Based on our findings, I made a flowchart that helped visualize our design problem. Finally, the PM decided the focus and direction of the project and marked it on the flowchart.

Persona was another form of visualized ideas and findings in our process. Most of the time It was used to remind us of our target users and their problem and action scenarios.

GOAL

To offer Chinese FITs a less stressful way to plan their first visit to Korea

RISKS & CONSTRAINTS

Will FITs find our service useful for planning their travels?
Our site has to compete with a whole bunch of elaborate travel information portal sites.
Limited developement support.

Look at Inspiring Solutions

After figuring out what problem we should deal with, we firstly tried to come up with some inspiring solutions by looking at products that contain something good we want to integrate into our site. Given the constraints we have listed, we tailored the solutions to suit our needs.

The way that Konest describes the transportation methods is clear to understand.

Mafengwo’s travel logs could be referred as external links to provide further information.

The dynamic 3D map of “The happy forecast“ is quite impressive but the loading time is too long.

Rough Ideas

In this step, I jot down rough ideas, filling a sheet of paper with doodles and diagrams—anything that gives form to my thoughts.

Solution Sketches

After sketching and discussions, we decided on the layout for the home page and result page. Next, I made the information architecture flowchart to make sure the content structure of our site.

Draw the Storyboard

In this step, I drew a storyboard that showed how our users use the PYT site to plan their first visit to Korea. The storyboard was used to remind us of not leaving anything important behind us before the prototype was built.

Create Prototypes

I finalized our first set of layout designs and transferred our solution sketches into higher fidelity prototype in Muse. I kept in mind the specific tasks we would ask the user to do and designed it.

Task Script Example

Let’s say you will go to Seoul for the first time next week and you want to go famous places like Myeongdong and Namsan. How do you know how many days you should spare for these places?

ASK

·What is your first impression when you enter the website?
·Can you guess what the site is about after seeing the hero image?
·How will you interact with the 3D map?

OBSERVE

·Which part does the user notice and for how long?
·How does the user interact with the map?
·What are the user’s facial expressions?

Find Errors in Front-end Coding

After handing over the final design and function description files, I kept following up by working remotely with our outsourced developers. In doing so, we made sure that our design was being accurately transferred into codes.

en_USEN
zh_CNCN en_USEN