client
DesignLab
category
Digital Experiences
date
2020
Zeit Travel Concept Project
UX/UI Designer, Researcher, Information Architect, Brand Design
brief
The Zeit end-to-end UX concept was a seven-week project completed for DesignLab’s UX Academy. The task was to design a responsive e-commerce website and branding for a fictional company offering time travel vacation packages to the past.
Research
General online travel market research and a competitive analysis were conducted with provisional personas. Key findings indicated that Zeit would need to be a hybrid website offering a controlled experience, similar to a cruise, but also a unique adventure, like a safari package. The wide variety of available experiences and time periods meant a large pool of potential users.
The primary design challenge was to accurately organize and attractively present the large quantity of available packages. Remote video user interviews and a quick research survey were conducted to understand how users typically searched for vacation destinations and what motivated their final travel choices. The user persona of Larry, a 67-year-old retiree traveling with his wife, was developed. Larry sought adventure and safety, was motivated by good deals, and was primarily interested in sites/attractions, nature, and history. If the site passed the Larry test, it could work for most anyone else.
LARRY
"The flight is at noon, so we need to get to the airport by 6am..."
Age: 67
Occupation: Retired
Status: Married
Location: Hilton Head Island, SC
Archetype: The Bucket List Cruiser
Age: 67
Occupation: Retired
Status: Married
Location: Hilton Head Island, SC
Archetype: The Bucket List Cruiser
DEFINE
Project goals were defined, a feature roadmap was created, a preliminary sitemap was established, and wireframes were quickly sketched. A card sorting exercise was conducted remotely but yielded no actionable items. A user flow was created for Larry, detailing the process of booking a trip.
DESIGN
Given the flexibility allowed in the final design, low-fidelity wireframes were created to brainstorm layout options. Considering the broad appeal of the service, the potentially non-tech-savvy user personas, and market research, it was decided to follow standard UX and UI best practices. Differentiation and creativity in design were focused on content rather than form. Responsive annotated home page designs were created for desktop, tablet, and mobile, as well as desktop wireframes for the trip listing page:
The brand identity was established through an iterative logo design process, including dozens of sketches and digital concepts. Some designs were successful but failed the versatility and scalability test.
The final logo featured an impossible shape logomark representing an hourglass and the letter Z. An initial style tile was created:
The UI design began with a shift to a dark mode palette to differentiate the project from competitors. Initial responsive designs for the desktop and trip listing pages led to an upgraded UI kit.
Highlights from the UI kit:
Highlights from the UI kit:
In-person moderated user testing was conducted using a Figma prototype, and unmoderated remote testing was performed using Maze. Users were tasked to see if they were able to find and book a trip to see the Wright Brothers' First Flight. The task completion rates were highly successful, and users ended up following a variety of different paths to reach their destinations. A second prototype involved only minor iterations to fidelity and transitions, plus additional check-out screens with no need to modify the overall flows or design.
This is the final interactive prototype, click mouse to begin (recommended for desktop only):
This is the final interactive prototype, click mouse to begin (recommended for desktop only):
Detail Trip Listing Page, Individual Trip Page, and select Checkout pages:
Next...
Before handoff, the new pages, especially the checkout screens, would need to undergo another round of usability testing, and a mobile prototype would also need to be created and tested.
All photos and images used for educational purposes only.
