My Role: UX/UI Designer: UX Research, Information Architecture, Visual Design, Interaction Design, Usability Testing
Team: Self-directed (with expert mentor support and group crit feedbacks)
Prototype: View prototype in Invison
Time Period: March - May 2019
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 with Zeit. A total of 289 destinations all over the world, up from prehistoric times through today, have been approved and finalized to receive people any moment. Zeit wanted to make the selling of the tickets as easy as possible.
I conducted a market research to get a better picture of the tourism field and consumers. Since Zeit is the very first time travel website, I couldn't gather already existing information of the time travel industry, which was very challenging. However, by focusing on the ordinary travel industry, I gathered valuable market and demographics findings that are rooted in data and statistics. I could collect the common trends and pain points of online travel booking websites as well. This secondary research method allowed me to gain an understanding of potential needs of travelers.
By analyzing direct (Exodus Travels, Secret Compass, Wild Frontiers) and indirect competitors (Kayak,Travelocity), I understood how other travel booking websites design for their users and how they solve problems for similar user needs. I identified a few direct and indirect competitors and pointed out their strengths and weaknesses in order to be able to position Zeit in the market.
To gather qualitative information and empathize with users, I conducted user interviews as my primary research method. I interviewed 7 frequent travelers and asked mostly open-ended questions about their travel and booking experiences. I could highlight common and very similar needs, desires and frustrations among the participants' answer, which helped me understand user habits, behaviour and feelings better.
To synthesize my findings, I created an empathy map to help me understand my observations from the 1:1 user interviews and to identify patterns that were common across most participants' answers. I grouped the observations into different categories: doing, thinking&feeling, seeing, hearing, gains & pains - for each individual person then common patterns were further categorized into different groups, which is how I developed key insights. Finally, based on these insights, I could identify the user needs.
Based on the empathy map findings, I created a fictional user persona, "Luna", who represents the key audience of Zeit. My user persona helped me find the answer to one of the most important questions: “Who am I designing for?”. By creating "Luna", who has the needs, goals, and observed behavior patterns of Zeit's target audience incorporated into her, I was able to strategize and make smarter design decisions.
I conducted an open card sorting technique with 5 participants to see how potential users organize content naturally and to uncover new perspectives. I asked the participants to group 30 cards in any way they wanted to. Then I analyzed the results and was looking for strong card pairings and potential groupings using the similarity matrix and dendrograms (best merge method). I was able to understand how users organize information so I could create a successful information architecture for Zeit.
Based on the card sorting results and common e-commerce design patterns, I created a sitemap, which is a hierarchical diagram visualizing the structure of Zeit and the relationship between the content. By creating the sitemap, I was able to ensure that the content is in places where users would expect to find it.
Next, I created a task flow to visualize the complete path that a user follows during a single task. Zeit's main goal is to make the browsing and purchasing process as easy as possible so I outlined the key steps and pages to complete the main task of finding the ideal trip and purchasing it after landing on the homepage. By creating the task flow, I was able to outline the main screens that were necessary to be designed.
To have a deeper understanding of how users would interact with the website, I built a user flow, which emphasizes how different users with different scenarios could perform different tasks or travel in different paths to achieve their goals. I mapped out the paths of how a new visitor would explore the About page and how a frequent visitor would navigate the website to browse the trips, to choose the most ideal one and how she would purchase it. I also kept in mind that users can enter the website on different entry points, which results in a new path.
As the first step of designing the interface of Zeit, I created a few different low-fidelity sketches of the Homepage to go through some ideations regarding mainly the navigation, content and layout of the website based on my insights. By sketching my ideas out on paper first before going digital, it allowed me to brainstorm multiple visual directions quickly and efficiently before sticking to one.
Next, I digitized the wireframes in Figma and had them as visual guides that represents the skeletal framework of the pages of a Zeit. The Homepage, Deals page and Trip Details pages were wireframed first as these pages are necessary for the trip browsing and choosing experience. The wireframes are responsive, which means that Zeit is optimal for viewing on a wide range of devices & web browsers (mobile, tablet, desktop).
I started building Zeit's visual identity by identifying the main brand adjectives that would represent the company: Modern, Historical, Bright, Friendly, Innovative, Fresh. I browsed on Pinterest for some inspiration and created a mood board to have a collection of different kinds of inspiration for the look and feel of my website. The brand style tile was helping me to keep consistency in my design and to showcase the color, typography, image and logo choices for Zeit's brand.
As for the logo and the entire logo creation process, I started brainstorming based on the brand adjectives and I incorporated elements of the ancient pillar,clock/time and old ancient paper into it to have it historical but modern at the same time.
I used my existing wireframes and based on my brand style title, I designed the UI for each screens in Figma and created the high-fidelity wireframes of the main pages. Then I designed other important pages that were necessary to complete the tasks< that I asked particiants to complete during the next, Usability Testing step.
Some of the other pages designed for the prototype:
Next, I uploaded my high-fidelity wireframes of each pages into InVision to build a low-cost interactive prototype by using hotspots and I designed additional pages that were necessary for an efficient user flow. The prototype was built to investigate the problem solutions that I generated. After brushing up on my prototype, which had a limited funcionality, I prepared it for usability testing.
I conducted an in-person usability testing with 5 participants to see how users interact with the product and to find out how well it solves the problems. I needed a test plan to guide me before I conducted the test so I identified the test objectives, the subject, chose the test methdology, defined paticipants and two different scenarios with a few tasks to complete.
After reviewing the videos that I recorded of the participants while completing the given tasks, I put together a document of how the participants completed each tasks, what I observed and what they said or recommended regarding the prototype.
View Test Findings
Next, I created an affinity map where I gathered the findings from the usability testing and sorted the feedbacks into different categories. Based on the insights and recommendations, I was able to create a guideline to the priority revisions on my prototype. The affinity map helped me find out what could I could improve on the website for a better user experience.
After having prioritized the recommendations in the affinity map, I updated the website design and prototype. I implemented changes to the "sort by" function on the Deals page< and also added a filter function as well. On the homepage I removed the carousel in the Best Deals section and added a new CTA button, which navigates users to the actual Deals page. The previous and revised versions of the Deals page and Homepage are shown below.
Interact with the Prototype here
I put together a UI document to share UI elements and patterns with other designers or develpers on the team. I designed all of the associated states of certain comps, how certain elements behave when they are active, inactive or hovered over. Then with the help of Zeplin, I prepared handoff delieverables to make my design work as clear and understandable for a developer as possible.
What I would do different: I would get back to the prototype and testing phase to extend it with a new task related to the booking process. I should have tested in the first round of usability testing whether the users are able to get through the 5-step checkout system or not.
Research is key to a successful user experience. It is easy to make assumptions when we are designing a product but if we can't validate our hypotheses and back up our design decisions with data then most likely our product won't solve the right problems for the user. My long hours of researching ensured that the potential users of Zeit stay at the center of my entire design process, and I could give purpose to everything from Zeit's design to its usability.
Overall, I gained a great understanding of how important it is to empathize with potential users on a deeper level in order to design a successful product. I also gained valuable knowledge about designing an e-commerce website. Since Zeit is a time travel website, this project was quite challenging as I had to find my way to create a product that has never existed before. I do believe that this project helped me prepare a bit for how to identify and solve problems in any innovative environment.