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 ecommerce web site 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 that was offering a specific controlled experience, similar to a cruise, but also a unique adventure, like a safari package. The wide variety of available experiences and time periods on offer meant a large pool of potential users.
The primary design challenge would be accurately organize and attractively present the large quantity of available packages. Remote video user interviews we conducted along with a quick research survey in order to determine how users typically searched for vacation destinations and what motivated them to make their final travel choices. The user persona of Larry was developed, a 67-year-old retiree traveling with his wife who was looking for adventure, but also safety, was motivated by good deals, and primarily was interested in seeing sites/attractions, nature, and to learn about 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 did not yield any actionable items. A User flow was created for Larry detailing the process of booking a trip.
DESIGN
As a lot of flexibility was allowed in the final design, it made sense to start with low fidelity wireframes to brainstorm possible layout options. Driven by the broad appeal of the service, the potentially non-tech savy user personas, and market research, it was eventually decided that following standard UX and UI best practices and layout would be the smart choice. Any differentiation and creativity in design could be saved for the content vs the 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 driven by feedback from group crits. While some design ideas were actually quite successful, they failed the versatility and scalability test. One casualty of our increasingly responsive world is the elaborate and complex logo design:
The final logo design included an impossible shape lgoomark that also represented and hourglass and the letter Z. An initial style tile was created, a portion of which is below:
As UI design began, the color was shifted to a dark mode palette to help the project stand out from competitors. Initial responsive designs were created for the desktop and trip listing pages and the style tile was then upgraded to a UI kit to match the new direction.
Highlights from the UI kit:
Highlights from the UI kit:
Usability testing was done both through in-person moderated testing using a Figma prototype as well as unmoderated remote testing through 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 arrive at their destination. A second prototype involved only minor iterations to fidelity and transitions, plus and additional check-out screens with no need for modifications to the overal 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, another round of usability testing would need to be completed on the new pages, especially the checkout screens and a mobile prototype would need to be created and tested as well.
All photos and images used for educational purposes only.
