Zeit

A Responsive eCommerce Web Design + Branding.

Project Overview

Background

  • After years of research, planning, and building for safety, Zait is the first in the travel industry that is ready to launch time travel, with experience for every interest and age. Zeit is putting its focus on connecting people to this amazing experience. They currently offer 289 travel packages all around the globe ranging from the Mesozoic Era to modern times.

Objectives

  • Zeit is a new company using a new technology that is still unknown to users. The infrastructure is still in the very early stages so I am here to do research on identifying their brand, market, and how we can reach consumers.

Solution

  • Design a responsive website for customers to simply and safely navigate through the booking and checkout process, learn about destinations, read historical facts, and see pictures.

  • Design a logo and brand that will look modern and futuristic with indications of time traveling.

Tools

  • Adobe Illustrator

  • Adobe Photoshop

  • Figma

  • Pen & Paper

  • Procreate

Role

  • UX/UI Designer

  • Researcher

  • Quality Assurance

Duration

  • 4 Weeks (80 Hours)

Team

  • Milos Panovic (Myself)

  • Deborah Bashorun (Design Mentor)

Design Thinking Process Overview

Research

  • Research Plan

  • Secondary Research

    • Competitive Analysis

    • Persona

  • Primary Research

    • User Interviews

  • Empathy Map

Define

  • User Persona

  • Brainstorming

  • Project Goals

  • Featured Road-map

  • Sitemap

  • Task Flow

  • User Flow

Design

  • Low-Fidelity wireframe
  • Mid-Fidelity wireframe
  • Branding
  • UI Kit

  • High-Fidelity wireframe

Test

  • Hi-Fidelity Prototype

  • Usability Testing

  • Affinity Map

Research

In this phase, I first learn and identify my users, the business environment, the competitors, market trends and empathize with potential users that will use our product. Before I began my research, I drafted a research plan that outlines our Research goals, Assumptions, and Methodologies.

Research Goals

  • Identify the target audience

  • Identify the needs, goals, and pain points of the target audience

  • Identify the competitors and how Zeit would position itself in the market

  • Identify how customers would book a destination

  • Identify what makes customers like Zeit

Research Methodologies

  • Competitive and comparative research of traditional travel booking sites to see how they operate and what they offer

  • Customer survey of traditional travel sites to hear users’ experience of the services.

  •  Provisional Persona

  • User Research

Assumptions

  • Users interested in traveling are potential users for time-traveling

  • Users are attracted to modern branding

  • We might have a hard time finding those who don’t travel

  • People may not be ready for specific time-travel destinations

  • Some people may question the form of transportation

  • We assume all places are safe for all people

  • Users rely on desktops and smart devices when booking trips

Research Questions

  • What kind of people are interested in time-traveling?

  • What kind of role will time-traveling play in users’ lives and in what capacity? (business, educational, adventure, hobby, etc.)

  • How does the user typically book?

  • How does the user feel about time travel?

  • What would prevent people from trying/using Zeit?

  • What users hope to achieve with time-traveling

  • How do users choose their time-travel destinations and why? (Time period, historical event, people, culture, music, etc.)

Competitive Analysis

  • To analyze and identify the strengths and weaknesses of direct and indirect competitors. This method will help me identify what would make Zeit successful and what some of the things we should avoid.

*Click on picture to see it bigger.

Individual Interviews

  • Individual interviews allow me to probe their attitudes, beliefs, desires, and experiences to get a deeper understanding of the users who come to the site. We can also ask them to rate or rank choices for site content. These interviews can take place face-to-face, by phone or video conference, or via an instant messaging system.

    Demographics:

  • Number of participants: 4

  • Ages: 27-42

  • Commonality: Interested in history, exploration, and travel.

    Summary:

  • All participants valued reliable and consolidated information as well as easy, stress-free, and efficient travel booking despite different planning methods.

  • All participants like affordable and cheap prices.

  • Participants were highly motivated to book when safety and surroundings info were provided.

  • Safety is a major factor if the location is unfamiliar.

  • Too much information at once can be overwhelming to some users while others prefer extensive deep research.

  • They all don't like hidden fees and additional costs.

Define

After synthesizing data from the research phase, I define the business goals and the core problem of the users which who I am designing for. While defining, I will Ideate by generating new ideas and brainstorming how to initially create the site architecture and solve the problems of the product.

User Persona

  • After gaining feedback from my user interviews, I created a key user representative with the characteristics that all interviewees share, which is my persona Bob Sabatkini.

*Click on picture to see it bigger.

Project Goals

  • After synthesizing my research by defining the business and user needs, I have created a Venn diagram to list all the user & business goals, and technical considerations to overlap from each other and identify correlations between their common goals.

*Click on picture to see it bigger.

