zeit 1280x720.gif

Zeit

A responsive web design about time travel

Scroll for more ↓

Zeit is a subsidiary of Richard Branson’s Virgin empire. After a long struggle with Elon Musk, Virgin has been able to make time travel tourism available to all of us. Zeit is looking at you to design their new brand and set up an e-commerce responsive website so they can sell travel packages and tickets to different times. 

 

Role: UX Designer (Research, Visual Design, Interaction Design, User Testing)

Tools: Figma, Adobe Illustrator, Adobe Photoshop, Optimal Workshop, Miro, Trello, Zoom

Duration: 2 Weeks (80 Hours)

Challenge: Create a responsive web design

Team: Self Directed, with feedback from the mentor and peers

Design Process

01 Research

Research Plan
Competitive Analysis
Provisional Persona
Survey
User Interview

02 Define

User Persona
Empathy Map
Feature Roadmap
Project Goals
Card Sorting
Sitemap
Task Flow
User Flow

03 Design

UI Style Tile
Lo-fi Wireframes
Hi-Fi Wireframes

04 Prototype & Test

Usability Testing
Wireframe Iteration

01 Research

Research Goals

  • What age group would be interested (and have the money) for this

  • What do people want / hope for out of this experience?

  • Would there be any other reason other than leisure to travel through time?

 

Methodologies

Competitive Analysis & Provisional Persona - used to analyze the current market and identify potential opportunities and / or threats

Primary Research - Will survey and interview potential users to better understand their wants and needs

Competitive Analysis + Provisional Personas

I started out with a competitive analysis to analyze the current market and identify potential opportunities and / or threats

competitive analysis copy.jpg

Primary Research

Overview

I started my research by creating a survey through Google forms. Because this is a hypothetical concept about time travel, I focused more on travel booking, which is part of the process for the website.

Those who were willing to do a follow up interview, I was able to meet and chat with them through Zoom. I created an interview guide to facilitate the user interview process.

Here are a few takeaways:

  • I conducted interviews with 5 participants, 3 male and 2 female. Participants ranged from age 23-38.Inspirations for next destination are generally found through social media (Facebook, Instagram tags)

  • Travels on average of about 2 times a year

  • Most people prefer buying directly from the airline, but research through different aggregators

  • People who have reward points are more likely to stay with a certain airline

  • Budget for flights and hotels are ~$1500 on average

  • Stays are on average 1-2 weeks

Needs and Frustrations

  • Comparing prices to find the cheapest and best deals

  • Finding lowest flights in the season

  • Reward programs

  • Having options when browsing for destinations

  • Adjust price points

  • Being able to input to calendar

  • Clean and easy interface

Final Notes

I realize I may not have asked enough questions about the services and was thinking more about the experiences themselves. If I were to do them again, I would ask for more questions on the services and look more into that.

02 Define

User Persona

Through the research and user interviews, I created a user persona to represent the key audience. This helped me focus on addressing the major needs of the most important user groups.

persona copy.jpg
 

Empathy Map

To further help me understand the user, I created an empathy map. This helps me to flesh out the persona more by thinking about what they would do, think, feel, etc. in their daily lives. These things do not necessarily have to be about time travel.

Empathy Map.jpg
 

Feature Roadmap

Because this is a new website, I needed to organize all the features I wanted to add. I had four different tiers. The first being a “Must have” or MVP (Minimum Viable Product), which are all the features needed to have this app function. The second is a “Nice to have,” the third is the “surprising and delightful,” and the last is “can come later.”

Feature Roadmap - Zeit - Joann - Sheet1.jpg
 

Project Goals

I also wanted to make sure this app could be functional by showing project goals on the business side, showing how it can create a profit, while on the user side, it would satisfy their needs.

Project-goals.jpg
 

Card Sorting

I used the card sorting method to see how users would sort through potential experiences for time traveling. I created a total of 30 cards, and through the 7 participants, created a dendrogram through optimal workshop.

dendrogram (1).png

Sitemap

Having a sitemap was important because it further organized the feature roadmap, helping me understand where I should place each feature in the website.

sitemap_1.jpg

Task Flow

This task flow shows the general route of how a user may book a time traveling experience.

task flow_1.jpg

User Flow

This user flow gives a better idea of how the users may move through the website to book an experience.

User Flow - New frame.jpg

03 Prototype & Test

Lo-fi Wireframes

Initial sketches were created to get my ideas going.

lofi.jpg
 

Hi-fi Wireframes

After creating the lo-fi wireframes, I went on to create the Hi-fi wireframes in order to prepare for the usability testing.

hifi.jpg

Usability Testing

After making the wireframes, it was time to create the prototype, so people can interact with it and test the website. I proceeded with doing a usability test, where I was able to test out the prototype with 5 different people using 3 different scenarios. This helped me to understand the pain points and / or things that were not working about the website. Here were some takeaways from the testing.

usability-test-findings-copy.jpg

Final Look

With all the high-fidelity pages designed, I built up the final prototype with the included revisions.

 
Previous
Previous

Let It Brie