.png)
Improved a travel agent website into intuitive and has professional look
2020 • UX design • UI design • UX reseach
Overview
My fun design mission
Bali Tours Indonesia has everything you could want in a travel agent: tours, transport, and amazing holiday experiences. But their website? It looks outdated and it needed a major redesign. So, I took it as a fun challenge to redesign it from scratch, to sharpen my skills. I would turn this website into a fresh, trustable, and modern platform that attracts luxury tourists and anyone who is planning their trip to paradise island, Bali.
Problems
Based on the Usability test on the original website, the challenges that users noticed are matched with the challenges I noticed before the user test:
Unclear hierarchy
Many elements seem trying to stand out
Unreadable texts
Overlapping text and photo background
Unclear descriptions
The UX writings are not clear and not concise in the descriptions of tour packages
Texts are not appealing to click
Descriptions texts don’t trigger users to click on it.
Goals
To attract new target users, especially the luxury tourists.
To build more trust and creadibility
To increase engagement from all target users.
Competitive research
How users choose trustworthy travel agent?
From Bali Tours Indonesia's competitors on social medias, I tried to find out on comments, reviews, and articles how users choose a trustworthy travel agent.
-
Read the reviews about travel agents
-
How travel agent handles complaints on online reviews
-
Get recommendations from people they know, online, and influencers
-
Compare several travel agents
-
Talk with the travel agent
-
Check the certification on their website
-
Able to contact travel agent easily
-
Travel agents share their legal business address
-
An up-to-date website with current travel contents
User research
Conduct interview
To get to know users’ perspective, I conducted interviews with several adults I know, aged 25 to 60s years old, who like traveling, had experience in traveling alone, with a company, and with family.
I asked them:
-
How do they feel and think when they enter this website?
-
Can they read the sentences on website easily?
-
What are the services of this travel agent provides?
-
Can they book a tour package?
-
What feature users expect here?
-
What's the good part of the website
-
Will users use this website to book a trip or use the services
-
Why they want or don't want to use the service of this website
Based on the Usability Test on the original website, the problems that users noticed are matched with the problems I noticed before. Read users' pain points.
.jpg)
.jpg)
.jpg)
.jpg)
User flow
How users interact with the website, based on their goals.
open the site
click "Tour packages"
choose one card of the tour
detail info about the tour
click "book" button
fill in a form & pay
wait for the confirmation on their email inbox
Site map
Wireframes
.png)
Solutions
Clean website
Give more whitespace
Clear hierarchy on typography
Play around with font's color, size, and weight.
High quality photos
Photos of real clients, activities, and places.
Good reviews
Show good reviews from their previous clients to ensure potential clients to use their services.
Clear navigation
Make sure the navigation is easy to use and users can find what they are looking for easily
Concise writing
Rewrite all descriptions. Make it simple, clear and more teasing the market.
Social medias
Links to their social media: Facebook fan page and TripAdvisor. So that users can see the reviews.
Mobile web
To get wider audiences who use mobile phones
.png)
Before
.jpg)
-
Lack of white space
-
The title and text are not readable which slow down users to scan the website.
-
Low contrast between the text and photo background, makes users hard to read.
-
There's no Search navigation where users can find immediately what they need quickly.
After
More white space, so that users can read or scan it easily
I add Search feature, to help users finding something on the website easily and faster
The title is bigger, clear and concise to grab users' attention at the first glance.
I add 2 action buttons that show the main services of this website: Tour Packages button and Rent car or bus button, to let users know directly what's main pages of this site.
I use Poppins typeface because it's clean and readable in most computers and browsers.
Next improvement
-
Creating design for mobile screen to increase accessibility for wider target users.
-
To design "Call us" button as the floating button on the bottom right side of each page. Also to increase accessibility for users to contact directly to the travel agent if they want to make booking, ask questions, or need assistance. This also can increase engagement.