Feature Road-map

  • To start the ideate phase, I brainstormed ideas for product features and prioritized and rank them in three levels based on the findings from project goals and overall synthesize research.

*Click on picture to see it bigger.

Card sorting

  • The goal was to help design or evaluate the information architecture of the site. Understand how users will organize website links under the categories.

    Overview:

  • Closed Card Sorting

  • 15 Cards

  • 6 categories

  • Optimal workshop tool

  • 8/9 Participants

  • 25 - 50 years old

*Click on picture to see it bigger.

Sitemap

  • Here, I have the sitemap layout architecture for Zeit. The pages and features defined here are based from the feature road-map data, competitive analysis and the insights we learned from the card sorting results.

*Click on picture to see it bigger.

Task Flow

  • Based on my Sitemap, I created a task flow to see how my persona Bob takes his course from doing an objective. Here is the one of objectives that will be used for prototype testing.

*Click on picture to see it bigger.

User Flow

  • In this section, I have created a user flow to show different scenarios of what my persona Bob might take to complete a given task.

*Click on picture to see it bigger.

Design

In this phase, I want to start creating the design layout of my pages, the UI elements, and components it needs, and define the visual elements that will go into it.

Low-Fidelity Wireframe Sketches

  • In the initial stages of designing the web page, I created three different page layouts based on my persona’s goals, UI requirements, and competitive design patterns. While sketching, I played with several ideas. The final version is a set of all three sketches.

*Click on picture to see it bigger.

Mid-Fidelity Wireframe (Responsive)

  • After deciding the best sketch for the homepage layout, I drafted mid-fidelity wireframes to create a visual structure and hierarchy. From left to right, I have the desktop version, the tablet version, and then the mobile version.

*Click on picture to see it bigger.

Mood Board

  • Before I tackle the brand’s visual looks, I went to gather inspiration online and created a Mood Board.

  • Based on all the research I have done so far, I have created brand attributes to help me identify Zeit’s visual looks.

    Attributes: Modern | Sleek | Timeless | Friendly | Trustworthy | Adventurous | Dimensional

*Click on picture to see it bigger.

Logo

  • Inspired by my mood board and brand attributes, I have sketched out and digitized different variations of the brand logo and picked out the best one that represents the entity.

*Click on picture to see it bigger.

Brand Style Tile

  • After finalizing the logo design, I created a style tile that represents the brand to have a consistent visual tone of Zeit Identity.

UI Kit

  • I have created an updateable UI-Kit to compile all my UI elements, features, patterns, and assets into one guide as I build through the pages.

High-Fidelity Wireframe

  • Based on my mid-fidelity wireframes and brand style tile, I have combined and created various UI elements to develop the overall visual look for the pages.

Homepage

*Click on picture to see it bigger.

Destination Page

*Click on picture to see it bigger.

Latest Deals Page

*Click on picture to see it bigger.

Test

In this phase, I have created a prototype design to conduct usability testing with real users to see if the screens function as intended. This will allow me to weave any potential user difficulties, usability errors, or false assumptions that the prototype may have so I can iterate on the updates and prevent over-investing before the actual site development.

Usability Test

  • Before conducting the usability tests, I created a usability testing plan to outline the scope of the test. The goal of the usability test was to uncover any pain points or usability issues with the website.

Goals

  • Determine users understanding and navigation of the site.
    Learn the paths users will take to find their desired information.
    Find what information was lacking and where was it expected.
    Learn where there is confusion, frustration, lacking information, or expected yet missing features.

Methodology

  • In-person with Figma prototype presentation.

  • Remote with shared Figma prototype and shared their screen so

  • I can observe their interaction with the prototype.

Participants

  • Number of participants: 3-6

  • Age demographic: 25-60 Years of Age

  • Personality: Sci Fi and time travel enthusiasts among my friends and relatives who are also travel occesaly.

Hi-Fidelity Prototype

  • After creating High-Fidelity Wireframes, I used Figma to make Hi-Fidelity Prototype.

Affinity Map

  • After the testing, I gathered and synthesized all test findings, using an affinity map. Then, I synthesized all the insights in order to find the most prominent patterns in user comments, actions, and pain points that led to solutions for improvements.

Reflection & Next Steps

Key Learnings

I really enjoyed working on Zeit. As a frequent travel planner, it was interesting to find out how people get their inspiration and approach trip planning. Through this project, I have a better appreciation of how small changes can have a big impact on overall successful results. Getting to create an experience that would inspire users with their travel goals was challenging but very rewarding.

Next Steps

I will consider building out another prototype focusing on a different flow of the Zeit travel website. Test the priority revisions and make any easy, necessary changes, and handoff to developers. I found that users liked the overall look and were pleased with the visuals of the site. They also liked the simplicity and were able to quickly navigate using familiar patterns.