Zeit.
Scope: Responsive website, branding
Client: Zeit
Timeline: 5 weeks (March - April 2021)
Role: UX/UI Designer
Team: Self-directed; with feedback from mentor and peers
Tools: Figma, Optimum Sort, Whimsical, Zoom
The Company.
Zeit, founded by Richard Branson in Germany, has revolutionary technology that allows people to travel to the past. Zeit is here to sell trips with a total of 289 destinations all over the world, up from prehistoric times through today, to any wanderlust.
The Challenge.
Being the first of its kind, Zeit needed help establishing themselves in the time travel industry. The challenge here was to design a responsive e-commerce platform, as well as to enhance visual branding that embodies both the nostalgia of the past and the possibilities of the future.
The Objectives.
Design a logo for the company that can be modern and historical at the same time:
Design a responsive e-commerce responsive website that allows customers to browse through different trip categories and details, filtering via classifications, as well as booking.
The work is here.
1. Emphasize
Planning Research: Goals, Methodologies, Results, Synthesis
Research Plan
Research Goals
We want to know the goals, needs, and frustrations people have towards booking travels, as well as motivations, attitudes, and concerns people have towards time travel trips so that we utilize this information and build content.
Research Objectives
Identify the demographics and key characteristics of potential users.
Understand the motivations and concerns people have towards time travel.
Understand how and why (and why not) travelers choose certain travel destinations.
Discover the types of past events and experiences travelers would like to explore.
Identify the key features currently existing booking products offer that users like and dislike.
Research Questions
What are people’s goals and motivations towards time travel? What emotions and sentiments arise?
What are people’s concerns and fears about time travel?
What kinds of factors do people think about when they choose certain travel destinations (or not)? How do they make that decision?
What types of past events and experiences would travelers like to explore when booking time travel trips?
How many days/weeks/months would people like to spend on a trip? How do they make that decision?
What are some of the key features that currently existing booking sites have? What frustrates travelers?
Research Methods
Market Research - To study consumer behavior and identify their needs and trends based on existing research related to travel.
Competitive Research - To identify our direct and indirect competitors and analyze their offerings, strengths, and weaknesses of their products and services.
User Interviews - To gain deeper knowledge on consumers’ attitudes, goals, needs, motivations, frustrations, and concerns by conducting one-on-one interviews
Assumptions/Risks
We might have trouble finding the true attitudes people have towards time travel. Because it is a very new idea and nobody has experienced it personally, biases may arise.
We might have trouble explaining the safety and privacy concerns people may have towards time travel, since the actual procedure and policy is TBD at this stage.
We assume that the time travel trips are very expensive, yet the actual cost is unknown at this stage. In the primary research phase, we will eliminate the cost factor for now, and assume participants can afford the trip at any price point.
Market Research
WHO
Millennials are the biggest spenders
More solo travelers these days
Travelers over the age of 30 have seen a big increase
Gen X and Baby Boomers are most likely to book vacation packages
WHAT
More young people look for inspirations online, especially user-generated-contents on social media
Digital nomads will more likely to go to places less discovered
Avid travelers and industry experts will more likely to decide on destinations based on word-of-mouth.
WHEN
More people are looking to book last-minute leisure trips.
For busy seasons, people still tend to book well in advance.
HOW
Most people still prefer to use desktop compared to mobile devices when browsing travel inspirations and booking trips.
For Millenials, The ability to book using mobile devices is now the second biggest consideration after price.
OTHER TRENDS
Care more about no-fee cancellations.
Raising attitude towards sustainable tourism.
More focus on policies and regulations.
The needs of unique experiences grow.
Competitive Research
User Interviews
To better understand our users — their key goals, needs, motivations, frustrations, and pain points — I conducted 5 remote interviews that consisted of open-ended questions about their travel and booking experiences. After the interviews, I was able to find customer behavior patterns.
Participants
Female, 34, Freelance English Teacher, China
Male, 38, UX Researcher, Canada
Female, 40, Business Owner, Canada
Female, 24, Student, Denmark
Male, 24, Freelance Director, China
Results
Based on the notes from interviews, I used word cloud to see what key words appealed most frequently.
Persona
Using the insights gained from user research, I then created a persona to present the target audience group. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.
Meet Tracy. She is the archetype that describes the various goals, needs, motivations, fears, and frustrations among potential target users. This is a reference tool that I used throughout the entire design process.
Empathy Map
Next, I immersed myself in the persona Tracy’s environment. I brainstormed on what she may be doing, thinking & feeling, seeing, hearing, as well as her pain points and gains, in her daily life and when travelling.
The empathy map I created helped me diving deeper into the customer segments as well as building out the “user” in a user story.
2. Define
Project goals, in-depth competitive analysis, feature roadmap, card sorting, site map
Project Goals
After analyzing the research findings, it was a matter of turning the corner into product definition. At this stage, I was working on finding common grounds among business goals, user goals, and technical considerations to determine main project goals and actionable problem statements.
Business Goals: Desired business results from the client’s stakeholders
User Goals: What users want based on research findings
Technical Considerations: Technical factors that must be taken into considerations determining feasibility
Common Goals. The common ground among all three.
In-depth Competitive Analysis
I further dug deeper into a few of our direct and indirect competitors, including Expedia, Skyscanner, Airbnb, G-Adventure, Contiki, Lonely Planet, National Geographic Expeditions, and TourRadar.
I completed a few tasks on each website and observed their task flows and features offered. See the full list of in-depth competitive analyses here.
Feature Roadmap
Based on research results from competitors and users and project goals, I then created a comprehensive Feature Roadmap — a list of key elements that should be included in the product’s design, prioritized based on their importance to the business and the users. See the full list of feature roadmap here.
Card Sorting
Since Zeit offers a large number of packages to many destinations from prehistoric times to the present, it was important and valuable to explore how users organize and navigate Zeit’s content.
Process
Tool: Optimal Workshop, online
Type: hybrid, with closed categories and open suggestions.
Cards: 20 cards displayed in random order
Participants: 9 participants
Average time spent: 6m1s
Results
Eventually, the cards were sorted by three different eras with six options in each:
Interests: Arts & Music, Culture & Social, Politics & Diplomacy, Nature & Environmrnt, Religion & Philosophy.
Time Periods: Prehistoric, Ancient, Middle Ages, Early Modern, Late Modern, Contemporary.
Continents: Africa, Asia, Europe, North America, South America, Oceania.
This information is particularly important for us to organize our contents, as well as navigation and filtering system later in the design process
Site Map
Building from the research results, project goals, feature roadmap, and card sorting results, I created a sitemap that included proposed pages to help plan the structure of the website. I use it as a blueprint for the website to help to organize all contents on the website as well as understanding the navigation and flow.
3. Ideate
Interaction design: task flow, user flow, wireframes
Task Flow
The main task users do on Zeit is to browse trips and book one. I constructed a task flow breaking down the necessary steps for a user to get from the landing page to the order confirmation page.
I find task flows helpful for ensuring that we’re designing sequentially and thoroughly, so we can think through building a good user experience in more detail.
User Flow
To further analyze the information architecture, I created a user flow diagram, which includes decision points wherein the persona’s journey to the desired goal can differ, based on decisions the persona need to make in interacting with the design.
It helps me identify the key pages/screens that need to be designed, user actions, and potential user decision points. Together it helps me understand the system better.
Wireframes
Once I decided on the layout, I then created wireframes in Figma. I also spent some time summarizing the brief and doing research to write content such as company information and trip details.
I find having wireframes help me identify the outline of the content and create a solid foundation for future steps of the design process. It makes the visual and interaction design much easier. To ensure the wireframes were created to fit the specifics of a responsive website, I also built out the mobile and tablet versions of wireframes. I changed the sizing, scales, & placement according to common design patterns.
Please see the full list of wireframes here.
4. Prototype
Visual design: logo, UI Kit, UI design, prototype
Logo Exploration
This is my logo design process as well as the final version. I began with a strategy, summarizing 10 adjectives to describe ZEIT: modern, historic, retro, futuristic, bold, comfortable, dynamic, tech, abstract, adventurous. Then I sketched and digitized multiple variations for symbols, wordmarks, letterforms, and their combinations, experimenting with variations on style, sizing, and alignment. I then narrowed down the options and finalized with the current one.
UI Kit
To ensure that all responsive web pages follow the same visual guidelines, I created a UI kit, including visual attributes of design such as fonts, colors, and shapes. I find having a UI kit speed up the entire design process. It also helps achieve consistency and cohesiveness throughout the entire design. UI kit later becomes a foundation for the design system.
UI Design
After identifying the key objectives of the UI design and creating the UI kit, I applied the elements to the actual UI design. I created 15+ screens including the entire user journey from the home page to the booking confirmation page. After I designed the first draft, I revised it multiple times based on feedback from my mentor and peers.
Prototype
After having the full UI design, I created a prototype on Figma to prepare for usability testing. Prototyping often helps reduce UX friction, eliminate errors, and uncover mistakes and false assumptions.
Please find the full prototype here.
5. Iterate
Usability test, affinity map, and priority revisions
Usability Test
Test Objectives
Test whether the users can get clear information on Zeit’s products and services on the homepage.
Test how and how many ways users can browse trips and land on destinations.
Test whether it is easy and simple for users to navigate.
Test how easy it is for users to check out and confirm the booking.
Note any generation hesitations, confusion, difficulties in the process.
Test Subject
A high-fidelity prototype (from Figma) that contains a fully completed desktop version UI design.
Test Methodology
A 15-second test on the screenshot of the landing page created on Usability Hub.
Remote, one-on-one test, via Zoom with screen recording.
Tasks / Scenarios
You’ve just heard about time travel is available to the public on Zeit. You want to find out some information on the company, the process, and the safety. Tell me what you think based on what you see on the home page.
Now that you are interested in Zeit, you want to look for trips in North America, in the contemporary time period, and relates to Arts & Music. Where would you go to find a trip?
After viewing all the destinations, you want to book the Woodstock Festival for November 10th to 13th, 2021 for two people. How would you do that?
Test Participants
Male, 47, Web Developer
Male, 34, Sound Engineer
Female, 40, Business Owner
Female, 24, Marketing at a tourism company
Male, 26, Data scientist
Affinity Map
After conducting the usability test, I used different colored Post-its to note my observations and their feedback. I then sorted by tasks and created an affinity map to organize the findings.
Having an affinity map helps me identifying reoccurring behaviors and feedback, so I can gain insights from the synthesized information and identify design recommendations to apply to the iteration.
Priority Revisions
The results show that 100% of test participants completed all tasks with no errors, but they did provide some feedback on the improvement of visual hierarchy and suggested some additional features.
According to their insights, I revised the UI Design and prototype based on the recommendations drawn from the Affinity Map. The changes are shown here.
I did minor tweaks on text size, color, and layout on the homepage, so together it presents a better visual hierarchy. I also changed the search toggle to make the tabs more visible. I also deleted a few unnecessary buttons to make the browsing and booking process leaner. I further created an option for users to customize their trip later to avoid overwhelmingness and drop-out during the check-out phase. Lastly, I added trip suggestions on the confirmation page to encourage more sales.