Senior Designer

Maverick Journeys

Travel Company Web UI

Project introduction

A New Brand Journey

In 2024, Maverick Journeys, an energetic Hanoi-based travel company specializes in custom Vietnam tours for foreigners, decided to upgrade their identity with a branding overhaul.

With new logo and brand direction ready, it was time to get their website a total makeover as well.

Project Workscope:

– Design new web UI follows new branding guideline

– Examine and improve UX of existing pages

– Examine and design good UX and UI for new pages

– Responsive adaptation for mobile

What have been done

A little UX Research

Target Audience

  • English-speaking foreigners who visit and want to explore Vietnam with local guide
  • Male / Female / LGBTQ+, 20+ to 70+
  • Travel Alone / In Group / With Family

Painpoints & Needs

  • Want cultural immersion & authentic experiences but don’t have time to plan the trip => need guidance provided by knowledgeable local tour guides.
  • Want to explore in a unique way and also enjoy the convenience and safety, but not confident to go by themselves due to language barriers, cultural differences, and navigation challenges => need curated tours that give exploration chance based on interests while providing A-Z service package.

Website Experience Expectations

  • Expect easy website navigation
  • Expect relatable & visual appealing content
  • Expect detailed information:  itineraries, highlights, pricing, inclusions/exclusions, duration
  • Expect transparent tour costs & expenses
  • Expect authentic reviews from other users
  • Expect easy booking procedure
  • Expect customization options based on interests, preferences, and schedules

Web Sitemap & Userflow

  • Examine client’s brief and sitemap request
  • Study and adapt good user flow from famous tour booking website like Booking, Viator, Get Your Guide, Klook, Traveloka…

Design Assets

Color Palette

Branding

Blue
#406AB5
Light Blue
#95B4E2
Orange
#E47200

Base

Black
#000000
White
#FFFFFF

Neutral

#FAFAFA
#F5F5F5
#E5E5E5
#D4D4D4
#A3A3A3
#737373
#4D4D4F
#414042
#262626
#171717
#DBEAFE
#BFDBFE
#95B4E2
#93C5FD
#60A5FA
#3B82F6
#2563EB
#1D4ED8
#1E40AF
#1E3A8A
#FFF7ED
#FFEDD5
#FED7AA
#FDBA74
#FB923C
#E47200
#EA580C
#C2410C
#9A3412
#7C2D12

Typography

HELVETICA

Primary Font, applicable for English, Vietnamese body text

Regular, Italic, Bold, Bold Italic

LEMON MILK

Secondary Font, applicable for English, Vietnamese headline

Regular, Italic, Bold, Bold Italic

Final Design

Maverick Journeys Website UI

Homepage

About us

Destination Details

Holiday Types

Holiday Type – Tour List

Tour Details

Booking Form

Blog Home

Blog Article

Experience in Figma Prototype

Instruction:

 Click on screen to find flashy hint for available interactive elements

Hit [R] or click on [Restart button] at the bottom right corner

For full screen view, click on the expand icon at the top right corner

Thank You For Reading!