The Nok Way is a new travel website aiming to revolutionize the travel industry in Southeast Asia, and eventually the world. Their goal is to provide curated travel packages centered around amazing activities and once-in-a-lifetime experiences. These all-inclusive packages include flight, hotel, and transportation as well as the activities themselves.

My Role: Lead UX Designer; UI Designer
Tools: Sketch, Proto.io, InDesign
Platforms: Responsive web
Deliverables: Medium and High Fidelity Wireframes, Prototypes, Design Specs, Style Guide

RESPONSIVE DESIGN

In keeping with time and budget constraints, it was decided that the design would cover two breakpoints: desktop and mobile. Our research determined that 360px was the most common size for mobile devices in Asia, so we created the mobile designs at that breakpoint. We used 1366px as our desktop breakpoint to accommodate most laptops as well as larger screens.

We worked closely with our team of developers to ensure that the design would also work at other breakpoints.

Example of a form at different breakpoints

SITE NAVIGATION

Based on the project requirements, we organized the webste into three main sections:

• Home: displays featured packages and immerses the user in the Nok Way brand
• Experiences: a searchable, filterable list of all the available packages (we used the word "Experiences" to create a luxurious feeling, as well as emphasize the activity-based nature of the packages)
• Account: information about the user, including travel info and history

In addition, we created a footer section with links to areas of the site that users would need less often:

• Language/currency selectors: default is based on the user's IP address
• Look Up My Trip: for users without an account to be able to look up their trip details
• About: general information about The Nok Way
• Contact: customer support information

HOME

The Home section is the user's introduction to the Nok Way brand and its offerings. It showcases featured packages and gives a brief overview of what the packages include, while displaying amazing imagery to entice the user to explore further.

Our research showed that a significant percentage of users who browse luxury travel websites don't necessarily have a specific trip in mind. The top of the page caters to this group, giving them a quick survey to fill out about the region, season, and category of trip they are thinking about. This survey is a great tool to hook users into the site immediately, and give them a shortcut to a pre-filtered list of packages that match their travel needs.

EXPERIENCES

The "Experiences" page is where The Nok Way's entire catalog of packages is viewable in one centralized location. Featured packages are displayed at the top, with the full list below. We put in two filters for the initial launch (destination and category) with the idea that more will be added later as additional metadata becomes available. The destination filter is separated by continent, however this could change to countries or just cities if most of the initial offerings are concentrated in one part of the world. Conversely, if catalog expands a lot, this filter could include continent, country, and city selectors. As for the trip categories, the Nok Way's internal research suggested that there should be three: "adventure", "romance", and "family".

PACKAGE DETAIL

The "Package Detail" page was the most complex part of the site to design. We wanted the user to be able to adjust absolutely everything about a package from a single screen, in a seamless experience. Making this possible took a lot of effort, but in the end we came up with a deceptively simple, intuitive design.

Selectors at the top allow the user to specify their trip dates, number of people, and departure airport. These selectors affect all the available options shown below. Package details are shown in a "timeline" layout:

• Activity: date, time, and number of people can be adjusted
• Car: type of car can be adjusted
• Hotel: hotel name and room type can be adjusted
• Flight: flights and fare class can be adjusted
• Add-on Activities: optional activities that the user can add

A bar that sticks to the bottom of the screen displays the current price for the package and dynamically updates. They can also "book now" from this bar.

CHECKOUT

While checkout for a travel package requires a lot of information, we designed it in three easy steps to get the user through the process as quickly as possible:

• Review: a chance for the user to view and edit their package one final time
• Enhance: add-on items, such as hotel amenities and travel insurance
• Travel & Payment Info: the user must enter required travel information, and has the option to pay via credit card or PayPal

ACCOUNT

The "Account" page has all the information necessary for registered users, and they can also save their personal details to make checkout go faster. Account sections include:

• About Me: basic required travel information (name, DOB, gender)
• Change Password
• Contact Info: email, phone number, and address (formatted for international use)
• Travel Info: optional information like frequent flyer numbers, preferred airport, etc.
• My Trips: a list of the user's past and upcoming itineraries