WithTravelers

Capstone Design Project

Project Overview

Description

WithTravelers is a South-Korean travel website that allows users to make travel plans and find people with similar interests to travel with based on their plans. The website allows them to choose from existing itineraries or create their own plans in collaboration with other travelers.

My tasks

Making paper and digital wireframes.
Determining a visual identity for the website and designing a responsive website.
Iterating on designs based on usability testing and peer feedback.
Conducting user surveys and reporting the insights.

Project Scope

This website was built as a part of the Capstone Design Project course during my exchange semester in South Korea.

Team

Kiryeon, Heonseo, Dongjin, Woonwung, Vaidehi

My Role

UX Researcher, UI Designer

Duration

4 Months

Design Toolkit

Figma

Illustrator

InVision

Zeplin

Research

I conducted competitive analysis to understand the strengths and weaknesses of the existing similar websites. I further conducted user surveys and interviews to understand the users. It helped me understand their needs, pain-points, experiences and motivations which made finding solutions an easier process.

Goals

To identify the target users.
To understand the Korean travel culture.
To analyze the available trip planning and matching websites and identify the issues.
To understand the current travel trends.

Assumptions

The travel habits of local residents and foreign visitors are different.
People's choice of travel destinations depends on the season.
Age is a huge determinant when it comes to making a travel plan.

Methodologies

Secondary - Competitive Analysis
Primary - User Surveys, User Interviews

Competive Analysis

I compared three similar websites and evaluated their strengths and weaknesses. This helped me understand the market and field better and gave me a direction to implement an effective solution.
I compared three websites. The first one is VisitKorea, which is the official tourism website for Korea. The second one is Gaffel, which is one of the most popular travel matching sites, and the last one is inspirock which is an itinerary planning site.

User Survey and Interview

I first prepared a questionnaire with open-ended and close-ended questions. I made sure to prepare the questions in English as well as Korean because a lot of Korean residents are more comfortable with their own language.
The next step was conducting interviews. I spoke to fellow exchange students as well as other international students and my teammates helped me interview some local residents as well.

User Interviews and Survey Insights

Assumptions Validated:

The travel habits of people depend largely on their age. For instance, older residents look for partners for their weekend hikes whereas younger people are more into longer trips to different cities.
People have difficulty finding existing itineraries that perfectly suit their needs and prefer editing those to tailor them to their needs.
Travel plans in Korea are largely seasonal or themed. People prefer to go to cherry blossom festivals in spring, skiing in winters and so on. A lot of international tourists prefer to go on themed tours like K-pop or K-drama filming destinations, etc.

User Personas

After gaining perspective about my target users and understanding their needs, I created user personas to help me focus on the key users I would be designing for. This method helped me ensure that our product is user-centric.

Defining the Problem

After gaining a clear understanding about my users, I proceeded with defining the problems they face using Point-Of-View (POV) statements and How Might We (HMW) questions. Using this technique helped me focus on the finding solutions to the right problems.

Sitemap

Next, I created a sitemap for the website to have a clear idea of the structure and hierarchy. I tried to focus on a simple structure that would be intuitive for the users.

Task Flow

After having a clear idea about the structure, the next step was to map how the users would interact with the key features of the website while completing a particular task. This helped me analyze the user experience in depth.
Given below is the task flow for a user wanting to create a plan and invite suitable travelers to discuss the plan with.

Wireframes

The sitemap gave me a clear idea of the structure to be followed and I proceeded with creating the wireframes for the website. I first quickly sketched out the most important features. This allowed me to further digitalize the design through mid-fidelity wireframes.

Low-Fidility Paper Sketches

Mid-Fidelity Wireframes

Design

Style Guide

To create a visual identity I kept in mind the following characteristics of WithTravelers: adventurous, inviting, and trustworthy.
The primary colour used for the website is Caroline Blue. It is a bright colour that is fun and inviting and reminds one of beaches and skies.
The font used for headings is Roboto. It is a sans-serif font that gives a modern feel. The font used for the body text is Segoe UI. It is a sans serif font that is easily readable.
Clean card components with rounded edges were used to give the website a clean and modern look.

Final design

The final UI design for the website was created based on the wireframes and the style guide. Various revisions and iterations were made taking into account peer feedback and user testing.

Responsive Design

The final UI design for the website was created based on the wireframes and the style guide. Various revisions and iterations were made based on peer feedback and user testing.

See Prototype

Testing

After building a prototype, it was imperative to test it so as to make improvements to the website based on the feedback and results.

10 participants were involved in usability testing.
The method used was Concurrent Think Aloud (CTA).
The participants were encouraged to think aloud their thoughts while completing a given task on the prototype.
Tasks were assigned to utilize the key features on the website.

The major feedback received was adding a guide on how exactly the match system works for the ease of new users as well as those with limited technological know-how.

Changes made after usability testing