Trek Website UX/UI Design & Graphic Design

Roles

UX/UI Designer, Graphic Designer

Tools

 Figma, Adobe InDesign, Adobe Illustrator

Introduction

Trek is a website for adventurers looking to create the perfect trip on a single platform. With unparalleled mapping capabilities, Trek provides a fully fleshed out itinerary that includes destinations, travel times, and a variety of activities over numerous locations. With Trek, users can tailor their trips to their personal preferences and find the most suitable pastimes for their party before they even arrive.

Proposal

Challenge

How might I help users create a perfectly planned trip that caters to their specific preferences entirely on one platform?

Key Objective

Trek should enable users to plan a trip from start to finish without having to leave the website. The user should be able to find destinations, book hotels, and find transportation automatically through the websites search engine. After interacting with Trek, the user should be able to have a composed itinerary of their trip that they can download, print, or share with other members of their travel group.

Solution

When creating Trek, I wanted to prioritize meeting all of the users needs in a single space. To do this I considered all possible components of trip planning and incorporated them into the website. I focused on making the page speak to the traveler's spirit, incorporating imagery that would inspire and motivate. Ultimately, I wanted the user to leave with a concise and clean itinerary, and designed the page with intentionality so that every element would work in harmony towards that goal, considering all aspects of the user's experience and the website interface itself.

Below: Mockup of the Trek website

When I built Trek I wanted to venture into a space that was slightly more analytically functional, such as trip planning. My goal was to create an interface that allows the user to visualize their plan as they are creating it, including changing variables such as distances, locations, and means of transportation. I achieved this by implementing a stationary sidebar that automatically adds trip elements as they are picked by the user, displaying the changes on an interactive map while also providing important information such as transportation times.

It was important to me to make the interface cohesively centered around destinations to continuously inspire the user throughout their planning process. The imagery I selected reinforces the idea of exciting trips and new destinations, encouraging them to envision their own future travels.

Below: the Trek landing page

Design Analysis

User Pains

  • Unable to locate destinations that offer activities they want

  • Has to use multiple websites to plan their trip

  • Oversaturated market yields too many competing options

  • Doesn't know how far destinations/activities are from each other

  • Doesn't have a consolidated list of the trip due to numerous travel planning resources

User Desires

  • A single platform where they can book destinations, plan activities and see the logistic elements of their travel plans

  • A map that displays their entire trip route

  • A way to narrow down potential activities based on their preferences

  • An automatic itinerary builder that automatically adds distances, locations and times

User Persona

  • An individual who appreciates structure and planning

  • A visual learner who wants to see their options in relation to other decisions they have already made

  • Someone who loves to explore but is also analytical rather than spontaneous

  • A person who is interested in expanding on both the activities they know they love but also desires to discover new things

  • Someone who is too busy to spend an absorbent amount of time constructing a travel plan across multiple platforms

Execution

  • A platform that consolidates all aspects of trip planning into a single place

  • Incorporating a filter that allows the user to pick what types of transportation they prefer using, as well as the activities the expect to be doing

  • An automated itinerary builder that factors in distances and times.

  • A place where users can search various activities and destinations

  • Implementing an interactive map that displays the planned route

  • A chat forum where users can speak to other trip planners and seek advice/get recommendations on particular locations and activities

Below: various aspects of the Trek website

This project was a good exercise in eliminating elements that did not promote the main goal of Trek, and provided me an opportunity to experiment with Figma. During the design stage of the process, I struggled to keep from adding superfluous imagery that busied the page and distracted the user. This however allowed me to enjoy the challenge of thinking about layouts differently, especially as I was committed to making the itinerary column work with the flow of the site. If I designed Trek again, I would pay more attention to the color palette, as the current version lacks contrast particularly where the activity filter is. I would alter the hue of the buttons so they would stand out from the background.

More by Abigail Friedel

View profile