ZEIT.

Creating a Simple Intuitive Booking Experience.

Project Overview

Project Background

Zeit is a time travel company that needs a website for advertising and selling their services.

Challenge

·         Create a travel booking website with a simple and intuitive structure.

·         Create a product page allowing for easy all-in-one-place destination reservation.

·         Create responsive homepage layouts for different breakpoints.

Role

UX Designer (UX Research, Interaction Design, Product Design, User Testing).

Tools

Figma, Miro, UX Tweak.

Time Allocated

96 hours

Project Phases

1 - Research

CREATING A UX RESEARCH PLAN | CONDUCTING UX RESEARCH | CREATING A USER PERSONA | PROJECT GOALS OVERVIEW

Creating a UX Research Plan

I chose to include in my research plan steps like competitive research, creating provisional personas and user interviews as I expected them to provide me with enough information to find out about the strengths and weaknesses of the approach of our competitors as well as how much and why people were interested in time travel, what their frustrations connected with online travel booking were and what could help create more satisfactory online travel booking user experience.

Conducting UX Research

I began with running a competitive research and creating provisional personas.

Secondary Research - Competitive Research

The thing making this stage of research complicated was that time travel was a fictional idea and there were no real time travel booking services. The closest option to rely on was regular travel booking websites, but they could not count as direct competitors. For that reason, I made up a direct competitor myself - a space travel website (inspired by Jeff Bezos’ going to space, lol) to give it more of a competitive edge.

Secondary Research - Provisional Personas

I did research on the archetypes of average travelers and created four provisional personas based on that data.

Primary Research – User Interview

I chose to go with user interviews, because, unlike user surveys, they offered flexibility in terms of asking additional questions while obtaining information personally from the user.

I wrote a user interview script, recruited a few people matching the requirements and willing to participate and interviewed them via Zoom. I documented the findings and compared them in order to find patterns in the participants’ way of thinking. Based on that, I created a user interview debrief to sum it all up.

Turned out, all of the participants preferred booking their trips from the comfort of their home and had certain fears about time travel, which could be lessened with higher safety guarantees.

UX Research Debrief

Last, but not least, I synthesized all of the findings from the abovementioned steps in a UX research debrief. Now I had a set of guidelines on which I could base my future product design.

Creating a User Persona

Next, I analyzed the data obtained from the user interviews and the patterns in the users’ way of thinking, and based on that I created a user persona.

My persona turned out as a young adult who enjoyed exploring new places and being adventurous, cared about safety guaranties and was motivated by opportunities to share quality time travelling with his girlfriend.

Project Goals Overview

To cover the whole scope of multiple smaller goals of the project, I created a diagram combining in itself the business, customer and technical goals and including both their common goals as well as the ones that were inherent to only one of the three sectors and not shared with the others.

I figured out that the top priority goals (since all the three sectors could benefit from achieving them) were:

• Positive online travel booking experience;

• Security;

• Efficiency and accessibility.

2 - Information Architecture

CARD SORTING | SITE MAP | SKETCHING THE HOMEPAGE

Card Sorting

Since there were numerous destinations to be sorted into categories, I began the IA phase with an open card sorting.

The 5 participants I recruited needed to sort different time travel destinations. They were allowed to create as many categories as they would find reasonable and give those categories the names they thought would characterize them best.

The results of the card sorting showed significant differences in the logic of the participants as well as certain patterns behind how they sorted the cards into categories. Time period, location and interests appeared to be the main categorizing criteria, and so I decided to stick with that categorization.

Site Map

I created a draft of my future website’s structure to have a visual reference for my future user interface design. My goal was to make it so that the pages would correlate in a logical and intuitive way.

First, I wrote down a list of sections and subsections I thought the website would need (which could still be changed if needed at later stages). Then I sorted them into the groups you can see below that formed my top navigation - Explore, Featured, About Us and Help. I made sure the Product Details page(s) was accessible from different parts of the website via Search or paths intuitively leading there.

Sketching the Homepage

Based on my site map I sketched out a few versions of my Homepage to begin with.

At this point, I added to my Homepage some elements that were not mentioned in the site map, but were important: search filters, sorting filters, CTAs, etc.

I created a big fat footer and repeated some important navigation links there so that the user would not necessarily have to scroll back and forth.

3 - Interaction Design

TASK FLOW | USER FLOW | UI PRODUCT REQUIREMENTS | LOW-FIDELITY WIREFRAMES | MID-FIDELITY WIREFRAMES | RESPONSIVE WIREFRAMES

Task Flow & User Flow

I will not share my task flow here as it is pretty much a limited version of the user flow you can see below.

In my user flow I included questions and answers that gave the ground for paving different paths the user would take depending on their choice or circumstances (like being a registered user or just a guest).

I also added options for users who were registered and needed to log in to complete their purchase, users who wanted to check out as guests, and those who would prefer to register before checking out.

UI Product Requirements

