Few & Far

Redesign website for a sustainable and luxurious travel brand



Responsive Web Design, Travel


Internship project that went live in 3/2024


12/2023-1/2024 (2 months)


Figma, Marker.io


Design Director:  Christine Carforo

Senior Designer: Hannah Chow

Project Manager: Kate Fulk

Developers: BX Studio


As a design intern at Barrel, I design four website pages (grid templates, contact us, standard page, 404 page) for our client, Few and Far (previously named as Quiver Tree Collection).

I seek feedback from other designers and iterate on my designs.

I also maintained close collaboration with developers by defining components in the style guide, writing annotations to describe page and animation, and logged 50+ tickets on marker.io for quality assurance.


Convey the value of the brand to a niche group of audience

The current site is a simple one-page site that includes the high-level idea and goals of the company. However, it does not clearly convey the sustainable and beautiful travel experience that Few & Far provides, nor does it include any of their products.


Ignite the excitement of travel with an immersive browsing experience

Barrel designed beautiful and highly functional websites that showcase Few and Far's travel experiences to their customers. The new sites launch the travel experience and lodges products, aiming to allow potential customers to browse, anticipate, and easily book trips with the company.

No items found.



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.

The original website

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.
Site map
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.

3 directions of the Grid Template
The chosen direction
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.

One of the explorations(left) and the chosen direction(right)

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.

Explorations of the standard page

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.

Explorations of the 404 page



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.

Design variants for the filter

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.

Before and after of the filter

Final Design

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.

Contact Us page

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


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

404 page
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.

Style guide

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.

VQA on marker.io



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.


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.

Project under NDA

Please enter the password below or reach out to Kate directly at maszeszekate@gmail.com to learn more about this project!

Next project


Decrease the bounce rate by redesigning the navigation

Navigation, Insurance


Internship project which will be implemented in 2024


6-8/2023 (6 weeks)

Read More