Case Study U.S. Travel Works Roadshow Campaign Website
CLIENT
U.S. Travel Association
OUR CHALLENGE
The Travel Works Roadshow is a vital, ongoing campaign of the US Travel Association (US Travel). US Travel engaged Prologue to build a companion website for the Roadshow. The site needed to serve as a campaign information hub and a record of places visited and upcoming events.
STRATEGY & APPROACH
US Travel had designed the core elements of their campaign branding before hiring us to build the website. In addition to developing UX and content for the site we also built a custom UI interface and established a digital brand application – all derived from core campaign branding.
SCOPE OF WORK
Product: Campaign Branding & Website
Timeframe: 10 weeks
Delivery:
Logo & Visual Brand System, all assets
Brand Guidelines
Considerations for Social
UX/UI Design
Front-end Development & Launch
Tech/Tools Used:
Adobe Creative Cloud, Figma, PowerPoint, Zoom
OUTCOMES
We delivered a brand new logo and visual identity system along with recommendations for social and website design.
Travel Works Website
Contents
Project Overview
Challenges, opportunities and goals
Design Process
Timeline and project stages
Site Map
Content plan and user flow
Wireframes
Webpage architecture
Moodboards
Visual design explorations
Design System
Visual identity application
User Interface
Final design
Resources
Mockups and image credits
TravelWorks Website
Project
Overview
Problem
The Travel Works Roadshow was well underway, so it was imperative that we build a site quickly in order to take advantage of the upcoming stops. US Travel was planning to use the website to promote the economic impact of travel in the localities they visited. As such, it was important that we design a system that highlighted previous stops even more than the upcoming ones.
Our Approach
Design Process
and Timeline
A Bird’s Eye View
Our design process was 16 weeks from research through to launch. It was composed of seven phases, and required multiple teams of researchers, designers, writers and developers to complete.
Project Goals
Showcase the Travel Works Roadshow
Encourage collective engagements to boost local economy
Drive innovation in terms of community and member engagements
Elevate economic impact of travel
Fuel growth, education and training
Enhance official participation to the campaign
User Experience
Wireframes
Based on the sitemap, we then craft wireframes for each high priority page. This gives us a quick way to articulate and design page structure without needing to make brand or UI decisions just yet.
Visual Language Sketches
Style-boards
A Shared Visual Language
We inherited a logo but that was it. We needed to quickly determine what the visual and UI system should be without brand guidelines. In order to do this quickly - we crafted a series of custom style-boards to gut check with the client and begin the process of defining what their stylistic preferences might be.
Visual Directions
Page Designs
Narrowing Focus
Based on the outcomes of our previous style discussions, we were able to craft two distinct directions for the site. One played heavily on the use of blue and red together to hint at the bipartisan request, the other played up the other colors of the palette and made use of white space.
VISUAL SOLUTION
Style Guide
Brand Color Palette
We were asked to craft a color palette that used the main logo colors, red and blue, but also made use of additional color beyond the typical patriotic colors found in political work. We chose to craft a spectrum of both the blue and red, as well as add a complimentary golden rod and yellow to the mix.
Open Sans
We chose Open Sans not only because it is a great web-font but also because it was an existing font in their corporate brand guidelines and we wanted to use a small visual tie back to US Travel.
Typography
Components
We built the site based on a set of modular components that we built from scratch. We developed the UI system first and built the components from that.
Design System
User Interface
A Perfect Blend
We built a UI system based on the sites functionality and kept things simple. The client asked us to incorporate more organic elements - like the cursive in the logo. We chose to add a small number of hand drawn elements throughout the site to draw attention and give the site the “grass-roots” feel the client was looking for.