Zeit

Zeit

INTRO

INTRO

CLIENT

Zeit Time Travel Agency
(Case Study)

 

PROJECT
Website + Branding 

CONTRIBUTORS
Courtney Leonard - Design Director

 

MY ROLE

Lead UX/UI Designer 

CONSTRAINTS 
Two weeks
Ficticious Indstry & Service


THE STORY
With technological advancements, the Virgin Group has developed the ability to time travel and formed a time travel tourism company called Zeit providing packages for the general public to travel back in time to 289 destinations, from prehistoric times to today. 

THE PROBLEM 

Zeit is the first company to provide time traveling services to the public and is having trouble with sales due to public awareness of company and service.

THE SOLUTION

Develop trust with users on Zeit and time travel through branding and design.

Zeit Banner 2

RESEARCH

RESEARCH

GOALS

Identify product demand
Identify target market
Identify areas of user interest and needs in time travel tourism
Identify user needs and trends in online tourism sites
Identify public awareness on time travel and Zeit’s product offerings
Identify popular destinations and package offerings.

SECONDARY RESEARCH

  • No direct competitors exist since Zeit is the only company to offer time travel.  
  • Indirect companies include: travel comparison websites, airline websites, hotels/resorts companies, and theme park/attraction companies. 
  • All the major travel websites have similar features and user experiences. 

PRIMARY RESEARCH

  • Stakeholder Interviews:  1-on-1 interviews conducted in-person & via Skype with participants to gather insight on personal preferences, travel experiences, and motivations.

FINDINGS

  • Most users already have lots of experience using travel websites and expect a similar user flow, look, and feel. 
  • Concerns regarding safety and health is important. 
  • Guiding attributes developed are: trust, safety, and familiarity.

DEFINE

DEFINE

PERSONAS

Zeit 2 – Persona Development

EMPATHY MAPS

Zeit 2 – Empathy Map

STORYBOARD

Zeit 1- Storyboard

FEATURE MATRIX

DesignLab – Feature Matrix

SITEMAP

Sitemap

DESIGN

DESIGN

WIREFRAMES

Wireframes

BRANDING

I designed the Zeit branding based on my guiding attributes of Trust and Safety developed during the Research and Define stage.

Logo

The company’s logo was developed by combining the attributes of trust (Baskerville font - wordmark), safety (shield - logo), and familiarity (location pin - logo). 

Zeit Logo OLD
Zeit

Color Palette

Primary Color Palette: Zeit's primary color palette will follow the same theme as blue and green are representative of trust and safety respectively.

Zeit PC

Secondary Color Palette: Zeit's secondary color palette will help bring the two primary colors together in a simple and cohesive design

Zeit SC

Typography

Using the same guiding principles Zeit's typography will pair the "trustworthy" Baskerville with a clean and simple sans serif font, Avenir, for increased readability. The typography is balanced with multiple weights and sizes to develop a clear hierarchy within the site.

Zeit Typography 1
Zeit Typography 2

UI Kit

UI Kit

MOCKUP

Zeit Responsive Mockup

TEST

TEST

PROTOTYPE/USABILITY TESTING

I developed a prototype with Sketch + Craft and conducted remote and in-person usability testing using Invision App and Skype.

FINDINGS

  • The average total success rate is 82%.
  • The booking process saw a 100% completion rate.
  • User flow is relatively consistent among participants.
  • There was a 60% error rate in saving search results.
  • Incomplete prototype hindered performance of participants due to nonactive buttons and text links.
Affinity Map

AFFINITY MAP

After the usability testing I compiled my findings and developed an Affinity map and wrote all the key insights from the testing.

Key comments made by participants regarding UI of website.

FINDINGS

  • Website is familiar, calming but dull. Should be more exciting.
  • More specific categoriesHistorical turning points:
    • Historical figures
    • Sports Heros
    • Golden Ages
    • More social/personalization
  • Customer photos
  • Photos in comments
  • Text on landing page is uninviting and unexciting.

ITERATE

ITERATE

SECOND ITERATION

Using the data from the usability testing and affinity maps I was able to identify user insights. I used those recommendations to iterate my previous mockups and to develop a stronger user experience.

Zeit-Prototypes-2

SUMMARY

SUMMARY

Using the design process of discover, define, design, and test I was able to successfully complete my project goal by developing a responsive e-commerce website and branding for Zeit.  

Through the different design stages I was able to develop empathy and solve the user’s pains and fulfill their needs. I was able to create an emotional connection with the users through the company’s branding and developed a successful user experience.

Using the design process of discover, define, design, and test I was able to successfully complete my project goal by developing a responsive e-commerce website and branding for Zeit.  

Through the different design stages I was able to develop empathy and solve the user’s pains and fulfill their needs. I was able to create an emotional connection with the users through the company’s branding and developed a successful user experience.

Other Works

SpredfastMajor Feature Release

Recipe HeroiOS Application Design

ClinimedResponsive Redesign

InVisionFeature Addon (Case Study)

© 2018 AHMED SABER