Overview

Goal: Design a responsive website & brand image for Zeit

Role: Product Design, Lead UX/UI Design (User Research, Information Architecture, LOGO and Brand Design)

Tools: Pen/Pencil & Paper, Figma, Optimal Workshop, Zeplin

Duration: 10 weeks

Process: Research → Define → Ideate → Design → Test

Background

ZEIT is a new venture of the company with a solid presence on the market. The company until this time was not connected with the travel industry. They offer time travel – an innovative product that people dream about, but never had a chance to try.

ZEIT wants to popularize time travel. They need to create an accessible and user-friendly new e-commerce tool (website) to educate people about their book their first time-travel experience.

Note: This project was completed as part of Design Lab’s UX Academy course.

Research

14 hours

• Market Research

• Competitive Analysis

• Individual Interviews

Research goals

• How much potential interest is there in time travel?

• How much people are willing to spend for this trip?

• What kind of expectations and concerns people have about that kind of journey?

• How people collect information about their planned journey and how will they do trip reservation? 

• Getting to know actual travel solutions, architecture and mechanism of websites for travel booking.

  The whole Research Plan is available for your review.

Research methodology

Market Research

Market Research was conducted to collect qualitative data from various travel websites and statistical data from various sources about travel. This helped to develop an understanding of user expectations for travel products. In this research I wanted to check also the core information like potential demand for this new venture, target group and customer expectation. I used results from existed research study about risky customer’s behavior and got knowledge what demographic group is more willing to do adventurous things (journey).

Competitive Analysis

Zeit Venture has no direct competition, but of course, other travel companies and websites offered us deep insight and helped me to determine what potential travel solutions currently exist. I made a matrix of strengths and weaknesses for several existing websites. This helped me to assess common practices, standards, and areas for improvement.

Individual Interviews

To get further understanding I conducted interviews, asking questions that would shed light on possible pain points, areas of friction, and positive goals for potential users. My interview script went through basic questions from travel preferences to the thought and consideration of time travel. I wanted to know how people felt about that concept to be able to position Zeit as an approachable and trustworthy offer to people that may be uneasy or skeptical about the idea of time travel.

Interviews’ questions and notes are available for your review.

Key takeaways

PART 1 - people’s experience with traveling and their thoughts on travel time

• How do people travel? People travel an average 2-4 times per year. They use airplanes or cars. The main purpose is to discover new places (culture, monuments, local foods) and take a break from daily life. Some of them travel for work or to visit family. People typically travel with a companion, however, work trips are usually arranged for individuals.

• How do they make a decision about where to go? All of my participants have decided where to go and what to see. All of them have kids so trips are usually adjusted to the whole family’s needs. Weather and money are two of the most important factors they consider when making this decision. They choose the destination according to their interests, other people's suggestions and reviews being important.

• What kind of things excited them the most? People like to see new places, new cultures, new environments, and new food. They are excited the most when they discovered some unexpected things (like a wild beach, exotic nature). Some people are excited about seeing where they grew up.

• What do people think about time travel? Most people know what it is, but they believe it is not possible. They definitely would like to try it, but they are extremely afraid about the possibility of not returning to the present. They do not know if it would be safe for their body or mind.

PART 2 – people’s experience with booking a vacation

• What does the planning process look like? After people have decided where to go, they then check where to stay and when to go. They use a lot of different tools for online bookings, like Booking.com, hotels.com, skyscanner.com, Lufthansa.com, momondo.com,  Airbnb.com, expedia.com, rome2rio.com, Travelocity, and google flights.  Airbnb is the most popular booking website among my participants. Some people underlined that is important to have the possibility to book all parts of the trip in one place.

• What is people's experience with booking websites? All of my participants had only positive experiences with different tools. We can say that all booking sites provide a similar experience, differ with the ability to search for trips or flights and how they deliver content. Some participants emphasized that they would not like the offer to be different from what’s in the description. Sometimes they are willing to pay more to be sure of the quality. One of my participants noticed that as she doesn’t like to pay in advance for the whole trip, flexibility is then limited.

• Which electronic devices do people use for booking trips? Most participants declared they are able to use mobile just as well as the desktop. Some of them declare that is easier with a desktop. One participant said she used her laptop.

Define - understanding the user

7 hours

• Persona

• Empathy Map

• Storyboard

After all the interviews, I gathered all the insights from each participant and organized them so I could view all the information side-by-side. After doing so, I started to see patterns and organized the information accordingly. After noting all the patterns I started on my persona and then my empathy map.

User Persona

Tida she represents the primary user group. Tida is a former Tourism Marketer who resigned from a regular job and started a new adventure in her life with a lot of traveling and discovering new things. 

Storyboard

Based on research data I also created a day in the life storyboard. This shows how exciting  time-travel can be and encourage her to buy. Beyond the persona itself, it was important to create a scenario and context for the actions.

Empathy Map

In order to do a deeper analysis of the research and to understand Tida's motivations and needs, I built an empathy map of. Comprised of thoughts, actions, quotes, obstacles and what delights her. This map building exercise was instrumental in constructing the feature road-map and gaining a better understanding for whom I was creating the e-commerce site.

