DesignLab
Zeit Time Travel
CLIENT: Zeit/DesignLab
A student project assignment to design, test and prototype a website for a ficticious travel agency that specialises in time travel vacations.
ROLE: UX/UI Designer
Tools & Resources: Figma, Miro, Optimal.
THE STORY
This case study was my first assignment for DesignLab’s UX Academy bootcamp
Vacations are high stakes, we don’t get many of them. So if you’re selling vacations, how do you ensure people book with you over the competition?
And how do you convince them that being chased by dinosaurs is the best way to spend their annual leave?
This case study for Zeit, a fictitious time-travel company, to identify their target audience, create a brand identity and deliver a full responsive e-commerce website.
THE BRIEF
Zeit sells time-travel vacations. 289 to be precise, each taking travellers back in time to witness the world’s most significant events and eras.
The brief asked for a fully responsive e-commerce website and brand logo. It also outlined how a time travel vacation works but didn’t include price information. And it didn’t include any KPIs or a target audience.
So my process began with a question that would shape the entire project: Who are we selling time travel vacations to?
THE PROCESS
01: Research
Who are we selling time travel vacations to?
How do they buy vacations online?
02: Define
What are the user’s goals?
What are Zeit’s goals?
How will the site content be organised?
03: Design
How will the site meet the user’s goals?
What type of brand identity will resonate with the user?
04: Test
Does the website satisfy the user’s needs?
What iterations will make the experience better?
05: Conclusions
Do the final deliverables satisfy the brief?
What could be done differently?
01: RESEARCH
Before the pandemic, the travel industry was booming, fueled by a trend of people buying experiences instead of “things”. A 2019 survey revealed:
The average Millennial allocated $4,000 for travel and planned to take 5 vacations, 3 of them international.
The average Baby Boomer allocated $6,600 and planned to take 5 trips, with “checking off bucket list items” a key motivator.
As the world’s only time-travel agency, Zeit has no direct competitors. So I sought out proxies, particularly those who specialize in ‘experiences’, to research their both their positioning and online booking experience.
COMPETITOR ANALYSIS
As the world’s only time-travel agency, Zeit has no direct competitors. So I sought out proxy competitors, especially those who specialize in ‘experiences’, to research their branding and their online booking experience.
Can’t book online - need to submit application
Content hierarchy not clear
Aesthetic doesn’t fit a $250k ticket
Destinations default search option, harder to search via activities
Detailed itineraries, plenty of info
Branding prominent throughout
IA is unclear: what is hierarchy of ‘Tours’ vs ‘Gentle Tours’
Search process is convoluted
Content is credible, specialist.
Intuitive; search bar is simple and prominent on homepage.
Credible: reviews from real people
Rest of homepage overwhelming
CUSTOMER INTERVIEWS
This competitive analysis suggested a Zeit vacation would cost at least four figures.
With this in mind, I recruited participants for customer interviews who had booked a vacation online in the last 18 months and earned over $75,000. And importantly, a mix of Millennials (25-40) and Baby Boomers (55-73).
PARTICIPANT A
Female, 32
TV Producer
London, UK.
Lives in shared house with family.
PARTICIPANT B
Male, 34
Account Manager
Portland, USA.
Homeowner, lives with wife.
PARTICIPANTS C + D
Male 70, Female 65
Both retired
Stroud, UK
Homeowners, kids left home.
RESEARCH GOALS
I framed my goals as questions seeking to unearth behavioral and attitudinal insights:
Why do people book vacations?
How do people research and book a vacation?
What information do they need when booking a vacation?
What creates friction when booking a vacation?
What enhances the booking experience?
And ultimately, who is Zeit’s target audience?
Research Findings
Research is an essential part of the vacation process and takes “weeks” to get right.
Older travellers rely on traditional media for inspiration.
Airbnb is often the starting point, with the map functionality widely praised.
Heavy reliance on user generated reviews, especially photos.
Reassurance is needed throughout the booking process, especially once users hit ‘confirm’.
Itineraries and trip details instill confidence: “they know their stuff”.
The User
Both Millennials and Boomers could be the Zeit primary audience. But I leaned towards the older audience because the research data disclosed specific UX challenges that I wanted to tackle.
To synthesize findings for this audience, I invented a man called “Alan” using empathy mapping and persona tools.
While grounded in interviews and secondary research, these are fictional artifacts (a gut check, not gospel) to identify the major needs of the user.
MOTIVATIONS
Getting value for money
Collect stories to brag about
Learn & observe other cultures
GOALS
Complete his travel bucket list
Experience high quality service
Be in control of the booking process
NEEDS
Someone to talk to
Peace of mind
Secure booking process
Transparency and clarity
Advice from experts he trusts
FRUSTRATIONS
Poor customer service
Fear of getting ripped off
Not being “internet savvy”
Not having specific information
02: DEFINE
Goaaaaaaals!
Armed with data, the next step was to craft a problem statement rooted in the user.
I got tight on Alan’s goals and juxtaposed them with Zeit’s in a Project Goals document, factoring in Tech Considerations too.
There was a shared goal for a secure booking process and an easy-to-use, intuitive booking process. In the context of users like Alan, this suggested simplicity, clarity and access support to customer support.
In pursuit of clarity, a remote card-sorting exercise asked people to categorize 30 vacations.
The results showed that participants were likely to organize cards by geography (e.g. Africa) or theme (e.g. Sport) and that people’s grasp on historical dates fluctuated - so asking users to search an inventory of 289 vacations by year or even century could create confusion.
Smashing together customer research data, project goals and the card sorting results, I crafted the following problem statement:
How might we help Alan feel empowered when booking a time travel vacation online?
Sitemap
The sitemap was the first artifact created against this statement and allowed me to identify the relationship between content although I was still grappling with the taxonomy. The site map also revealed repetition, which led to efficiencies -fewer things to wireframe, right?
03: DESIGN
User Flow
I created user flows to imagine how someone could book a time travel vacation.
Specifically, I hypothesized where a user could drop out to get information elsewhere, i.e. traditional media or phoning customer support. Identifying these deviations shows where Alan is lacking empowerment and can be explored via Ideation.
Click to go big.
Sketches
Sketching is an opportunity to experiment with ideas and apply inspiration I’ve seen - not exclusively digital - and discount ideas that don’t satisfy the user.
My process is essentially: Sketch. Sketch. Sketch. Sketch? Sketch! SKETCH! SKETCH! Skeeeetch? Sk… etch. Sketch. Sketch? Sketch. Wireframe.
Wireframes
By putting meat on the bones of the artifacts I’d created to date, these wireframes helped to organize and plan the site layout and prioritize different features.
Reviewing these with my peers also led to a new navigation bar - my original version included an adaptive search bar but conflicted with other navigation tools. As the saying goes, “All of us are smarter than any of us” so the search bar was axed.
Click to enlarge
Brand Identity
I’d been forming a brand identity for Zeit in my mind throughout the process, collecting inspiration and references, while mulling over brand positioning based on the insights gathered. The following brand values - all things we’ve established as important to the user - informed the Zeit visual aesthetic:
Sophisticated
Stories
Safety
Service
UI Kit
*LEARNING CURVE KLAXON!!!*
I explored logos that denoted time travel. I fell hard for a cluster of asymmetrical shapes that evoked fragments in time. But once I began designing it flunked almost every accessibility test. So I adapted it for something less hectic in the final UI Kit.
As time travel is new and (potentially) intimidating for some, I sought a font and color palette that oozed style and class. Together, the dark tones and typography imply excellent service and safety - but without causing alarm.
Responsive Designs
Desktop: Homepage
(click to enlarge)
Desktop: Product page
(click to enlarge)
Tablet version
(click to enlarge)
Mobile version
(click to enlarge)
04: TEST
Usability Testing
Usability Testing set out to validate the hypotheses we’d made during the design process. A semi-functioning prototype was made, 5 users were recruited and observed via Zoom screen share as they performed tasks. Note to self: recruit people who have computers with a) functioning webcams and b) enough memory to load the prototype.
A selection of screens from the prototype
Goals
Users who are asked to book a trip will begin the process with the Search bar.
Users will display a preference for clicking buttons/links than images.
Users will spend min. 20 seconds on the search results page before clicking on a product page.
‘Theme’ is prioritized over ‘Destination’.
The checkout process is easy to follow.
The ‘How does Time Travel work?’ module is of interest to first time users.
Tasks
Find an Arts & Culture trip
Imagine you’re a Star Wars fan. Is there a trip for you on Zeit?
You’ve always wanted to become a Samurai. Book a trip for that on Zeit.
You’ve got a budget of €3,750. Book a trip for that amount.
Usability Testing: Results
100% Task Completion Rate
4/5 participants completed all 4 tasks unaided. The other participant completed all 3 tasks unaided but needed a prompt with Task 2.
80% checked out in under 60secs
2/5 felt the flow from ‘Reserve Now’ to ‘Review Reservation’ was abrupt.
80% searched via Search field
4 participants began their search via the Search box. The other participant used “Themes” in the masthead navigation bar.
100% interpreted icons correctly
5/5 could identify date, destination and price across the site.
Affinity Mapping
A pile of Post-It notes were organized into an Affinity Map, grouping feedback per the site structure.
A sobering yet productive exercise, this allowed me create actionable feedback and inform where to focus my efforts to iterate and explore new opportunities.
HIGH PRIORITY NEXT STEPS
Rework Discovery Unit, make taxonomy clearer
Reduce "How does TT work?" unit to a single CTA
Rework Search Results page to help users see results more clearly and less likely to miss something
Smooth out the user flow from 'Reserve Now' to 'In Your Cart'
Separate User Name/Email from Shipping address
Turn Image on 'Product Page' into a Gallery
MID PRIORITY NEXT STEPS
Add actions/"magic" to Confirmation Page
Add PayPal/Credit Card logos to 'Billing' page
Add expandable Search bar to horizontal navigation
Find new icon for Price
LOW PRIORITY NEXT STEPS
Add Share feature to Confirmation Page
Explore 'Pay 50% Now' feature
Review Taxonomy of Checkout Process
Revised Designs
05: Conclusions
The Wrap Up
The brief was loose but I answered it. I took a hypothesis - that older travelers were the right audience for Zeit - and proved it through research and usability testing.
True, my sample size was tiny, but I saw patterns in this user’s booking behavior that led to an actionable problem statement:
How might we help Alan feel empowered when booking a time travel vacation?
The finished site gives users control via clearly labelled navigation, customizable search tools and detailed trip information. The visual aesthetic evokes confidence that this is a reputable brand.
I do feel the site is a little conservative: exploring a dynamic search tool, such as an interactive timeline or map would have been fun.
If I could travel back in time (!) and do this again, I would:
Conduct more customer interviews with Boomers
Lose Personas in favor of a Jobs-to-be-Done approach
Spend more time ideating individual product features
Buy myself an ergonomic desk chair
Shout Outs
Big love to the following because “All of us are smarter than any of us”:
Qa’id Jacobs - Mentor Extrodinare
Rachel Feldman - Study Buddy
Anna Samarina - Study Buddy
The 5pm CET Group Crit Squad
Maybe next time?