ZEIT rectangle color fade for website banner.png

ZEIT

ZEIT

zeit mock up all 3 devices.png
 

Product Design Case Study

 
 
 

Background 

Zeit is the first company to offer time travel tourism. People may travel back in time to enjoy an immersive, unique vacation.

This is a design assignment for school, based on a fictitious company.
 
 
 

My Role

User research, information architecture, user experience design, interaction design, wireframes, responsive design, logo design, brand development, visual design, icon design, visual storytelling, responsive user interface design, usability testing and test interpretation. 

 
 
 

Project Scope

  • Create a brand identity. 

  • Design a logo.

  • Make a responsive website that allows the public to either filter their search or browse for their vacation on a desktop, tablet and mobile platform.

 
 
 

Tools 

Sketch, InVision, Marvel, Zeplin, Adobe Photoshop, Illustrator, Optimal Sort, Pinterest, Google Slides, Slack and Paper + Pen.

 
 
 

research > strategy > Design > test

 
 
 

Research

Methodologies

  • Secondary Research

    Research traditional travel, travel packages and time travel. Research the psychology of travel and tourism. 

  • Indirect Competitor Analysis

    Analyze competitors websites information hierarchy, site flow, navigation and user interface design. Note design trends. Identify innovative and stunning solutions. 

  • Primary Research

Conduct personal interviews with potential clientele. 

 
user comments.png
 
 
 

Strategy

I created various deliverables to define my products demographic and develop  my product strategy. Below are just a few of the visual artifacts from the strategy development phase. 

Persona

In design thinking, empathy is key. I created a user persona; a realistic representation of my products key audience.

 
 
 
 
 

Sitemap

My sitemap shows the organization of the website; its pages, categories and content. 

 
 
 
 
 

User Flow

My user flow is a map which illustrates a few of the paths the user takes as they navigate through the website in order to complete various tasks. It is a technical diagram which focuses on decisions, actions, navigation and flow.

 
 
 
 
 
 

Design

Wireframes

I created wireframes, the architectural blueprint of my website's design, to show the information hierarchy and lay out the elements of each page.  I made a prototype with the wireframes which I tested repeatedly to confirm that my developing design was well organized and that task completion was successful. 

 
 
 

Branding Elements

To create ZEIT's brand, I designed the logo, wordmark, color palette, vector icons, selected the font and collected photos. 

 
 
 
 
 

UI Kit

An assortment of graphic files including user interface and user interaction design components as well as patterns.

 
 
 
 
 

User Interface

I implemented my branding, user interface and user interaction elements throughout my wireframes, turning them into high fidelity designs.

 
 
 
 

Responsive Design

The website was designed to render on three devices: desktop, tablet and mobile.

 
 
 
 

Test

Affinity Map

I tested the prototype of my website with potential users.  An affinity map helped me see the patterns and visualize the feedback from the user test sessions. I returned to my designs and made improvements, catering to my user needs.

 
 
 
 
 
 

Next Steps

The user interface design elements could be incorporated throughout the remaining wireframes. Once completed, more user tests should be done to measure the success of task completion and UX of the website.

 
 
 

See more case studies

Women Who Ride - Motorcycle social networking mobile app

Women Who Ride - Motorcycle social networking mobile app

Bandsintown - Concert discovery and music mobile app

Bandsintown - Concert discovery and music mobile app

I SUP Sarasota - Sports equipment rentals and guided tours e-commerce responsive website design

I SUP Sarasota - Sports equipment rentals and guided tours e-commerce responsive website design