Mobile-optimised and multilingual website

Personalised travel website with itinerary planner


The brief

[email protected] is a travel company that offers custom cultural and eco-friendly adventures in Asia. 

They place emphasis on exploring and leading people through unfamiliar routes, experiencing the diverse local cultures, and on conserving both the environment and the local cultures.

Its clientele are typically over 45 years of age and come from Israel, Spain, Russia and English speaking countries.

Our brief was to produce an engaging online experience that helps users to find and book the journey of their dreams. We were tasked with producing a multilingual, mobile-optimised, visually high impact and high performance website.

The client (Ron) also wanted to showcase their amazing photography to show, rather than describe, the experiences that [email protected] provide. 

Furthermore, the site needed to have a flexible and robust content management system (CMS) integrated so that the site could be managed from anywhere by [email protected]’s global team.

Trips At Asia Screens

Objectives

For this project, we had to meet a number of business goals and objectives, including:

  • Representing and strengthening [email protected]'s image
  • Generating direct sales through the website
  • Generating interest of prospects in [email protected]'s travel products
  • Allowing prospects to find the appropriate trips and complete a seamless booking experience.
Screen Shot 2016 09 12 At 11 40 19 Am

Highlights

  • Engaging visual design
  • UX design
  • Mobile-optimised site
  • Trip planner
  • Interactive itineraries and maps
  • Search and trip customisation
  • Content management sysem (CMS) integration
  • Information architecture design and content tagging
  • Multilingual support (including RTL languages)
  • Style guide development
  • Wishlist for trips
  • SEO enabled 
  • Sitemap

Journey planner and trip search

At the core of [email protected]’s business is their unique and personalised trips. Ron wanted to ensure that their unique offer of personalised service and memorable experiences was reflected in the site. We ensured that the site focused first and foremost on trips and that all call-to-actions lead to booking or enquiring about a trip.

When creating itineraries, admins simply enter a location and description for each day and an interactive itinerary map is automatically created and displayed.

Some of the key features of the journey planner include:

  • Journey planner for requesting personalised trips
  • Beautiful itinerary pages
  • Persisted, sticky trip search
  • Find your trip filter (departure month, destination, theme etc.)
  • Wishlist for customers' favourite trips
  • Destination pages and related trips for easy journey discovery.
Screen Shot 2016 09 12 At 11 41 47 Am

Challenges and solutions

User experience (UX) and interface design (UI)

Our first challenge was designing a user experience and interface that would resonate with customers from different cultures and drive conversions, while simultaneously supporting both left-to-right and right-to-left languages.

We started by researching best practice multilingual design patterns and producing test wireframes and prototypes of critical interface elements. We then collaborated with the [email protected] team to test and validate our designs in multiple languages before finally creating the finished design.

We selected a flat, card based layout that follows Google’s material design principles because it provided the cleanest, most flexible and intuitive framework for the site’s page layouts.

Some of the design features include:

  • Interactive cards to only show relevant content
  • Tooltips for in-context help
  • Expands to only show relevant content
  • Related content
  • Interactive maps
  • Clean visual layout
  • Consistent graphic language
  • Persisted calls-to-action.

Performance and mobile optimisation

The design required heavy use of big and bold imagery to create a strong visual impact and captivate users. However, this created a performance challenge, especially when viewing the site on the mobile-optimised version. The difficulty was that large, high-quality images slowed down the site but smaller, compressed images looked terrible on large screens.

To get around this, we ensured that the site was hosted on a data centre in Europe so that it was as close to its customers as possible. We also decided to configure the site to store the images on AWS S3 buckets and leverage the AWS Cloudfront content delivery network.This meant that the images could be served even more locally, no matter where the user visited the site from. 

Finally, we configured the CMS to generate an image that was optimised for each screen size - for example, larger images for desktops and smaller images for mobile phones. This way, the user only downloaded what they needed and we could optimise page loads for a better user experience. We also ensured that images were cached effectively, so that users only had to download images once, rather than every time they visited the site.

Trips At Asia Mb

Multilingual content management​

We chose Craft for the content management system (CMS) because it strikes a unique balance of power, flexibility, ease of use and stability.

Some core features we loved about Craft for this project included:

  • Comprehensive multilingual support (including right-to-left support for languages such as Hebrew)
  • A built-in responsive control panel for content management from mobile devices
  • Content revisions and rollback with notes live preview for content drafting
  • Localisation, including multilingual content and admin interface support
  • Access control layer with configurable permissions and publishing approval
  • Asset and entry search
  • Bleeding edge performance
  • Configurable content types and fields.

Integrated asset hosting on reputable cloud services

For [email protected], we started by designing a bespoke content model and information architecture that would support the tagging of related content that allowed us to dynamically serve more relevant information to customers.

We then configured Craft to allow administrators to control any text on the site in any of the 5 languages that the site supports.

The result was an extremely powerful yet flexible CMS-backed website that provides [email protected] with autonomy to improve and adapt as their business grows.

Screen Shot 2016 09 12 At 12 00 04 Pm

Technologies

  • Craft CMS
  • Google Maps with custom stylesheet
  • YouTube and Vimeo video integration
  • AWS S3 and AWS Cloudfront CDN
  • Browser caching

Links

Are you ready to get started?

Tell us about your project

Get Started