Few & Far

Background

Luxurious and sustainable travel experience

Few and Far offers highly customizable trips for a high-end clientele, with prices ranging from $15,000 to $30,000 per person. The goal is to provide individuals with extraordinary nature experiences that enable them to connect with themselves, their loved ones, and the planet.

Persona

For environmentally conscious, soft adventurers

Few and Far's target audience consists of C-suite couples and families who have a love for nature. They seek extraordinary and well-planned experiences that are also environmentally conscious.

Competitor Analysis & References

Tell a story through sophisticated design and easy navigation

By referencing five competitors of Few and Far (Awasi, Modern Adventure, &Beyond, Belmond, Pelorus), we drew inspiration on how to highlight bespoke travel experiences while also providing an efficient and user-friendly website for users to navigate and book.

To achieve this, we focused on the following aspects:

1. High-quality photos and videos.
2. A editorial and organic style.
3. Easy browsing and access to detailed trip information.

Site Map

Took ownership of designing 4 responsive webpages

I collaborated with Hannah, the senior designer, to design the sites. My responsibility was to design the following 4 pages:

1. Grid template: A template to be used for displaying trip and lodge products.
2. Contact us: Enables customers to contact the company.
3. Standard: A rich text template for legal terms.
4. 404: Appears when the server cannot find the page that the user is looking for.

Design Exploration

Grid Template

I explored various options for the header and filter section of the page. Ultimately, we selected the option that includes a photo background at the top to evoke a sense of excitement for travel. In the process, I also had the idea to include a card that encourages users to call the representative if they can't find the desired trip. Additionally, I added a value proposition module at the bottom to educate users about the value of the trips offered by Few and Far.

Contact Us

The contact us page includes a form for users to connect with Few and Far. I have decided to use lowercase letters in the input fields to make them more readable for users. As the company provides a highly personalized experience through agents, highlighting the phone number here will encourage users to call and receive more direct and prompt assistance.

Standard

The standard page contains a significant amount of text, which can be overwhelming for users. To reduce their cognitive load and help them quickly find the section they are looking for, I have added an interactive table of contents to this page.

404

When being directed to a 404 page, users may feel confused and lost. Therefore, providing reassuring copy that aligns with the brand can help alleviate their concerns. Additionally, including the experience and lodge modules here can help users find other content they may be interested in and continue their browsing journey.

Iteration

I continue to iterate, mainly on the grid template, as the filter is a highly functional feature that involves different states.

I tried out different variants for the filter. After chatting with the design director, Christine, we ended up choosing the bottom one since it is the most scalable, allowing clients to edit and add more filter categories as the business expands.

The filter originally included "all" as one of the options, but I later decided to remove it. This was done to avoid confusion for the user, as they may mistake "all" for one of the other filter options.

Final Design

Grid Template

Collect all the trip and lodge products and includes a filter to help users find specific experiences they are looking for.

Contact Us

Allows users to connect with Few and Far through a form or phone.

Utility

Provides information about legal terms and includes a side navigation to allow users to quickly jump to the content they are looking for.

404

Use copy and content to minimize user frustration when they can't find what they need and guides them back to the browsing experience.

Style Guide

In the style guide, I have defined components to aid the development process. This experience has taught me to consider the different states of a component when a user interacts with it.

Annotations

Writing annotations on the prototype also trained me to clearly describe how the page will behave and find references to explain the animation. This helps improve communication with developers.

Visual Quality Assurance(VQA)

I then conducted visual quality assurance on the entire site to ensure that it accurately reflected the design, maintained consistency across all pages, met accessibility standards, functioned well with edge cases, and provided a cohesive experience across different devices and screen sizes.

Outcome

Establish Few and Far as pioneers in the luxury eco-tourism industry

By redesigning the 1-page site into a seamless website platform that highlights the brand's ethos and elevates the immersive, sensory storytelling of travel, Few and Far can further attract customers and build trust in their products.

What I Learned

Consider the possibilities and flexibility of the site to aid in development

Throughout this project, I have gained valuable insights into collaborating with developers. For example, when writing annotations, it would be really helpful to include references that illustrate the designer's intended animation. Additionally, it is crucial to consider the different states of pages and components to ensure a smooth user experience, even in edge cases.

Reflection

Be aware of how the page will change when the user interacts with it

When the user selects a filter item on the grid template, the selected tag should appear to indicate that the selection was successful. However, I was not fully aware of this and therefore need to add it back in during the development process. This was a lesson learned for me in understanding the importance of considering how different states of the page/component will behave when different user inputs are provided, and investing time to optimize this experience.