.png)
.png)
Zeit
Building a responsive e-commerce site for a time travel tourism company.
Project Date: Jul - Sept 2020
Company: Zeit (conceptual)
My Role: Research, personas, site maps, user flows, sketching, wireframing, visual design/branding, prototyping, user testing
Team: Front-End Developer, Product Manager, Group Crit Peers
Overview
About Zeit
Zeit is a company that has finally made time travel tourism a reality. Offering a total of 289 approved destinations all over the world–from prehistoric times to today, users can book trips to destinations in the time period of their choosing.
The Challenge
Design a responsive e-commerce website in which travelers can book travel packages to destinations at different times in the past.
Objectives
Establish Zeit as a brand that is both modern and historical and design a responsive e-commerce website that is easy to use and allows customers to categorize and filter trips in ways that are relevant.
Process
Process
For this project, I decided to follow IDEO’s Human-Centered Design Thinking process to ensure that my design decisions are backed by research and user feedback.
Empathize
Why
To conduct a variety of research methods to identify current travel habits, goals, and frustrations in order to design a successful product for Zeit.
How
-
Secondary Research
-
Competitive Analyses
-
Surveys & Interviews
-
User Persona
Competitive Analysis & Provisional Personas
To begin research for Zeit, it was important to understand Zeit’s direct competitors in order to get a good understanding of where travelers are currently turning to when booking travel.
Because time travel is a new technology, it was essential to identify indirect competitors that dabble in advanced technology, such as the space exploration industry, to gain insights on how such companies are distilling complex science.
I then created provisional personas for the types of travelers that would be relevant for Zeit.
.png)
Core-Flow Analyses
After identifying the strengths and weaknesses of Zeit’s direct and indirect competitors, I decided to take a closer look at each competitors’ check-out flow.
What I learned:
-
Sticky panels make for easy booking
-
Concise details help inform users efficiently
-
Clear & prominent CTAs are important
-
All-in-one processes streamlines the booking experience
-
Advanced tech needs to have a good balance of scientific, educational, and general public facing
Competitive Analyses Findings
To conclude my competitive analyses & secondary research findings, I established three main points:
Clear & Informative
Zeit will have to make time travel approachable as well as informative
Categories & Filters
Zeit will have to create enough filters and categories to suit travelers of all ages and demographics
Casual Browsing
Zeit should design for the casual browser who may not readily have their travel dates available
Survey
After understanding competitors in the industry, it was time to look into the habits of users and empathize with them.
I had 13 total survey takers that ranged from Gen Z to Baby Boomer in age. I broke down my surveys by the following sections:
-
General Information
-
Planning Travel
-
Booking Trips
-
During Trips
-
Thoughts on Time Travel
Survey Findings
A few interesting insights I uncovered from my survey results:
-
Google is the #1 site survey takers use to conduct travel research, followed by Kayak and Trip Advisor
-
Kayak is the #1 site survey takers use to book trips, followed by Google Flights, then Airbnb
-
Most survey takers mention price comparison as what they like about the sites / apps they use
-
Most survey takers mention feeling overwhelmed by the amount of choice and bad UX as frustrations they have with travel apps/sites
Interviews
Surveys provided me large quantities of data, with which I used to select 4 survey-takers that I envisioned as the main user of Zeit - a tech-savvy millennial who loves to travel. The goal of interviewing these individuals was to dive deeper into the qualitative experiences of my users.
Each interview took up to 1 hour in which I asked them the following follow-up questions:
-
Can you walk me through how you planned your last trip?
-
What does successful research look like/mean to you?
-
How would you book a trip right now?
-
What would you like to see if you could travel back in time?
Interview Results
A few interesting insights I uncovered from my interviews:
-
All participants demonstrated a need for there to be flexibility when it comes to travel
-
All participants believe that successful research means being prepared and happy with the choices they made
-
The most common approach to booking travel would be to use online resources to search for flight > hotel > transportation > activities
-
Two common themes for an interest in time travel is the desire to discover ancestral history and to see things that no longer exist due to human activities
Define
Why
To leverage all previous research to define high level goals and identify priorities for Zeit.
How
-
1 User Persona
-
Project Goals
-
Feature Roadmap
-
Card Sorting
User Personas
Through interviewing my four research participants, I was able to distill their goals/needs and frustrations into one clear user persona. This is Andrew, a 25 year old tech-savvy software engineer who lives in New York. Though he makes a better-than-average salary, he is smart about saving. When traveling, he likes to do a lot of research beforehand to ensure he is getting the best experience for its value. When it comes to sites and apps he uses to plan his travel, Andrew is particularly picky about the aesthetics, ease-of-use, and the product's ability to inspire him.
"Never get so busy making a living that you forget to make a life."
– Andrew
In order to make sure we design the perfect travel product for Andrew, we need to make sure that it...
-
has enough information for him to make the best decision
-
ensures that he gets the best deal without sacrificing the quality of the experience
-
fully prepares him before traveling
-
allows him to personalize his trips and that the itineraries are flexible to account for his personal tastes and preferences
.png)
Project Goals
After spending a significant amount of time understanding users, I took a step back to identify some project goals to help me see where things aligned or where there might be compromises or conflicts between business goals, user goals, and technical considerations. This step would be essential in getting all the stakeholders involved in the project on board.
.png)
Feature Roadmap
Zooming out and observing project goals from a high-level, I was able to identify and prioritize features for ZEIT in a Feature Roadmap.
I prioritized features by:
-
Must Have
-
Nice to have
-
Surprising and delightful
-
Can come later
For the purposes of a working MVP prototype for this project, I worked towards creating the features under "Must Have."
Card Sorting
One of the major challenges of designing a product for a Time Travel Tourism site is organizing the information architecture: how do we design so that users can easily categorize/filter through a travel site that offers not just the destination, but the time period as well?
To tackle this challenge, I conducted an open card sort exercise remotely via OptimalSort to see how people would sort a series 30 cards of events in history. 10 people with no knowledge of my project participated in the exercise.
Card Sorting Findings
The 63 total categories created culminated into three major topics:
-
Location
-
Time
-
Culture/Experiences
Insights from this card sort helped inform how I organized my products for Zeit going forward.
Ideate
Why
After defining who I'm designing for and what features to include in my design, it was time to visualize the product in the ideation phase.
How
-
Site Map
-
Task Flow
-
User Flow
-
Wireframes (Lo-fi sketches, mid-fi)
Site Map
Before designing anything, it was important to visualize Zeit's pages and how they relate with each other. Utilizing my insights from my card sort exercise, I categorized the trips by Destination, Time Period and Experiences. All other elements were based off of my feature roadmap's "Must Have" features.
Task Flow
The main task I wanted my users to be able to do with my prototype later on was to successfully buy a trip, so I created a task flow for the check out process to see how it would work in detail, and to inform which screens I would design for.
User Flow
Then, I moved on to a more comprehensive user flow for every possible action that a user could take on Zeit's site that could lead to booking a trip. I considered how certain pages could relate to each other, and how the flow would differ based on decisions that the user makes (logged in vs not logged in state) or if the user were to take a different route to research/book trips (like using the search tool vs exploring pages).
.png)
Sketching Wireframes
Now that I have my information architecture set up, it's time for wireframes. Because the main goal for this product is a successful purchase flow, I focused on sketching wireframes for the pages that would lead to purchase:
-
Homepage (I sketched out 3 versions of the homepage and decided on a combination of #1 and #2)
-
Explore Destinations
-
Search results (success)
-
Search results (failure)
-
Trip details
-
Multi-form check-out process
Digitizing
Wireframes
The next step was to digitize my wireframe sketches, which I did on Figma. Here, I was able to begin working with a grid, determining typography choices, building components and selecting icon sets that would later on inform my style guide and UI kit.
Design
Why
Now that I have tackled the challenge of designing the wireframes for a responsive e-commerce site for Zeit, it was time to work on Zeit's branding. The objective was to establish Zeit as a brand that is both modern and historical, which I have done through logo design and coming up with a style guide + UI kit to bring my wireframes to life and get it ready for prototyping.
How
-
Logo Design
-
Typography Exploration
-
Style Guide
-
Applying final UI designs on wireframes
Logo Design
The biggest challenge when designing the logo was that it should be both modern and historical at the same time. I did some research and sourcing of both modern fonts as well as sci-fi fonts. I also browsed around some prints and stumbled upon the optical illusion of the infinity sign that worked perfectly for Zeit, because the letter Z is prominent and the infinity sign itself looks like an hourglass. Paired with a sci-fi font, I was able to come up with multiple versions of a modern and historical logo. See my explorations below.
Style Guide
After choosing a logo, I created a Style Guide. During the wireframing stage, I had already given thought to my typography choices and so I built that into my wireframes and the type hierarchy is included in the Style Guide. I chose Circular because it is a very modern and simple font and wouldn't get in the way of how I envisioned Zeit's final product would be, which was very photo-driven. This design choice is based on my surveys, interviews, and my user persona-Andrew, who prefer travel products to be modern, user-friendly, visually appealing and inspiring.
Applying UI to screens
Armed with my Style Guide and mid-fidelity wireframes, I applied the UI for Zeit's homepage in desktop, tablet and mobile. One major change I made was not to use the lime green that was in my Style Guide because I felt that the lime green felt unnatural. Instead, I used the color-picker to draw out colors from my hero image in order to apply more natural colors to the UI.
.png)
.png)
.png)
UI Kit
Finally, with all my components designed and finalized, I created a comprehensive UI Kit that I would refer to when updating the rest of my wireframes.
.png)
.png)
Prototype
Why
With my UI Kit completed, I updated the rest of my mid-fidelity wireframes and created a high fidelity click-through prototype to create an experience as realistic as possible for users to test in the next testing phase.
How
-
Click-through prototype
High-Fidelity Prototype
Using Figma, I created a clickable prototype with two tasks in mind that I would give to users when conducting usability testing:
-
Users book a trip by using the search tool
-
Users book a trip by browsing destinations
View the prototype below to see the UI design applied in all its glory!
Test
Why
With my prototype up and running, it was time to validate and test my product and make any necessary revisions.
How
-
Usability Testing
-
Affinity Map
-
Priority Revisions
Usability Testing
I began by creating a test plan which included test objectives, subject, method, participants, recruiting plan, script procedure, tasks/errands and test goals.
I recruited 4 participants and conducted usability testing for the product in-person for one hour per session. I presented the scenarios/tasks to them and observed how they completed the tasks. After they completed the tasks, I followed up with questions relating to each page and documented every success, concern, and observation.
The two scenarios were:
-
You just learned about Zeit so you're curious to explore what destinations they offer. How would you explore Zeit and book a trip?
-
You have your dates in mind and you know where you want to go. How would you book this trip?
Affinity Mapping & Priority Revisions
In order to get a better understanding of any overlapping sentiments, behaviors, and frustrations, I created an affinity map so I can organize my notes. I assigned a sticky note color to each user, jotted down important quotes extracted from my notes, and grouped them into three distinct sections: Successes, Concerns, and Observations.
Successes were things that proved my hypotheses right and therefore I would keep. Concerns and observations were things that I may need to change, based on the problem itself and how many people had the same concerns. I came up with problem solutions for each serious concern/issue in the right column and would refer to this document when iterating on my designs.
Iterate
Why
Based on user testing feedback, improve the usability of my product.
Revisions
See below for major changes I made to my prototype.
The Problem:
-
Search tool is too vague and search results don’t filter packages by spots available (I.e. I want to travel with 5 others, but results with less than 5 spots show up)
-
Users often don't continue scrolling
The Solution:
-
Adding more features to the search tool to include # of travelers, and an option to select “my dates are flexible” in the calendar picker
-
Pulling everything in the page design up so content is visible on first glance
The Problem:
-
Users aren’t aware there are other options and don’t continue scrolling
The Solution:
-
Adding a fade between the hero image and content for a smoother transition and pulling everything in the design up so more options are immediately visible
The Problem:
-
Users feel confused when they land on this page because it looks too much like the homepage, especially with the same interactive map they just saw
The Solution:
-
Changing the fade from black to white to further differentiate from the homepage and switching out the interactive map with a carousel of most popular destinations
The Problem:
-
Hero text and image is too large and fills up too much of the screen
The Solution:
-
Adding a fade for a more natural transition into the content and pulling content up so that it is more readily visible
The Solution:
-
Updates on the multi-form check out - moving DOB and passport info into the previous page under personal info instead of secure & payment
The Solution:
-
Hiding credit card number in the final review page before users check out to ensure that information is secure
The Solution:
-
Replaced the review for Egypt with a different destinations so users are prompted to find other ways to get to the Egypt page (this change is made for the purposes of user testing).
Next Steps
Conclusion
In conclusion, this product was a success because I kept my users in mind throughout the entire design process and the end result was a visually appealing and user friendly product that distilled down a technology that could have easily been over-complicated.
Every user was able to complete the tasks given to them and the only changes I made were to the UI to make the design more clear and user-friendly. Because I spent a significant amount of time focusing on the information architecture and user flows of Zeit, I prevented any issues users might have run into regarding how the site is organized, especially given the challenge of designing a fictional time travel tourism site where users had to consider not just where, but when they would like to visit a place.
Future Considerations
Because this project was created with limited time and resources, there are a few things I would do differently if I had the time and resources:
-
Collect more data from surveys
-
Interview more individuals
-
Conduct usability testing with a larger sample of participants before and after I made the priority revisions
-
Design and prototype every user & task flow
-
Work with copy editors and marketing professionals to package up products/trip details