Zeit User Research for Time Travel Tourism Website
Zeit is in the business of Time Travel Tourism. The company is the first of it’s kind and is in need of an ecommerce website. Zeit will offer trips back in time from prehistoric times through today, there are a total of 289 destinations that could be visited. They are able to do custom trips to a certain date back in time, but it will cost a little extra for the traveler. People will travel to controlled and extremely protected places that most closely resemble what we know of today as resorts, but including organized (and secured) trips to nearby cities and attractions, where interaction with locals will be limited. However, Zeit travelers will be able to look at and do things typical of the time, such as workshop activities or attending shows. Despite all this, Zeit wants to make the selling of the tickets as easy as possible. Think about today’s travel agency packages. Since Zeit’s travel offerings are a bit restricted and limited, people will be able to shop for trips similarly to how one shops today for books or movies — by finding what interests you, reading more about the options, and making a purchase decision.
Zeit has asked that I create an e-commerce site for travelers to purchase tickets. I needed to find the best way to display trips, what’s special about each time and space and how to classify or categorized trips. The website needs to be responsive so users can access it from any device (laptop, tablet and mobile, mainly). The website should be able to show all products (e.g. tickets to a specific space and time) with the right categorization and filtering. During the checkout process, the user will be able to select the day of departure as well as duration of the trip in the present — whenever it’s more convenient for them, as well as understanding that the trip to the Virgin facilities is not included. Although this is secondary and lower priority for the project at hand, the website should also provide information about how the service works in order for people to understand and trust the company.
To find the users and audience I decided to look at Zeit’s most likely competitors. Since Zeit does not have any direct competitors I decided to compare to new existing travel sites and to new technology travel methods. From there I began creating a persona of the type of user that would use the Zeit website.
My roles and responsibilities included research, information architecture, task and user flows, wireframes, responsive design, prototyping, testing, and design implementation.
Some unique factors in this project is that Zeit is not real, and there is not much information out there for how to design a time-traveling ecommerce website. Although it was difficult to get all the information in one place, I was able to find what I needed with what was already out there. There were also time constraints on how long I could work on certain parts of the project.
My process for creating Zeit began with reading all available information that was given to me about the company and what their goals were. From there I created a research plan for Zeit I found the research objectives, questions, and the methodologies for getting the information that I need.
From there I looked at the most direct competitors that Zeit would have in today’s market. I looked at their strengths and weaknesses and found the ideal persona of what I think a customer of Zeit would be like. From there I found people to interview to create the persona for Zeit. I then wrote a script for my interviewees interviewing them about their travel experience and thoughts about time travel.
After my interviews I looked for patterns and findings in their answers they gave. Once reviewing my research findings I created a persona of someone I think would use Zeit.
Darcy Fischer is the average persona of someone who would use and access Zeit.
Once I narrowed down the persona of the type of people using Zeit I created a list of project goals.
Here are the business, user, and technical goals to continue working on Zeit. I then reviewed and made a feature roadmap of what the must-haves were to have on the Zeit ecommerce website.
Once creating my goals I had my interviewees complete a card-sorting task to determine the categories that would be created on the Zeit website. From my findings I decided to create three categories that users could find a trip by. Those categories are Time Period/Era, Location, and Journeys/Events.
This is my sitemap that I created to show what I thought the flow of the website and looks of it would be. I thought of adding an About page, Book a Trip, Profile, and Support page.
From my sitemap I worked on my drawings for some ideas of the wireframe and base of the website. I had several ideas and created three different homepages of what I wanted Zeit to look like. Once getting down my ideas I decided to create the wireframe using a design between my second and third designs.
Once I decided on my design I created a responsive homepage for desktop, tablet, and mobile devices.
Once I introduced my responsive wireframes I made multiple pages for the desktop. I made a homepage, locations search page, and a book trip page with details.
After creating my wireframe pages I created three different user flows. Each user ends their flow with booking a trip yet can get there in different ways. The first users searches by location, the second by Era, and the third by Journey.
Once the user flows were complete I made a task flow of what it would look like for Darcy to find and book a trip. The user and task flows helped me to decide which pages I wanted to create and what I needed to make a complete flow for the user to book a trip.
Since I had the wireframes and flows down I moved to working on Zeit logos, fonts, and color scheme. I decided to start with a messy brainstorm map where I wrote down what I wanted Zeit to look and feel like. From writing down everything I could think of I highlighted the main points of what I wanted to work on. Those were the things that I felt were most important. From there I started creating logos that I thought represented my most important brainstorming ideas. I then came to this general logo, color, and typography sheet.
Through all of my logos I was not loving any in particular, for days as I continued to work on narrowing down the color and text I kept searching for inspiration to make a logo that I liked better. What was also hard for me was picking just the right colors to represent Zeit. I knew I wanted blue and a bright yellow, red, or orange. I wanted the blue for security and safety, yet wanted a bright yellow-red for excitement. I was hard to find a combination that worked well with my vision and with the Zeit brand. After lots of time I found the solutions to both hard questions.
My style tile presents my new logo and color scheme. Once determining the color I moved on to creating the styles of buttons and other UI features that I wanted. The Zeit UI Kit displays everything that I used to create the Zeit website.
Once I created this template I set out and created my first draft of my Zeit website.
These three pages should match the wireframes I have already created above. Once I made the base and buttons I immediately wanted to make my website interactive. I made sure that the timeline can scroll and the user can move around the map.
After those three pages I decided to make a checkout process instead of a profile page. I though with my user and task flows a checkout process was more important.
My interactive first draft: https://www.figma.com/proto/zUsfugpyXlEjaxvoMAOiwz/Zeit-Homepage-Copy?page-id=0%3A1&node-id=1%3A82&viewport=401%2C633%2C0.10371016710996628&scaling=min-zoom&starting-point-node-id=1%3A82
Once my first draft was created and made interactive I began my usability testing. I have 4 users complete set tasks. I had a total of 10 tasks for a user to go through the flow of booking a trip by location and fully completing the checkout process. My overall findings were a success with only minor specifications needed to be added.
Once reviewing all the feedback I made an affinity map to find patterns and things I could do to make Zeit a more clear and streamlined process.
Overall, I found that I needed a little more clarification of where the user was in the process and what they were looking at. I added more clarifying words on the homepage stating that it was a time-travel specific site. On the booking page I added more description to the amenities and excursions. Through the checkout process I added a running total and specific prices to the excursions.
My interactive final draft: https://www.figma.com/proto/BA31qbDuMY4xTX720831GV/Zeit-Homepage?page-id=0%3A1&node-id=1%3A82&viewport=166%2C655%2C0.038795094937086105&scaling=min-zoom&starting-point-node-id=1%3A82
At the end of this project I found I created a successful website for Zeit. My intent was to create a site where people knew they would be traveling, learning, and experiencing. Through my research I learned what is important to a user when looking at a travel site.
