Project Background
The human race has been dreaming about time travel for ages. And Time travel is finally here. with the announcement of the International Concordance on Time Travel, Zeit is launching a responsive website to enable users to book travel to different times and places. With a total of 289 destinations all over the world from prehistoric times through today, travelers will be able to look and do things typical of the time.
Some of the popular packages include: resort outside Vienna in the 18th century and witness Mozart's first concert; resort in Australia during Jurassic period; get feeling of the historic day Neil Armstrong landed on the moon and many more. Zeit's goal is to fulfill potential customers' expectations and requirements on booking time travel trips.
Problem Statement
How might we: Design a responsive website that is easy to use and navigate and allows users to book an online journey without frustrations.
How might we: Design a brand identity that is neutral and modern but retains an ode to the past.
Let's Get Started
The first thing we are going to do is identifying the UX design process, and defining each stage, then gradually flowing into more details throughout the case study.
Stage one | Empathize
We started our journey with a UX research plan where the essential part is understanding our potential users, empathize with their problems, understand their needs and motivations, and determine their behaviors. Throughout the UX research process, we conducted several types of research, including secondary research, competitive analysis, and 1 on 1 interview, and all are equally valuable in our further journey. We started searching and reading the online available data about the travel market.
Here are the summary findings of our secondary research:
Next step, after the market research, we did the competitive analysis. This method provided us data about our competitors for better understanding and determining their strengths and weaknesses, also understand potential Zeit's users. Revealing and understanding competitors' aspects opens further possibilities and innovations for Zeit.
The graph below shows some finding data of our competitors:
For the primary research (due to the pandemic situation) we conducted 1-on- 1 over the phone interview. The interview script mostly consisted of questions about traveling and booking experience. We interviewed 5 participants from different locations and backgrounds. Here are some of the insights of the interviews:
• All of our participants like to travel and they do travel regularly (2-3 times per year)
• Four of them travel both domestically and internationally, and one travels only domestically.
• All of the participants look for their trips online, considering it fast, convenient and efficient.
• Mostly used booking sites between my participants are Expedia, Airbnb, and Google flights
• Two of the participants read the reviews on Trip Advisor before making travel decisions.
• All of the participants travel with a planned budget, and two of them mentioned they like to always carrie extra money if needed.
• Three of the participants like to travel and learn a new culture, meet new people, experienced something they have never done before.
• All of the participants must have their electronic devices 24/7 with them while traveling.
Below is the graphic with the characteristics of my interviewees:
Stage two | Define
After summarizing our data from the Empathy stage, we put all the information together which help us better understand the framework of Zeit's website and we developed the persona: Someone to share the characteristics of the interviewees. Creating the persona helped in understanding the users' needs, motivations, goals, and behaviors patterns. Designing the empathy map supports us in illustrating an ordinary day for our persona with her attitude and behaviors, which allow us to expand the knowledge about our users' group and identifying the patterns.
The next step was determining and defining the project goals. This was a real test for us as UX designers because here we had to well align the business and the user's goals. Our job here was to balance the goals and make sure the business will benefits when our users reach their goals.
Creating the project goals enabled us in creating the feature roadmap outlining the features of Zeit's website. We organized the features in their order of importance along with their priority, labeled accordingly as P1, P2, etc.
Information Architecture
So far, we have mostly discussed the way of understanding user's behavior and identifying their patterns. The next step in designing the solution is the general structure of the things. Information architecture (IA) is a way of organizing a bunch of information and giving them some structure. The structure determines the steps in the user's story.
Therefore we conducted an open card sorting task with 8 participants. They've been asked to sort the index cards into categories that make sense for them and label each category themselves. Analyzing the sorting pattern helped me learn which ideas of features are most related to the minds of users and to establish the foundation for the structure of the Zeit's site. Based on the findings I created a sitemap, as well as task and user flow.
Sitemap
Task Flow & User Flow
Stage three | Ideation
This is the stage where we further developed our product. We started sketching the ideas for Zeit's site and went through several iterations before choosing the final version.
Using the work from our sketches, we created mid-fidelity wireframes for Zeit. Here we have the homepage, trip listing and trip details page:
We have also created mid-fidelity responsive wireframes of Zeit's homepage for desktop, tablet and phone, shown below:
Brand Identity
For the branding of Zeit's site, we decided to use a simple logo TIMETRAVEL which perfectly blends with the site's mission and the idea of connecting classic and modern elements. Also, we created a UI kit as a design system which is an essential tool in providing standards of reference for typography, color palette, logo, and all the UI components used in Zeit's site.
Stage four | Prototyping
Creating the wireframes and crafting our UI design system brought us to the point where we filled out the frames and built our Zeit User interface and Prototype. The high-fidelity wireframes were designed to enable users to do a flow of choosing a trip and attempt to make reservations.
Stage five | Testing
Upon completion of the prototype, we created a usability test plan and started recruiting potential users for testing our product. Usability testing was conducted with 6 users, regular online shoppers. We had one simple task for the user to find more about Zeit's trips, choose Renaissance Period trips to Europe, and attempt to make an online reservation. The findings are summarized in this link Usability Test findings and the Affinity Map were created to determine the required high-level changes.
Next step
The next step in this journey will be creating more pages, more iterations, and more prototyping in order to improve our final product.
Through this process, I was able to learn some key components of product design, learn and develop new skills useful for my future design journey.
Thank you for reading!
