Grayline

Redesign of an iconic tourist platform.

Intro

Redesigning e-commerce for an iconic travel brand.

Timeline

8 months from engagement time to site update.

Design stack

Sketch, JIRA, Adobe creative suite, Invision, UXpin.

team

1 Design Lead
4 frontend developers
1 project manager

Goals

Goal 1. Findability

Get visitors to discover the tour they want faster.

Goal 3. Get more return visitors

Get people who purchased tours to come back and purchase more tours.

Goal 2. Encourage add-ons

Get people who purchase packages to buy more tours
in the same session.

Goal 4. Content

Give visitors compelling content to view Grayline/City sightseeing as the authority on tours.

About

Designing for travelers

The user experience and visuals for the responsive website were focused on getting the user to find the tour they wanted quickly. Filters, advanced search and multiple viewing options (grid, view, maps) helped with this. Layouts were designed to help customers quickly understand the length of the tour, description, and what they got for their money.
Explore Dairy designed to give tourists itineraries and upsell more tours.
Home screen designed to give the visitor the tour they need right away.
Help center for tourists.
The PROBLEM

There was confusing UI and findability issues.

(See old design on the left.)
Very few purchasing were upgrading and buying more than one package.
Visitors didn't know where to go on the site.
Visitors were purchasing only the mainstay packages and they wanted to branch out and get visitors to purchase other types of packages.


The solution

A design optimized for upgrades

Part of the design experience was figuring out how to upsell product and get tourists to be more aware of additional tour options. The addon's during checkout encouraged more suggested products. Suggested tours are woven into multiple static and dynamic pages.


content

Content design for the website

A content strategy was established. Itineraries, guides, and videos were created to keep visitors engaged and to help return visitors to the website.
Phase one

Wireframes

Wireframes at the start of the project.
Wireframes that were handed to developers

See interactive wireframes.