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
Base
Neutral
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
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!