Next, I jotted down a UI Product Requirements plan based on my earlier draft, site map and user flow. Then I turned it into a more detailed document covering all the features and elements I wanted to include in the pages that were part of my to-be-tested flow - namely, Homepage, Category Page and Product Page.

The tasks for the testing was going to be built around finding a destination and booking a trip.

Low-Fidelity Wireframes

Finally, the preparations were over and I could proceed to sketching all the pages that were supposed to be part of the user flow I was planning on testing at the end of the project and that were necessary for completing the task of finding a destination and booking a trip for it:

• A Homepage, informative and logically structured to give access to all the essential parts of the site, allowing searching for products in multiple ways depending on the user’s personal preferences.

• A Category Page allowing for browsing through all of the destinations.

• A Product Details page that would give sufficient information about a destination and allow for booking a trip.

Mid-Fidelity Wireframes

As soon as I was done with my pen-and-paper sketches, I got to creating mid-fidelity wireframes based on them, during the process of which I iterated on the flaws of the low-fi sketches. I also had to keep in mind what my layouts would look like when/if transitioned to mobile environment.

I included in the footer and in some parts of the Homepage the names of the popular destinations to increase the SEO Score.

Responsive Mid-Fidelity Wireframes

As I had shaped up my desktop wireframes, I created as well responsive versions of Homepage – for tablet and mobile, more to practice keeping the layouts consistent and similar between different breakpoints rather than planning to create full mobile and tablet flow versions to test as well.

4 - UI Design

MOOD BOARD | BRAND LOGO AND STYLE TILE | UI KIT | CREATING HI-FI WIREFRAMES

Mood Board

To decide on my future website’s style and color scheme, I picked a few inspiring minimalistic travel website samples on Pinterest with futuristic fonts and not very loud color schemes and created a mood board based on them.

Brand Logo and Style Tile

Inspired by my mood board, I created a style tile as well as sketched a couple of dozens of logo ideas, of which then I went with the most promising one and iterated on three different variations of it in large, medium, small and favicon size options.

UI Kit

I created a UI Kit for the site, which would allow me keep my layouts consistent via the use of color styles, text styles, components like dropdown menus and buttons, header and footer style, etc.

Creating High-Fidelity Wireframes

I applied my UI Kit style guidelines to my full color design of the desktop layouts as well as the mobile version of the homepage.

I iterated on the Product Page to make the process of making reservations for a destination simple and intuitive, and minimize cognitive overload.

The challenge I set for myself here was to keep all within the same page for the user’s convenience - this way they could still have all the destination info before their eyes while completing the booking form.

After some thinking, I came up with an idea of a vertical multi-step form, where each following step would be revealed only upon completing the previous one – to avoid cognitive overload; and at the same time, all the filled out information would be before the user’s eyes – for easy reference and editing.

5 - Iteration and Implementation

BUILDING THE PROTOTYPE | CONDUCTING THE USABILITY TESTING | AFFINITY MAP | PRIORITY REVISIONS MATRIX | APPLYING REVISIONS

Building the Prototype

Based on my high-fidelity mockups I created a prototype of the website, where all the task flow related features were clickable.

Conducting the Usability Testing

When my prototype was ready, I wrote down a usability testing plan that included a couple of tasks for my participants:

-          find a certain destination (Mozart’s Vienna);

-          make a reservation for that destination.

After that, I recruited 4 participants and met with each of them on Zoom where I observed them use the prototype with shared screen. Every meeting was recorded with the participants’ permission.

All participants completed the task with barely any issues except for some minor ones. I transcribed the recordings, studied the transcripts, analyzed them and documented my usability test findings.

Affinity Map

Based on the usability testing findings, I created an affinity map – first an old-school PostIt one on the wall; then a digital copy of it in Figma.

You can see below how the participants approached their tasks, what they had issues with and their feedback about the experience.

Priority Revisions Matrix

Next, I determined the revisions that appeared to be necessary based on my findings and prioritized them based on their user value vs. effort ratio.

For a visual reference of my thought process, I created a priority revisions matrix. Based on it, I could see that the parts most worth iterating on were Find Portals and Choose a Portal features.

Applying Revisions

Now all there was left to do to achieve my project goal was to iterate on my high-fidelity mockups in accordance with my priority revisions matrix. I added a tooltip to clarify what Find Portals feature stood for and rearranged the order and layout of the available portals.

CONCLUSION

Since it was my first ever project, every single stage of it was both exciting and challenging in its own way.

The biggest challenge I faced was designing that specific type of product page that had to be simple, but informative, yet informative without cognitive overload. When I finally designed it, I was worried how other people would understand it. Surprisingly, all of the usability testing participants found the reservation process easy and quick. So, it gave me a reason to be proud of my solution and its implementation.

If I could go back to the beginning of the project, sure there would be things I would do differently. For instance, I would ask more insightful questions during user interviews. Or I would approach the layout building process in a less time-consuming way (now I know the tricks). I would probably change some things about the style of the website too.

If it were a real project, I would also give more time to structuring the website and figuring out the simplest ways of completing user tasks.