Responsive eCommerce Travel Store

Research, Information Architecture, Visual Design and Usability Testing.

Background

Zeit is an unprecedented leap forward in technology, which requires a tailor made platform for selling time travel holiday packages. This body of work was completed as part of DesignLab's UX Academy course.

Problem

Zeit will be a high risk, high expense venture that will need to be tailored to the individual. It is the first of its kind.

Solution

Through user research, competitor analysis, prototyping and usability testing, a unique solution was found that met the needs of the user, while differentiating Zeit's service through high levels of usability, a unique UI and well designed product features.
View Prototype
Project Duration: 80 hours

Research

Competitor Analysis
User Research
Interviews
Persona

Architecture

Site Map
Task Flow
User Flow
Product Roadmap

UI Design

Wireframes
Paper Prototype
Icon Set
Logo Design
Prototype

Implementation

High fidelity Prototype
Usability Testing
Affinity Map

Research

Competitor Analysis

The first task with ZEIT was to find existing platforms and services offering holiday services and complete an analysis of their strengths and weaknesses. Which services have a USP that differentiates their product? How have they laid out their UIs and task flows?

User Research

5 participants between the age of 23 and 59 were interviewed, all of whom travel more than 3 times a year. Each had a different requirement from their holiday booking service, however there were patterns that provide insights into needs and pain points.

The most important takeaway was a unanimous desire for a local guide when time travelling. Interviewees expressed many fears around time travel, from knowing local cultures and languages, to conflict in the time period and worries about not being able to return home.
I didn’t feel 100% confident using it (SkyScanner). I was scared i was going to press the wrong button and book something i didn’t want.

My biggest worry about time travel is not being able to get back, or getting caught in some kind of historical violence.
I'd want a local to show me around.
"

Needs

Clarity and simplicity - Generally, all users needed to be able to understand the platform without any ambiguity.

Wants

Local guidance - Across all participants, there was a clear desire for some form of local guidance at their travel destination.

Frustrations

Unnatural interaction - All users were frustrated by unnecessary loading screens and navigation steps.

Opportunities

Local guidance - All participants wanted some kind of local guidance from a holiday, which is only offered by a select few service providers such as Viator.

User Persona

Based on interviews and competitor analysis, a user persona was created to help empathise with a hypothetical end user of ZEIT's service.

Architecture

User Flow

With a persona in mind, the main user flow for the platform was ideated and wireframed with the core needs and wants of the user prioritised. The flow was designed to present the user at any point with a limited number of options, leading them through the conversion funnel to purchase a product.

UI Design

Design Approach

ZEIT's platform is intended to be responsive and operate across devices. In order to ensure a consistent, device-agnostic experience, a mobile-first design approach was employed as it easier to scale up a mobile design than vice versa.

Paper Prototype

The task flow was then prototyped using paper sketched and Marvel. A card based design pattern was used as they enable the reader to obtain all the relevant information at a glance such as location, year, price and reviews.

All CTAs (Calls To Action) and information are available in the product page, including user reviews and information on the holiday and the tour guide. From here users can share the content, save it for later, customise the package or add it to their cart.

Low-fidelity Wireframes

Low fidelity wireframes allow the designer to focus on layout, content, visual hierarchy and navigation. This ensures high levels of usability in the end product.

High-fidelity Wireframes

With the layout completed, work on the visual design could begin. A black background was chosen for the UI to differentiate the service from other travel sites and give the platform a luxury sci-fi atmosphere, with turquoise CTAs and a mixture of solid buttons for key actions and ghost buttons for secondary functions.

Below is the wireframe for one of ZEIT's product pages.

Implementation

Prototype

The ZEIT platform was prototyped using Invision to enable usability testing. The entire buying and search process were modelled with a checkout system. The prototype is available for public use here.

Usability Testing

Using the prototype, a usability test was conducted with 4 individuals to provide quantitative and qualitative data about the platform.

This was accomplished by asking the user to complete a series of tasks, such as searching for, booking or customising a holiday trip to Ancient China.

The aim was to have a 100% completion rate and, if possible, a 100% error-free rate.

Quantitative Results

Task 2 and 4 provided difficulty for many users - This showed a clear problem with the task flow for customising holiday packages, and leaving reviews.

These errors were a result of poor UI design - Users were trying to perform these actions through the product page, but the features were placed in the profile section of the site.

To fix these issues, options were included on the product page for leaving reviews and customising the holiday.

Affinity Map - Qualitative Results

Throughout the usability test, comments that voiced some opinion from the user were recorded and then collected. These could then be grouped based on related content and put into an affinity map. This informs the designer about what users appreciate and what they would like to change, such as the inclusion of a clear homepage button in the nav bar.
Feels professional. The sort of site I would happily spend money on.

Generally very good, pretty straightforward it flows nicely and is simple.
"

Outcome & Reflection

Zeit was the first end-to-end design project I completed as part of my course in UX Design, and I learnt a lot in the process. I particularly enjoyed the ideation phase of the project, sketching out UI wireframes and translating them into a prototype.

The most important takeaway for me was the power of testing a research with real people, who can shatter and generate ideas with a single sentence. The feedback loop this gives is an essential part of the design process and arguably the most important as it validates the hypotheses of the designer.

Next Project: Redesigning the Spotify Homepage

Research, Ideation, Crazy 8s, Visual Design and Usability Testing.

Full Case Study