App Redesign

Optimising the Travel Planning Experience

UI/UX Designer

Role

Sketch, InVision
2 weeks

Tools

Timeline

01

Background

Travel is fun but travel planning can be hectic sometimes. I used to plan the trips by google map and create the itinerary by excel file then passed to my friends for comments. Wouldn't be great if there's an app that help you do all the cumbersome work?

My friend introduced me her friend who is the founder of a startup company called Pinvels. He has launched a travel planning app is 2018 which you can drag the places and it can plan help you plan the itinerary. There's also an e-commerce function so people can order souvenirs and pick them up on site as well.

The target markets are China, Hong Kong, Macau and Taiwan. The company mainly generates revenue from smart hotel implementation orders and the online store. Because of the pandemic situation, their main focus now is to secure more fundings to sustain their business.

Business goal:

  • To increase the user growth rate of the app.

As I'm learning UI/UX design, I would love to put my learning into practice. He also wants to find an UI/UX designer so he gave me a design task as part of the interview process. The task is to revamp the app.

02

The Challenges

The founder pointed out that since the app was launched 2 years ago, the landing page needs a fresh look as only minor changes has been made. Another issue he mentioned is, when he designed the interface, he took the reference of the app from China. So the interface might not be appeal to users in other markets.

03

My role

  • To find out if there are any usability issues of the app
  • Improve the UI/UX design

Below is how I work on the redesign of the app:

04

Observe

Current App Design

Problem Assumptions

  • App Navigation and Exploration are confusing
  • Discovery and creating itineraries aren’t clear
  • Users need to take time to understand the key features of the app

a. Survey

The goal of conducting survey is to understand how people research for travelling and what tools are they using for planning their trips. There were 99 respondents and I have interviewed with 3 of them to learn more about their goals and pain points.

b. Usability Test

I have done moderated usability testing with 3 participants to identify the usability issues of the app. The 3 participants are in 30-40 age group who based in Hong Kong and Taiwan.

There are a total of 4 tasks:

  1. Bookmark the destinations
  2. Create an itinerary of a 3 days trip
  3. Revise the itinerary with a change of transit method and the duration of the trip
  4. Navigate via the app to the first destination of the planned trip

Statements from the participants

"I found the Pinvels app is confusing when I tried to add places and edit my itinerary. Spent some time to find how to change the transit method."
"The places shown under the map is very small which is difficult for me to check out the details. I cannot click at anything on the map. This makes the map and the 'drag & drop' function not so helpful after all."
"I like the idea of the app. But it is slow responding at times. It is bearable if I plan for a short trip but too complicated for a longer trip.

The usability test verified that the problem assumptions are accurate. The users encountered difficulties when they search for the places in map view and they are not clear on how to create itineraries even with the help of tutorial.

05

Define

I've created the user persona based on the results that I have gathered during my research:

Key Insight

  • Sharing and commenting are important to the users during the decision making process when travelling in groups

06

Ideation

Below are the issues discovered by the participants during the usability test. There are quite a few issues scattered around the home page, video/image story page and the trip planning page.

Prioritization:

First, I have grouped the issues/questions being pointed out by the participants into 2 priority levels:

As a designer, apart from solving problems, it is essential to align the user goals with business goals as well. In this case, the trip planning is the key feature of the app that directly correlated to the growth of user rate. So this will be the first priority to be tackled.

I had another meeting with the founder to discuss this and see if there're any updates from him before I move on to the next step. He agreed that the usability of the app has to be improved. Apart from taking the video stories out from the homepage, he would like to add travel blogs and itineraries created by the users.

Screens shared via Zeplin (only Chinese version is available at that time)

I've shared my opinion with the founder regarding the redesign concept:

  • The top navigation bar is difficult for users to read and reach to the top for navigation.
"People can read content best at the center of the screen and often scroll content to bring the part they’re reading to the middle of the screen if they can." - Design for Fingers, Touch and People
  • The idea of adding travel blogs is good. But it takes a few clicks away for users to search the related information. According to the user research, before they start planning for the trip, they will research the information with a destination in mind.
07

Solution Overview

  • Users to enter the destination before entering to the Home page which features related travel blogs.
  • The navigation menu is places at the center of the screen for users to do research and bookmark the places and activities that they want to go
  • Simplified the travel planning process by putting the map view in other tab and redesigning the travel planning page.
  • Add in sharing and commenting function on itineraries.
08

Styleguide

There's no established brand guideline. The primary colors are cool tones, see below:

For the redesign, I choose the warmer and soft color that has more appeal the female users, which is the majority users at the moment.

08

Bringing it to Life

Drive users to the core action before entering the home screen

Users will enter the destination and the travel date. "Recent Search" and "Popular Search" are available.

Curated content for better research experience

Users can find and bookmark the places & activities by both the search bar and the navigation menu. They can check out the popular activities and bookmark them by swiping through the images.

Simplifying the travel planning process

The bookmarked collection was taken out from the Itinerary page as it is confusing to the users.I've redesigned the page and renamed it to planner and it only shows the created itineraries.

New Features:

- User can invite others to view and make comment.

- To increase the level of customization of the app, users can create their personal attractions which are only visible to them.

Improve user flexibility and efficiency of use

By swiping or clicking the button at top right corner of the card, users can share, duplicate and delete the itinerary. A pop-up message will double confirm with the user if they want to delete the selected trip.

For the planner part, with the same action, users can leave notes, comments or delete the tourist spots.

09

The Prototype

10

Reflections

Test the redesign with users

The majority of the feedback is positive. They mentioned that it is more straightforward. One user pointed out if there's any function that can manage groups. Like Google sheet, some can be editor while others can only leave comments.

Transparent communication will make the process smoother

I found that it is much easier to work on this project as I have a clearer picture of the business goals and the direction of the company. I'm glad that the founder was willing to share the information with me so I could focus on bridging the gap between business goals and users' needs.

Key Takeaway

I would love to see the impact after the implementation. Unfortunately, the project is put on hold due to business concern. Anyway, it was a great experience for me as I have a chance to work with the business owner to design for better user experience and bring business values.