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
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.
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.
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.”
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.
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.
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.
Task Flow
This task flow shows the general route of how a user may book a time traveling experience.
User Flow
This user flow gives a better idea of how the users may move through the website to book an experience.
03 Prototype & Test
Lo-fi Wireframes
Initial sketches were created to get my ideas going.
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.
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.
Final Look
With all the high-fidelity pages designed, I built up the final prototype with the included revisions.