TripShare

ROLE

UI/UX Designer

Brand Designer

CLIENT

Case Study

PROJECT TIME

24 Hours

Overview

PROJECT STATEMENT

The goal of this project is to create a product that will allow an individual (influencer, blogger, family friend, anyone really) to create a detailed breakdown of a trip they took and easily share those details with others who are interested in creating that same experience.

PROJECT GOALS

Allow an individual to create & publish a trip.

Share the published trip via link, social media or advertisement.

Provide travel details to users seeking a similar travel experience.

Allow travel companies to share trips where their services were applied.

Clean and minimal brand and interface design to allow compatibility to a wide range of user brands.

FUNCTIONS

Create a trip to share with others

The trip details and features should be modular

The style guide needs to be simple in order to work with a wide variety of site/service brand styles

The details should offer variable options to account for most styles of travel

The published trip should be able to post and share the trip details on a personal site, sponsor, friends or partner sites

The creator should be able to share the trip via link

The creator does not need to be a member of any specific service to create and share their trip

Access for sponsors and travel companies to share the trip is optional

Provide related trip details for more attainable options when possible

Optional Ad or Social Media format provided (customizable)

FEATURES

Floating navigation to allow viewer to jump to a section

Light & Dark modes

Day breakdown tabs

Trip playlist

Individual module gallery option

Modular sections that can be rearranged to the user’s needs

Overview
Video
Gallery (full trip)
Travel type
Stay
Excursion

Trip Companions
Map
Quick Summary
Light & Dark modes
Day breakdown tabs?
Trip playlist (Spotify)

Research

INDUSTRY RESEARCH (BAYMARD INSTITUTE)

Travel Industry Leaders

Trip Management

Travel bloggers

TRAVEL COMPANIES & INDIVIDUALS

Expedia

Kayak

Travelocity

Orbitz

VRBO

eBookers

Hotels.com

TripAdvisor

Hotwire.com

Airbnb

@MURADOSMANN

@IZKIZ

@THEBUCKETLISTFAMILY

@KYRENIAN

RECO by TripAdvisor

RESEARCH FINDINGS

The majority of the industry leading travel companies were very similar in design with slight alterations in layout. The functionality, user experience and even iconography only slightly varied with the exception of some friendlier and more playful brand design. My findings resulted in an industry wide focus on booking, planning and some itinerary features while the sharing of trip details was almost completely occupied by blogs, both personal and professional. The one product that came somewhat close to the goal of this project was RECO, a TripAdvisor service that pairs individuals with Trip Designers that act as your travel agent for a fee. After reviewing the service and sample trip planned by one of their trip designers, I posted the pros and cons I took from this service below:

Reco

PROS

Great use of timeline feature

Excellent iconography

Clean UI

Trip planner perks

Trip protection

CONS

$200 fee

Limited to their trip planners

Cannot easily share trip

Who is this for?

USER BREAKDOWN

TRIP AUTHOR

A blogger or influencer might take a trip and have a lot of followers asking specific questions about where they went, where they stayed, what service did they use, what excursion was that, what trail did they hike, etc.

POTENTIAL TRAVELER

A potential traveler is beginning to plan out a future trip and needs ideas, to research possibilities and keep things all in one place.

TRAVEL COMPANY

A travel company has thousands of options and multiple services to offer. They want to show examples of some of the trips customers have taken while using their services.

PERSONAS

Audrey Vossen

Influencer/Photographer

Age: 29

BIO
Audrey travels the globe to experience as most of the world as possible, documenting everything. She is a well-known influencer with millions of followers and many sponsors. Audrey regularly updates her social accounts and has her own website documenting her lifestyle.

Amber Bernard

Potential Traveler

Age: 48

BIO
Amber is an empty nester and looking to start traveling more with her free time. She is excited to see more of the world and is beginning to research where she wants to go first. She is using travel websites and is turning to social media accounts she follows for inspiration.

PediaEx

Travel Company

BIO
PediaEx is a top tier travel company offering all forms of travel booking, vacation packages, things to do and travel inspiration. They make it easy to plan your trip and keep you on the move.

FRUSTRATIONS
Audrey spends more time formatting her posts and fielding questions from her followers about the details of her travels. She needs a way to quickly add and share her trip details.

FRUSTRATIONS
Amber is overwhelmed with the amount of information and options to choose from on travel websites. She wishes there was a way to see some detailed examples to help wrap her head around a trip.

