A responsive website for a time travel company

Roles: User Research, UX Strategy, Branding, UI Design, Testing, Prototyping

•Problem

O1

Plots of fiction books like H.G. Wells's “The Time Machine” or Michael Crichton’s “Timeline”, have finally become a reality. Zeit company, a subsidiary of Richard Branson’s Virgin empire, has been able to make time travel tourism available to all of us. They need to build a website to sell travel packages to different times, up from prehistoric times through today.

•Solution

O2

In order to create a responsive website, I performed:

Research

to find out people preferences when traditional traveling and their concerns when time traveling

Analysis

to better apply the findings

Exploration

to design ideas and validate them via users' feedback

Production

where the high-fidelity design was fleshed out

•Process

O3

Research

For the Zeit project, it was a challenge to create an experience that has never existed before. I interviewed four experienced people who could travel more than three times a year (with different purposes) and booked their travel online. All participants were ready to buy a travel package if they were going to visit an unknown or risky place.

 

As for time travel, interviewees would like to have clear and full information about time travel technology and how it would work. The biggest concerns were how safe their travel would be and the lack of modern comfort and medications in case of a disease.

I am worried about eating an unusual food, wearing clothes of that time and the lack of a modern toilet.

 

Traveling to unknown or unfamiliar destinations could be very risky. I want to be sure Zeit provides insurance that covers various cases that might happen on the way.

Analysis

Using the data collected from my research, I created an empathy map to understand users’ feelings, perceptions, and motivations. It would give me insight into what my strategy should be in designing the Zeit website.

Based on the empathy map I synthesized a persona as a representation of users: David, a senior software engineer who adores his family.

 

David travels 3-4 times a year for business and active leisure. He books tickets online and sometimes worries about possible technical issues during booking online. When it comes to time travel, David wants to get the insurance covering various cases that might happen during time travel.

To help me understand how to organize the website content I conducted a card sorting workshop. The participants were asked to sort 20 elements of content and then group and categorize them in a way that would make the most sense to participants.

 

Based on the results of card sorting I created a sitemap to show the relationship between the content within the Zeit website.

By using the sitemap as a guide, I constructed a user flow diagram identifying how a user would complete the core task of searching destinations and booking desired travel package on the website.

Exploration

Since the Zeit website needs to be responsive, I designed wireframes with a mobile-first approach in mind. First, armed with a paper and pen, I drew quick sketches and then created low-fidelity wireframes in Sketch.

Production

I designed a hero image in Photoshop using three source pictures. My aim was to create the ambiance of directly time travel in the past and not just travel.

The adjectives that described Zeit best of all, might be "innovative", "vigorous" and "trustworthy". I started drawing sketches of company's logo and finally created the symbol that included several meanings:

  • a multiple letter Z;
  • the globe;
  • a lightning penetrating time and space;
  • since time might flow as water, the symbol means water ripples.

Since we assumed Zeit might be part of the Branson's empire, I chose red as the primary color because most of the Virgin Group's companies had the logo in red.

 

Once I had the logo in place, I created a UI Kit with the color palette, font selection, and other key elements.

Testing

I designed high-fidelity wireframes using Sketch and then uploaded them to InVision for creating an interactive prototype.

view the prototype

I conducted the virtual usability tests using InVision App and Skype and recorded them using Quicktime. Amongst the test objectives were:

  • to identify how easy users can navigate through the website and go through the search process
  • to identify spots where users stuck
  • to determine how easy users can identify buttons on each page
  • to identify how long it takes for users to book a travel package and how many errors users make when booking/checking out
  • to learn how satisfied users are with design, layout and user flow

The hero image gives me a sense of time travel and the slogan emphasizes that we travel directly to the past. That’s creative.

 

The trip summary is always in sight when booking. It’s cool.

I analyzed all the feedback from 6 users and organized them into an affinity map. This allowed me to identify the elements that needed the most work and reiterating.

Final Design

The high-fidelity wireframes were created based on the feedback from the usability tests.

Home Page

Product Page

•Thoughts

O4

Using the design process of research, strategy, design, and test I successfully achieved my project goal by developing a responsive e-commerce website and branding for Zeit.

 

While working on this project, I realized what a huge role usability testing played in the design process. Even though high-fidelity wireframes and prototype have been carefully thought out and thoroughly designed, there were a few elements that made users confused. I should keep in mind that users have their own, different from mine, views and preferences when interacting with the website. Testers' feedback has allowed me to identify bottlenecks and improve the user flow and design.

 

The next step would be to work with developers on the launch of the Zeit website. Following the launch, continued user testing and analytics would assist in making refinements to the product.

© 2017 • Olga Bolshchikova

 

By using the sitemap as a guide, I constructed a user flow diagram identifying how a user would complete the core task of searching destinations and booking desired travel package on the website.

 

Using the design process of research, strategy, design, and test I successfully achieved my project goal by developing a responsive e-commerce website and branding for Zeit.

 

While working on this project, I realized what a huge role usability testing played in the design process. Even though high-fidelity wireframes and prototype have been carefully thought out and thoroughly designed, there were a few elements that made users confused. I should keep in mind that users have their own, different from mine, views and preferences when interacting with the website. Testers' feedback has allowed me to identify bottlenecks and improve the user flow and design.

 

The next step would be to work with developers on the launch of the Zeit website. Following the launch, continued user testing and analytics would assist in making refinements to the product.

 
 

 
 

 

 