A responsive website for a time travel company
Roles: User Research, UX Strategy, Branding, UI Design, Testing, Prototyping
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.
In order to create a responsive website, I performed:
to find out people preferences when traditional traveling and their concerns when time traveling
to better apply the findings
to design ideas and validate them via users' feedback
where the high-fidelity design was fleshed out
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.
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.
user flow diagram
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.
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:
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.
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:
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.
huge roleusability testing users have their own, different from mine, views and preferences
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.