FRUSTRATIONS
PediaEx serves influencers across the globe and would like to show how helpful their services are by tapping into some of the trip details experienced by those influencers.

Screen Shot 2022-01-19 at 2.53_edited.jpg

Brand Design

NEEDS

Relatable to audiences of all ages.

Minimal and simple to be compatible with a wide variety of brand styles.

Work alongside other industry leading brands.

Represent travel, sharing and guidance all in one.

PRIMARY TYPEFACE

Proxima Nova is a typeface that balances a friendly nature and modern structure while still demanding respect. There is a good sense of playfulness to the characters. Proxima Nova has a good foot in multiple doors pertaining to brand styles making it perfect for a this brand.

OTHER TYPEFACES CONSIDERED

HELVETICA NEUE

Helvetica Neue was an excellent typeface I considered for the brand. The typeface is clean, familiar to most and very easy to read. I decided not to use this typeface because there was a formality to it that may not work with some brands due to the style of the terminals in the ‘S’ and ‘a’ and the finial in the ‘e’. The tittle of the ‘i’ was too squared and the brand needed a rounded, relaxed style.

CIRCULAR

Circular is a great, monospaced typeface with an air of freshness about it. It does occupy more real estate than some others in body copy and can come across as a little too fun for some generations.

It is also used as the primary typeface of Airbnb and this design style should avoid looking too similar to a brand in the same industry.

LOGOMARK

The logomark was created by combining the needle of a compass that points north (helping guide the user to their destination) and the cursor of a mouse on your browser window (sharing a trip is just a click away).

This arrow/cursor/pointer is modeled after the cursor on your screen and the far right point is connect by a 90 degree horizontal line to the center point. While very subtle, this version plays a trick on the eye for some viewers causing a slight pause (desirable to grab attention).

This arrow/cursor/pointer is symmetrically balanced and slightly rotated. ThIs version maintains balance within a circle that will be used throughout the brand, but lacks any unique quality to other marks that resemble a compass so it was not used.

The color scheme consisted of three color groups. Warm, cool, and blacks and grays. This covers the brand to fit with all brand styles and keeps primarily to blacks and grays.

The style guide consists of buttons of rounded corners for a friendly and inviting feel for the customer. Images and bounding boxes share the softened style to form a great foundation for the brand strategy.

To obtain maximum compatibility with user brand styles the icons were designed in minimal line art.

ICONOGRAPHY

User Tasks

TRIP AUTHOR

Audrey has recently taken a grand vacation and needs to create a trip to share with her followers.

TRIP AUTHOR

Audrey needs a social post formatted.

TRAVEL COMPANY

PediaEx needs to access all trips that used their services and export advertising and social assets.

1. Audrey creates a trip

2. Audrey creates a social media post

3. PediaEx publishes a user trip

1. Audrey creates a trip

2. Audrey creates a social media post

3. PediaEx publishes a user trip

Interface Sketches

Part of my process is sketching out the primary UI screen layouts to test out design theories and user flow.

Creating a Trip

PROBLEM

Creating an entire trip can be daunting to some, but it doesn't have to be. The interface must be clear, easy to understand and enjoyable.

SOLUTION #1

Each step of the trip creation is broken out into breadcrumbs, beginning with one of each type of section available and an option to add as many as needed. The user can see how many steps are available, but not required before posting.

SOLUTION #2

Each user has the option to log into any travel company they may have used to book their travel. TripShare searches the date range the user has entered and autfills all data that is available.

TRIP CREATION

Here are a few looks at the process of creating a new trip.

MY TRIPS

A user can view and manage their trips all on their My Trips page. They are offered a quick summary of their total trips, all trip companions, and the number of destinations they visited throughout their travels.

LIGHT & DARK MODE

To ensure TripShare will look good posted to any website the trip author may choose between light and dark modes.

Value for Travel Companies

PROBLEM

Travel companies offer some truly amazing services that reduce the stress and headaches of planning a trip or excursion. Unfortunately, they don't always get the credit they deserve when it comes to the extent of assistance offered.

SOLUTION

TripShare allows a company to show how they assisted travelers, influencers and friends in creating some amazing experiences and share those details with others. This creates mutually beneficial relationships with their customers and offers opportunities for assentives to share their trip details.

TRIP SELECTION

A travel company with a TripShare account can view all published trips that have used their services. A preview of each trip gives the company a quick view of:

Days the trip lasted

Location

Number of services utilized

Icon of those services

The user/traveler profile

Their following count (if they linked their social media)

TRIP SELECTION

