Zeit Case Study

For the empathizing phase, I conducted research using both competitive analysis and user interviews to collect pain points and successes when it comes to booking a trip. In order to do that, I created my research goals to help guide me in conducting the user interviews and the competitive analysis.

Research Goals

Understand how the user makes decisions on a product that they have not tried before.
Understanding the difference between booking a normal tourism trip vs a time travel tourism trip
Understand the process users use to narrowing down possible trips to certain locations
Understanding the restriction users may come across when booking a specific time travel location/site.

Summary of Findings

With my research goals in mind, I conducted the user interviews to understand their needs and frustrations. Below are my key findings from the interviews.

User Interviews

Needs

All participants seemed to appreciate the idea of an all-in-one site that takes care of travel, rentals and flights so they wouldn’t have do to do the guesswork when it comes to making decisions on a certain destination
Participants need to have the ability to compare prices and reviews, before coming to a decision on a location and/or destination.
A participant thought it would be helpful if booking sites had a page about things you should know about your destination before booking i.e., if immunizations would be a good idea to have before traveling to a certain county
Participants generally would just like a stress free site, friendlier to help them come to decisions.

Frustrations

Sites that advertise other areas of interest, after they already decided on a location
Misinformed ratings, making a destination seem pleasant, but really it’s just average or even worse than anticipated.
Sites advertising that if you changed your length of stay, you could save money. Usually they are already set in the timeframe that they want to take time off from work and this would just hinder their research.
Filtering options not being as functional to help narrow a search for a destination

Competitive Analysis

I also did research on what potential competitors strengths and weakness were when it came to booking. While time travel is difficult to do a competitive analysis against, I did my best to select companies that made sense to compare with to help me better understand the market. Below is the summary of my key findings:

There were no direct competitors for time travel so my next best option was to look at was space travel as that seemed to be the best comparison for time travel.
Sites seem to keep a very clean and easy UI for the users to use. They are very readable, giving the users an ease of use experience.
Booking sites use alot of photos, which seems to help the user come to a conclusion on where they would like to stay and/ or visit
Most sites seem to use a review system to help users come to a decision on a destination

Creating a Persona

Now that I had completed my user interview and competitive analysis, I was able to create a unified persona that would help me make key decisions when it comes to designing a new e-commerce website.

With the empathizing phase complete, I began to look at how to define my findings.

Project Goals

I started by condensing all the information into three key considerations: business goals, user goals, and technical goals. By completing this exercise of condensing all the information, this helped me zero in on the goals needed to start designing a new kind of e-commerce website.

Card Sorting

I also conducted a card sorting exercise to help me understand how users would expect a series of destination to be organized. I used optimal workshop to complete this exercise. I gave the participants twenty unique locations to categorize. I set the exercise as open ended so users could categorize it however they saw fit. I had 10 participants complete this exercise and was given a resulting 41 unique categories.

Using optimal workshop, I looked through how to standardize—meaning condense—these categories. I found their 3D cluster view was really helpful in standardizing these categories. I was able to standardized the forty-one unique categories in to just three main categories with defining subcategories to help users sort through destinations.

Site Map

With the card sort completed, I could now confidently create a site map to aid me in creating the websites flow for Zeit.

User Flow

Since I now had an idea of what the site map looked like, I could now created a user flow to help me visualize what one of the main tasks a user could complete. This helped me ensure the pages of the site flowed logically from one another.

Now with both empathize and define phases complete, I began to work on designing a responsive website, creating a logo, and UI kit for Zeit

Initial Sketches

To start the ideating phase, I began with sketching out ideas for the hero section of the website.

In my first sketch, I focused on the search/filter being the main part of the hero section since that is what users really wanted. I also felt it was important to include an "About Time Travel" section as this would be a daunting new endeavor for most users.

For my second sketch, I put more focus on the actual display of locations to make the site more inviting. I shrunk down the search bar but still big enough to denote it's importance.

In my final sketch, I tried having the "About Time Travel" as the first item on the hero section followed by reviews to give users more confidence in time travel right off the bat.

Creating Wireframes

Once I finished my sketches, I moved on to creating responsive wireframes. I decided to use sketch #2 (pictured above) as my guide as I felt it would be the most familiar to users. The hero section would show case popular destinations and directly below that would be the "About Time Travel" section for users to get acquainted with time travel.

See all Wireframes

Creating a Logo

My next task to complete for Zeit was to create a modern logo for their time travel site. I began by sketching out my ideas.

Since this was a project that many other students would be working on, I assumed many would also think to use the "Z" in Zeit and turn it into an hour glass for a logo. I wanted to try do something else, to make it feel more original for my version of Zeit.

Below are my sketches and initial iterations before I came to a final design that I thought fit best.

UI Kit

My final task was to create a branding for Zeit. This was a struggle at first because I wanted to give the look of being modern but also give off a past type of vibe. My initial color scheme was going to be like a brown/gold color with a maroon as an accent color. But this just made the site seem very old and not modern at all which would not meet the requirement of making it modern. After some tinkering around, I decided to go with some rich colors that leaned to being more modern.

High Fidelity Screens

With both the logo and UI kit complete, I could now incorporate them into my wireframes to creative responsive high fidelity screens.

Now that I had my high fidelity screens complete and ready, I began preparing my screens for prototyping. I used Figma to create the prototypes for testing. I made three separate tasks for my test group to make sure the site was usable.

Figma prototype

With prototyping complete, I gathered five participants to complete the three tasks. The goals I was to test were as follows:

Test if the website was easy to navigate
Test if a user could find and book a trip
Test for any area of confusion the user may have

I conducted this testing in person using my personal laptop and mouse for the participants to test this prototype. I sat with them and explained where the tasks were and told them to complete them how they saw fit. I also told them I would observe and would not give them instruction as I was testing the sites usability. With that, I conducted the interviews and wrote down all of my finding into three categories: successes, pain points, and suggestions.

One of the main pain points for the users was that they had a hard time with the search bar. This was partially due to how I prototyped the screens. This was my first ever project I prototyped so I was not aware of all of the functionalities Figma had to offer when it comes to prototyping. If more time was allowed I could have prototyped it better for the participants.

With the time I did have, however; I did work on some of the suggestions to help me create my final high fidelity screens for this project

High Fidelity - Finalized versions

Next Steps

Since this was a limited timed project, I was not able to work through another round of testing. However, given more time, these are the next steps I would have taken to create a piece ready for handing off:

Create new versions of the prototype based on the user tests.
Test again with old and new participants
Add more screens to make the product more complete
Prepare file for handoff and for the the project to go live

Final Thoughts

This has been a great learning experience as my first ever design project! I feel good about my design, but I know it could do better given more time and maybe some more design reviews and critiques

Zeit

Project Brief

Role

Tools

Timeline

Problem

Solution

Using the design process

Empathize