Zeit

Responsive ecommerce website

Project Overview

 

Problems:

Zeit is a hypothetical venture into time travel tourism. They are needing a logo and an e-commerce website which is where users get to engage and potentially purchase their first time travel experience ever. There are many challenges in designing something that is not possible currently and using imaginations and current technology to convey the idea.

Objectives

  • Design a logo for the company that can be modern and historical at the same time: how can you reflect a modern technology with the historical past that it will take us to?

  • Design a responsive e-commerce website that is easy to use and allows customers to browse through all the different trip categories and details, filtering depending on interests and classifications you feel are relevant. 

Scope: Responsive website, Branding

Software: Figma

Role: UX Designer (Research, Visual Design, Interaction Design, User Testing)

Reference

Design Process

 

  1. Empathize

  • Market Research

  • Competitive Analysis

  • User Interviews

  • Empathy Map

  • User Persona

2. Define

  • Project and Business Goals

  • Feature Roadmap

  • Card Sorting

  • Site Map

3. Ideate

  • Task and User Flow

  • Wireframes

  • Branding

  • Responsive UI

  • UI Kit

4. Test

  • Desktop Prototype

  • Usability Testing

  • Affinity Map

Empathize

Research Goal

  • We want to know who is interested in time travel so that we could identify the target audience which will impact the UX and UI of the design scope.

Research Objectives

  • Determine what motivates the users to time travel and not the traditional vacation

  • Understand the users’ background, personal interests

  • Understand the users’ purposes and goals of time travel

 

Competitive Analysis

Research_Ramp-Up_Template_WgsCdKX.png
 

User Persona

Persona_Aahil_.png

Define

  • Project Goals

  • Project Roadmap

  • Card Sorting

  • Site map

 

Business and Project Goals

Zeit presentation.png
 

Project Roadmap

roadmap.JPG
 

Site Map

Ideate

  • Task and User Flow

  • Wireframes

  • Branding

  • Responsive UI

  • UI Kit

 

Task and User Flows

 

Wireframes

Search Engine: people will be able to search for destinations and experiences. Zeit is different - they will be able to search for others’ experiences (testimonials/reviews) to see what others’ experiences are. How it works: 4 simple steps laying out how people book, prepare, and travel!Testimonials: This is where we collected all helpful feedback - good and bad (warnings, hiccups, unexpected experiences)Experiences: Suggestions of experiences people may not have thought about. Time traveling is as unlimited as traveling to fun places in the present time. Become a member: Becoming a member by dropping some quick info for us to follow up and explain in full details. Progress Bar: This progress bar shows the progress of booking and where they are at in the process. Image: This will show the image of the place they just searchedDestination to destination: Just to keep things on the same page with the users - this will show what they searched where to go Packages: Packages with different options to choose from Image: This will just bump the text and the image up - acting as a headerCalendar: This will make sure the booking goes as planned - Location, dates, and time Summary: This is a place holder for a summary of the trip Personal info: Adding personal info and billing info to finalize the bookingTrip summary with pricing: To stay transparent with the experience of booking a time travel, showing the total price is important.
 

Branding

Frame 175.png

Zeit means time in German. We brainstormed the design ideas by setting Zeit and its meaning at the center. We have concluded that one of the most timeless inventions of time telling from the ancient time until now is the hourglass.

 

UI Kit

We identified Zeit’s UI kit using the branding and their business goals. We think about their user interface as their most important aspect in order to gain trust, provide safety, and build relationship with the users.

Test

  • Desktop Prototype

  • Usability Testing

  • Affinity Map

 

Process

We started identifying our goal as a business to further our understanding of the target audience as we design for the users’ booking experience. We then started researching and testing our design using the group critique and personal interview methods. Once we have our initial design, we started sending our prototype out to our participants to test the usability of Zeit’s search feature on a desktop view.

Objectives

To find out what customers are looking for when land on a homepage and identify how to improve the functions per desire of the customers

 
 

  • Monica B.

    The progression bar is helpful and well organized for the checkout process.

    The overall design of the product is pleasing to the eyes.

    The plan page is a bit congested and distracting.

  • Mary S.

    More options to browse in case the users do not have a specific place to go.

    Doesn’t understand easily how it works.

    Try to put ourselves in the shoes of the first time users - doesn’t know what Zeit is about.

  • Eric D.

    Think emphasizing the testimonials would be helpful more than other aspects as most users want to make sure others have great experience, the company is trusted, and worth the money.

    Users don’t like to read - less text, straight to the point, more visuals.

  • Scott S.

    For “other experiences” on the search page, could add some texts or headings to identify the experience.

    Make the trip destinations heading more visible.

    The image behind the search bar is distracting.

  • Ben H.

    Concern about safety.

    More info on safety and security of the product.

    Overall design is good and easy to understand.

Conclusion

  • Users seem to understand the context of Zeit, what we are about. However, most users are still getting used to the idea of time traveling and all the logistics. 

  • Users can feel the ease of booking since it’s not out of the norm of booking other travel experiences on competitors’ sites. 

  • We will take some of the comments for future improvement of other aspects of the site such as ‘how it works’. 

  • We are limited in resources as a company/design because Zeit is a hypothetical project. No one has ever done this in real life. Some of the business strategy will not be completely covered as we think about legal matters and other logistics.

persona by Yu luck from the Noun Project