Ideate-Envisioning the Structure

7 hours

• Project Goals

• Features RoadMap

• Card Sorting

• Site Map

• Sketches

• Interaction design

Project Goals

After was user was defined, I could connect user goals to the business goals, whilst also considering technical constraints and needs. Doing so gave me a better perspective on how to approach my design.

Features Road-map

Having a deep understanding of what users were expecting when booking vacations, I created a feature map ranking what features were the most important to have, down through what can come later post-launch. The goal was to make decisions that prioritized return on investment, development feasibility, and satisfying user goals.

Card sorting

In order to strategically structure the ZEIT e-commerce platform, I conducted a card sorting exercise. I used Optimal Workshop for this, an online tool. Thanks to this exercise I was able to determine how users would prefer to filter content on the site.

Site Map

Based on all the information gathered during this research and define phases of the project, I built a site map for the ZEIT time travel website.

I took all of the research into consideration and organized the site in a way that was concise and user-friendly.

Sketches

Before creating digital wireframes, I decided to do some brainstorming. I drew three initial sketches of the homepage to experiment with visual hierarchy and the information I wanted users to see based on my research.

Interaction design

Once the site map was created, based on low fidelity sketches, I moved on to prototyping. I created a task flow and user flow showcasing the user coming to the ZEIT website, adding an item to their cart and finally completing a purchase. Mapping these user flows helped to guide me on the key items to prioritize as I began my wireframes and prototypes.

Design

36 hours

• Wireframes

• Logo Design and Style Tile

• High Fidelity Screens

• UI Kit

Wireframes

I refined my pencil and paper sketches of the homepage and recreated the best ideas in Figma. I began building wireframes for the sites. Starting with the home page, followed by the category page, and product detail page, I tried to emphasize priorities that arose from the research and I made sure to include many photos and categories for users to see and navigate in a simple way.

Responsive wireframes

The next step was building a responsive design for desktop, tablet, and mobile device.

LOGO and Style Tile

High Fidelity Design

Besides some minor alterations to the layout and interactions, I transferred my wireframes quite seamlessly into high fidelity designs. I designed:

• Homepage, Category Page and Product Page - all for desktop

• Responsive Homepage for desktop, tablet and mobile

• Category page with extended filtration for desktop and mobile

UI Kit

Upon finishing my designs, I created a UI kit. This is living document that can be updated and applied to the site and brand as Zeit continues to develop and grow. This document will help to ensure that all branding remains consistent throughout the product.

Usability study

10 hours

• Prototype

• Usability test

• Affinity Map

• Project hand-off

• Next steps

Prototype

The next step was to create a clickable prototype and conduct a usability test. I set up a mid-fidelity prototype and test guidelines for in-person usability testing. The goals of the testing were to see if participants could complete the tasks with a 100% error-free rate, how they responded to the UI, and see what caused them trouble or confusion while using the website. The tasks were:

Task 1: User wishes to search for trips, goes to the filter feature, enters search, and arrives at the Search Results Page

Task 2: User selects one of the trip cards and arrives at the Trips Details Page

Task 3: User is interested in trips connected with Architecture and wants to browses available trips on the Category Page

Usability Study

I included four participants in the usability study, all were females. The study was done one-on-one using a laptop with a mouse. Each participant’s process was observed by me. Once they had completed the task, I asked each participant to describe their overall experience with the prototype and feedback for improvement.

Summary: General impression was that the page is logical and consistent. When the user was slightly confused about what to do next they clicked on the LOGO and were taken to the main page. All the participants identified the different panels as categories of browsing trips, which validated the idea of the design. I expected all users to be more inclined to use the search bar when they needed to find something, but the search bar was the last searching method. Three out of four felt comfortable using the filters on the search results page. All participants finished the tasks 100% and all did this within a reasonable time range.

From the testing, I was able to determine where the successes were and where users ran into difficulties and what needed to be improved.

The following affinity diagram visualizes the results.

Project hand-off

After I finished my first testing phase, I used Zeplin to familiarize myself with the developer handoff process. Within Zeplin, I created components and a style guide to make the process as efficient as possible. This offered also an opportunity to check the design's properties once more and clean up any discrepancies. 

Next Steps

• Build out more necessary pages and continue testing

• Begin implementation

Final Thoughts

This was my first UX/UI design project and I really enjoyed it! I have learned many techniques from interview tips trough UI design, to prototyping and testing.

The most challenging aspect of this project was to design for a concept that doesn't exist (time travel). Many factors had to be made up and I relied only on my imagination. I think I sharpened my problem-solving skills and was able to work through it.

The other challenge which occurred during the research phase and the Hi-fidelity design phase was timing. I was learning new things while trying to accomplish work outcomes. I learned to manage time and prioritize tasks better while expecting to produce high quality effectively and efficiently.

In hindsight, there are a few things I would do differently (better?), but I think that is the outcome that I have learnt a lot during doing this project.

It was definitely a unique project and I'm very proud of the first site I ever designed!