Timeline

January – March 2023 (8 weeks)

My Role

UX research, UI design, usability testing

Team

Tech Club Show What You Got - Jeeyoon Kim (Designer), Seoin Kim (Engineer)

OVERVIEW

Launching a responsive website that makes your travel easier, which achieved 688% increase in views of the website compared to the month of release

As part of a tech club, we undertook a project designed to create a responsive website that makes your travel easier. After eight weeks of work, we were selected as the top 10 teams out of 26 and presented the project on a demo day. Through our efforts, we provided users with a platform to lower their stress and start the trip with a light heart and excitement.

👉View the website here. (Please use Google Translate at the bottom left for English translation)
👉View the prototype here.

PROBLEM

The process of preparing for a trip becomes intimidating

I travel a lot and I love it, but I really don't like the process of preparing for the trip. From viewing information about travel destinations, packing luggage without missing anything, to arriving at the airport on time, the experience easily becomes intimidating.
This sparked the question — why can’t we start the trip with a light heart and excitement?

THE SOLUTION

Make your travel fun BEFORE STARTING YOUR TRIP!

STEP 1

Choosing a city you are visiting

Users can choose a city they are visiting among five world cities.

STEP 2

Viewing the brief information

Users can get the necessary information to visit the city
at a glance, such as visa, exchange rates, voltages, etc.

STEP 3

Filling out your flight time and your own pre-selected packing list

Users enter their flight departure time and the website shows their own three important times: expected airport arrival, check-in closing, boarding time.
By choosing the style and season, users can use a pre-selected customized packing list. After then, users can save or share the URL.

STEP 4

Exploring travel content

Users can check out information about their destination including attractions, restaurants, and history, etc.

USER SCENARIO

Emma is going on a trip to New York with her friends. She is impulsive, but she needs to make plans to enjoy her trip

Through user scenario, I found out what wow moment users can get through our website and a wide range of opportunities for them.

🎯 Opportunities

  • Showing their own schedule: expected airport arrival time, check-in closing time, and boarding time

  • A section to check what to pack in the luggage

  • Providing various travel contents such as restaurants, shopping, must-go places, etc.

DISCUSSION WITH A SOFTWARE ENGINEER + COMPETITIVE ANALYSIS

A website that focuses on TRAVEL PREPARATIONS, not on travel destinations

I like traveling and travel a lot. So I discussed with a software engineer using post-in notes about traveling. At first, I thought about showing each tourist attraction’s restaurants by a distance such as 10, 30, or 60 miles. But my partner said that it would be better to show various tourist information rather than just showing restaurants. However, after competitive research, we found out that there are many websites that travelers can use while traveling, such as planning schedules, viewing restaurant rates and reviews, etc. So we decided to focus on what travelers need to prepare before going on a trip.

RESEARCH

THREE BIG ISSUES you can confront before starting your trip

From a survey of 20 travelers, I found out that there are three challenges travelers may face before starting their journey. Participants were aged from 23 years old to 64 years old. Most people have been worried that they might miss a flight, leave necessary items, and not find enough travel information.

USER FLOW

Based on the opportunities I learned, I designed the user flow intuitively so that users can follow the flow easily

DESIGN PROCESS

Based on all the features I figured out through a lot of research, I sorted them into steps that showed a smooth flow so that first-time users could intuitively understand.

PAPER PROTOTYPE

First, I drew a paper prototype and constructed a rough website function.

WIREFRAMES

I made a wire frame based on paper prototype. Since our project had to be completed in eight weeks, I showed it to the software engineer to communicate how long it would take to create this feature and whether we could create all the features in eight weeks.

PRESENTATION + USABILITY TEST

Users liked the pre-selected packing list feature, but there are two things to be improved, so we iterated once more

We were selected as the top 10 teams out of 26 and presented the project on a demo day. Users were interested in our website, as they liked the interface design and intuitive structure. Especially, users liked the pre-selected packing list feature in that the checklist is divided into six categories, and there is a separate carry-on bag category, so it will be useful in real life.

However, a user told me he didn’t know the checklist could be edited as the pencil icon on the right was not noticeable. Also, he said some items that he doesn’t need are included in the checklist, such as color cosmetics, hair tie, curling iron, etc. Therefore, I went back to the design and added two features. I added 'Edit' text next to the pencil icon in a button to clearly show that it can be edited. In addition, by choosing the style and season, users can use a customized checklist.

THE STYLE GUIDE
UX SUCCESS METRICS

  1. 688% increase in views of the website compared to the month of release🔥

    The number of views in April was 25, but in May, the number increased by 688 percent to 192.

  2. New features will be added: 1️⃣ Airport security wait times 2️⃣ Travel-related advertisements

    The conversion rate of my website is measured by whether the user creates or shares their own checklist website. I will add a function that shows the airport security wait times in real time. In addition, travel-related advertisements will be added to the right side of the ‘Packaging Checklist’ to help users purchase the items they need right away.

Thanks for reading 🙂