Once a trip is selected an automated message is created to send to the trip author to request permission to share (if they haven't already granted it when publishing).

There is also options for ad formatting allowing the company to choose the trip photo, header, and body of the ad that will be displayed. Then they can select an array of ad structures that will work best when published on their website.

TRIP PROMOTION EXAMPLES

To demonstrate a few ad formats I have created some example travel companies based on some of existing companies leading the industry today. Each company homepage is shown below with a TripShare trip ad promoting a popular influencer.

PediaEx

CANOE

Velocity

Multiple Viewing Options

PROBLEM & SOLUTION

Most travel blogs and story posts are limited to the way the author arranged things for you. TripShare offers multiple viewing options by both the author and audience.

STORY VIEW

Viewing the trip in this view is like seeing things through the trip author's eyes. Each section has been arranged in this order by the author and there has been intention placed behind those choices.

DAY VIEW

This view is arranged by TripShare automatically based on chronological order. Excursions, stays, food and other experiences are grouped by day and indicated by icons that break the timeline into sections.

DRAG & DROP

While creating a trip the author has the option to simply drag and drop the individual trip sections into the order they desire.

DIVE DEEPER

Any areas that utilized a travel company or booking service that includes more details can be accessed via a TripShare icon.

ADD TO MY TRIP

The audience can easily view the details of trip sections and decide to add it directly to their own trip planning via the travel company used or view similar options in the same vicinity.

Learnings

LESS IS MORE

Creating a product such as this with endless options unlimited details in each part made me see how quickly things can get crowded and overwhelming. Finding ways to simplify and organize the process can be the key ingredient in making everything work together.

GROWTH POTENTIAL

Throughout the design journey I realized just how massive this product grow to be. With the trip author, audience, and travel companies all in mind there are countless ways to expand upon what is on this page. Travel incentives and service promotions are just the tip of the iceberg. I look forward to expanding upon this project one day to see where it can improve and grow to become.

See All Work

TripShare

ROLE

CLIENT

PROJECT TIME

Overview

Allow an individual to create & publish a trip.

Share the published trip via link, social media or advertisement.

Provide travel details to users seeking a similar travel experience.

Allow travel companies to share trips where their services were applied.

Clean and minimal brand and interface design to allow compatibility to a wide range of user brands.

Research

Reco

Who is this for?

A blogger or influencer might take a trip and have a lot of followers asking specific questions about where they went, where they stayed, what service did they use, what excursion was that, what trail did they hike, etc.

A potential traveler is beginning to plan out a future trip and needs ideas, to research possibilities and keep things all in one place.

A travel company has thousands of options and multiple services to offer. They want to show examples of some of the trips customers have taken while using their services.

BIO Audrey travels the globe to experience as most of the world as possible, documenting everything. She is a well-known influencer with millions of followers and many sponsors. Audrey regularly updates her social accounts and has her own website documenting her lifestyle.

BIO Amber is an empty nester and looking to start traveling more with her free time. She is excited to see more of the world and is beginning to research where she wants to go first. She is using travel websites and is turning to social media accounts she follows for inspiration.

BIO PediaEx is a top tier travel company offering all forms of travel booking, vacation packages, things to do and travel inspiration. They make it easy to plan your trip and keep you on the move.

FRUSTRATIONS Audrey spends more time formatting her posts and fielding questions from her followers about the details of her travels. She needs a way to quickly add and share her trip details.

FRUSTRATIONS Amber is overwhelmed with the amount of information and options to choose from on travel websites. She wishes there was a way to see some detailed examples to help wrap her head around a trip.

FRUSTRATIONS PediaEx serves influencers across the globe and would like to show how helpful their services are by tapping into some of the trip details experienced by those influencers.

Brand Design

Relatable to audiences of all ages.

Minimal and simple to be compatible with a wide variety of brand styles.

Work alongside other industry leading brands.

Represent travel, sharing and guidance all in one.

PRIMARY TYPEFACE

Proxima Nova is a typeface that balances a friendly nature and modern structure while still demanding respect. There is a good sense of playfulness to the characters. Proxima Nova has a good foot in multiple doors pertaining to brand styles making it perfect for a this brand.

OTHER TYPEFACES CONSIDERED

HELVETICA NEUE

CIRCULAR

LOGOMARK

The logomark was created by combining the needle of a compass that points north (helping guide the user to their destination) and the cursor of a mouse on your browser window (sharing a trip is just a click away).

This arrow/cursor/pointer is modeled after the cursor on your screen and the far right point is connect by a 90 degree horizontal line to the center point. While very subtle, this version plays a trick on the eye for some viewers causing a slight pause (desirable to grab attention).

This arrow/cursor/pointer is symmetrically balanced and slightly rotated. ThIs version maintains balance within a circle that will be used throughout the brand, but lacks any unique quality to other marks that resemble a compass so it was not used.

The color scheme consisted of three color groups. Warm, cool, and blacks and grays. This covers the brand to fit with all brand styles and keeps primarily to blacks and grays.

The style guide consists of buttons of rounded corners for a friendly and inviting feel for the customer. Images and bounding boxes share the softened style to form a great foundation for the brand strategy.

To obtain maximum compatibility with user brand styles the icons were designed in minimal line art.

ICONOGRAPHY

User Tasks

Audrey has recently taken a grand vacation and needs to create a trip to share with her followers.

Audrey needs a social post formatted.

PediaEx needs to access all trips that used their services and export advertising and social assets.

Interface Sketches

Part of my process is sketching out the primary UI screen layouts to test out design theories and user flow.

Creating a Trip

Creating an entire trip can be daunting to some, but it doesn't have to be. The interface must be clear, easy to understand and enjoyable.

Each step of the trip creation is broken out into breadcrumbs, beginning with one of each type of section available and an option to add as many as needed. The user can see how many steps are available, but not required before posting.

Each user has the option to log into any travel company they may have used to book their travel. TripShare searches the date range the user has entered and autfills all data that is available.

Here are a few looks at the process of creating a new trip.

A user can view and manage their trips all on their My Trips page. They are offered a quick summary of their total trips, all trip companions, and the number of destinations they visited throughout their travels.

To ensure TripShare will look good posted to any website the trip author may choose between light and dark modes.

Value for Travel Companies

Travel companies offer some truly amazing services that reduce the stress and headaches of planning a trip or excursion. Unfortunately, they don't always get the credit they deserve when it comes to the extent of assistance offered.

TripShare allows a company to show how they assisted travelers, influencers and friends in creating some amazing experiences and share those details with others. This creates mutually beneficial relationships with their customers and offers opportunities for assentives to share their trip details.

A travel company with a TripShare account can view all published trips that have used their services. A preview of each trip gives the company a quick view of:​

To demonstrate a few ad formats I have created some example travel companies based on some of existing companies leading the industry today. Each company homepage is shown below with a TripShare trip ad promoting a popular influencer.

Multiple Viewing Options

Most travel blogs and story posts are limited to the way the author arranged things for you. TripShare offers multiple viewing options by both the author and audience.

Viewing the trip in this view is like seeing things through the trip author's eyes. Each section has been arranged in this order by the author and there has been intention placed behind those choices.

This view is arranged by TripShare automatically based on chronological order. Excursions, stays, food and other experiences are grouped by day and indicated by icons that break the timeline into sections.

While creating a trip the author has the option to simply drag and drop the individual trip sections into the order they desire.

Any areas that utilized a travel company or booking service that includes more details can be accessed via a TripShare icon.

The audience can easily view the details of trip sections and decide to add it directly to their own trip planning via the travel company used or view similar options in the same vicinity.

Learnings

Creating a product such as this with endless options unlimited details in each part made me see how quickly things can get crowded and overwhelming. Finding ways to simplify and organize the process can be the key ingredient in making everything work together.

BIO
Audrey travels the globe to experience as most of the world as possible, documenting everything. She is a well-known influencer with millions of followers and many sponsors. Audrey regularly updates her social accounts and has her own website documenting her lifestyle.

BIO
Amber is an empty nester and looking to start traveling more with her free time. She is excited to see more of the world and is beginning to research where she wants to go first. She is using travel websites and is turning to social media accounts she follows for inspiration.

BIO
PediaEx is a top tier travel company offering all forms of travel booking, vacation packages, things to do and travel inspiration. They make it easy to plan your trip and keep you on the move.

FRUSTRATIONS
Audrey spends more time formatting her posts and fielding questions from her followers about the details of her travels. She needs a way to quickly add and share her trip details.

FRUSTRATIONS
Amber is overwhelmed with the amount of information and options to choose from on travel websites. She wishes there was a way to see some detailed examples to help wrap her head around a trip.

FRUSTRATIONS
PediaEx serves influencers across the globe and would like to show how helpful their services are by tapping into some of the trip details experienced by those influencers.

A travel company with a TripShare account can view all published trips that have used their services. A preview of each trip gives the company a quick view of: