Conceptual E-commerce Site

Zeit

 
 
 
 

Project Overview

 
 

Challenge

Design E-commerce for Time Travel

ZEIT is a brand new, up and coming travel booking site out of Germany. Visionary Richard Branson has worked to harness the technology of modern time travel to provide travelers with a secure and revolutionary new travel experience. 

The e-commerce site allows travelers to visit to up to 289 destinations worldwide, with the ability to relive anything from the past - from the ages of the dinosaurs to Mozart’s first concert.

Objectives

Create Brand & Responsive Design

  • Design a logo that is modern but has historical and technological context

  • Create a responsive e-commerce site that allows customers to browse through all different trip categories and details

  • Provide information on how the service works for customers to understand and trust the company

 

Scope

Responsive Website, Branding

Role

Sole UX Designer (Research, Visual Design, Interaction Design, User Testing)

Tools

Figma, InVision, Adobe Illustrator, Whimsical, OptimalSort

Duration

4 weeks (160 Hours)

 
 
 
 
Mini logo image.png
 
 

Design Process

 
 

Empathize

Research Goals

Methodologies

Empathy Map

User Persona

Define

Project Goals

Card Sorting

Site Map

Ideate

Features Roadmap

Task & User Flows

Sketches

Wireframes / Responsive Design

Branding

UI Kit

Prototype

High Fidelity Wireframes

Prototype

Test

Usability Testing

Affinity Map

Priority Matrix

 
 
 
 

Empathize

Understanding Traveler Behaviors

Empathizing with users is key, and an essential part of the design process. Understanding their immediate needs, frustrations and personal goals reveal what the design will ultimately have to feature. Research goals and methodologies were first defined to help understand what information would be needed for creating design solutions for travelers.


Research Goals

  • Empathize with traveler frustrations and pleasures in booking online 

  • Understand what features in booking a trip are a priority

  • Understand how travelers gain information about their trips

  • Learn the frequency at which travelers book trips


Methodologies

  • Secondary Research (Market Research & Competitive Analysis)

  • Primary Research (Personal 1:1 Interviews)

 

The Travel Market

To get a better understanding of the travel industry, market research was necessary to conduct; analyzing current trends to help gather information on consumer needs and preferences when booking contemporary trips online.

Since time-traveling is making its debut, no direct competitors of Zeit exist. However, travel companies that offer personal booking and experiential services were referenced to gain insight as to what features the site could potentially adopt.

 

The Competition

Exploring competitor strengths and weaknesses helped to determine what combination of features may be beneficial or a disservice to Zeit’s own design.

 

Demographics

Looking at the demographics for each competitor also served to determine what the potential target audience would be.

Millennials are traveling and booking their trips with the most current resources

The smaller demographic falls on older generations, (Baby Boomers) who are traveling with a more disposable budget - generally retired or otherwise wealthy men.

 

Speaking with Travelers

It is important to note that all Secondary Research was conducted before Primary Research. Secondary research provides the foundation for the research phase, and is information that is already available and accessible. Primary Research requires obtaining new data which can happen in the form of 1:1 interviews, group brainstorming, or surveys.


Once Secondary Research was complete, 30 minute 1:1 interviews with 4 different participants that fit the demographics previously identified took place. Valuable insights were obtained from their personal travel experiences and allowed for a deeper understanding of Zeit’s future users.

Number of Interviews: 4

Gender: 1 female, 3 male 

Age: 31-70

Summary

  • Participants want a painless booking process

  • Affordable traveling options

  • Learn from their travels through food, art, and culture 

  • Enjoy traveling with others or meeting with others 

  • Has limited time to vacation

 

Mapping Observations

In order to synthesize all qualitative data collected from the research phase, an empathy map was constructed to show all observations made from each participant that was interviewed. Below shows each participant’s experiences. Each color represents a different participant.

 

3 main patterns emerged that specified insights and needs that had to be met for all participants when looking to book a trip online.

 
 
 

Welcome Francisco!

Based on all prior research conducted, a persona could then be reached to target who the audience for Zeit would be and specifications the site would need to cater to based on their goals and needs. This helps to focus on addressing the major needs of the most important user groups. It is both fictional and realistic.

Welcome, Francisco! A 31-year-old Digital Producer from NYC. He’s an art lover and foodie with an interest in traveling to learn something new wherever he goes. While he doesn’t vacation much, he looks for trips that are cost-effective and provide a quick and easy booking process.

 
 
color-3.png
 
 

Define

Linking Goals

Now that all information has been collected in the research empathy phase, each piece of data can be more specifically defined.

Important user insights and needs, as well as the target audience, have now been established. Common goals could be linked together to visualize what goals were most important and how they all overlapped one another. User goals from the provisional persona and empathy map, business goals from the project brief, and technical considerations were all united.

 
 
 
 

Categorizing Time Periods

Defining further, a hybrid card sorting experiment was then conducted to determine how well participants could categorize different time periods and events. Using OptimalSort, 8 participants were asked to naturally sort 20 different cards into three predetermined categories (Prehistoric Times, Ancient History, Modern History) and were invited to include additional categories if they felt the predetermined categories did not suit the cards.

Analyzing the results, all participants were able to similarly sort the 20 cards into the 3 predetermined categories given. Only one participant divided the eras even further for more specificity. About half of the participants had trouble identifying which event belonged to the Ancient History category, which showed there was too much ambiguity and further specification would be needed.

 
 
color-3.png
 
 

Constructing an Intuitive Layout

Thanks to the card sorting experiment, a site map could then more easily be constructed. This helped to sort the information architecture and define the navigational hierarchy of all pages, sub pages and features the site would offer.

 
 
 
 
 

Ideate

Selecting Key Features

To begin the ideate process, a feature roadmap was constructed which ranked most important to least important features needed for the site - Must-Haves [P1], Nice to Have [P2], Surprising and Delightful [P3], and Can Come Later [P4]. This helped to gain a clearer sense of what the priorities of the project were. A comprehensive list can be seen here.

 

Going with the Flow

To make better sense of what was to be designed, task flows were created to show how Francisco would navigate from page to page. These linear flows detail the personal journey and experience of the user based on their needs and helped to determine what features would be paramount to have to complete the tasks. Below is the first task flow Francisco would most likely encounter - searching for a trip. 2 other task flows were created and can be viewed here.

 
 

The Full Journey

Building on the task flow, the user flow shows how all tasks connect and what decisions the persona would make through those specified scenarios. These flows would then be implemented and tested in the prototype. A full version of the user flow can be viewed here.

 

Creating a Responsive Design

After drafting up some sketches, digital wireframes were constructed from the compositions that best suited the needs of the persona. Mid fidelity wireframes were created in greyscale to first determine information hierarchy, position, and size of the content before color and imagery were to be applied. The wireframes were then molded into 3 different interfaces for desktop, tablet & mobile.

 

Branding Zeit

Before designing a logo and style tile, a mood board was assembled to gather multiple inspirations around the attributes identified for the brand:

  • Modern

  • Historical

  • Inspiring

  • Ethereal

  • Innovative

Logo Design

Logos were then created to bring the brand name to life. A number of concepts were quickly sketched out, and from those variations, digital renderings were made to capture a more realistic mood. The winning design was then finalized and scaled-down with and without the brand name.

 

Style Guide

The style guide establishes the brand identity for Zeit. All elements inspired from the mood board such as color, typography, imagery, as well as the logo were then compiled to give developers a clear idea of what the appearance of the site will adhere to.

 

UI Kit

A user interface kit was then compiled to show a complete list of brand assets and styles used throughout the website. The kit serves as a guide for all UI design choices of the brand identity. Revisions will occur as the design evolves.

 
 
color-3.png
 
 

Prototype

Let there be Life

Based on the mid fidelity wireframes and design elements chosen, high fidelity concepts were then composited to show a more realistic version of the sites appearance and how they are applied across each digital interface.

 

Once the Responsive designs for the homepage were developed, other main pages and sub-pages were able to be realized.

Below shows the Destinations pages, where Eras and specialty trips can be viewed, the Ancient Era page and all of its trips within that period, and more specifically the Ancient Greece page where the persona will book their travel based on the task flows identified earlier on.

The prototype would then be tested by participants to experience the site’s potential feel and function.

 
 
 
 
 

Testing

Putting it to the Test

Prototype testing begins - a plan is drafted and participants are recruited. Results from each session were recorded with the participant’s consent. Each participant is given scenarios and asked to complete the previously developed task flows. Below is a quick overview of the data collected from the test. The full Usability Test Plan can be viewed here.

 

Participants

  • 5 participants

  • Ages 31-70

  • Travels frequently or has traveled recently

  • Experience with booking trips online

Methodology

  • Evaluative Research

Method

  • Think aloud testing

Tasks

  • Task 1 - Find a trip to Ancient Greece

    • 5/5 Participants were able to locate the trip to Ancient Greece

    • 0% Error-rate

  • Task 2- Find and learn about the Ancient Era

    • 5/5 Participants understood how to navigate back to the Ancient Era page

    • 0% Error-rate

  • Task 3- Book a trip to Ancient Greece

    • 5/5 Participants understood how to complete the booking process

    • 0% Error-rate

 

Grouping Observations

From the usability test, patterns were able to be identified among participant’s experiences through an affinity map. This is significant as it shows more qualitative data of the research conducted. Insights and suggestions for the design were then able to be further defined.

 
 

Priority Improvements

The priority matrix then determines the importance of suggestions made according to the impact and overall effort that would be needed to complete the proposed updates.

 
 
 

Finessing Zeit

As time was limited, priority revisions were made based on the data obtained from the affinity map. As the priority matrix shows above, low impact/effort and high impact/effort suggestions were identified and adjusted.

Users needed clarification of Era dates, so to increase the understanding of each time period, a date range was added under the Era cards and titles on the Destinations Page. The most important feature was to provide more descriptions of what the trip would offer on the Ancient Greece page. A brief bulleted list of trip inclusions was added for further clarification as users felt uncertain about what the price of the trip entailed. A previous version only explained the sights that would be seen on the trip.

Overall adjustments:

  • Accessibility of CTA/accent color was adjusted from aqua blue to a golden yellow

  • Logo was reduced in both the header/footer

  • Homepage hero image was replaced to provide more visibility / less clashing contrasts

 
 
 
color-3.png
 
 

Reflecting on my first UX Project

This is my first UX design project executed from infancy to prototype. It presented many challenges along the way, especially with research and defining what would initially be needed before any design decisions could occur. I was able to see more clearly where my strengths and needs for improvement lie as a designer. I learned to rationalize my design decisions by building on research to help minimize gaps or inconsistencies later on in the design process. This proved to me how incredibly important it is to remain consistent with my design decisions as all choices made previously affect everything else later on.

Overall, I gained a greater understanding of the UX design process and e-commerce business. I’m proud of this being my first time creating such a design by implementing all design processes.

Next Steps

Now that the design has been tested and revised, it’s time to enter the development phase. In order to effectively communicate the design to developers, I made sure to organize my design deliverables using Figma for handoff. This will allow developers and product managers to actively collaborate and view the deliverable in one space.

Continuous rounds of testing, updates and revisions will occur as the design evolves and caters to the relevant needs of the user.

 
 
 

View Other Projects