The Challenge

How might we make time travel accessible and safe?

Zeit is a hypothetical company looking to make time travel tourism accessible to everyone. In this scenario, new technology has been developed to make time travel possible. The trips themselves are similar to resorts - trip events are organized and interaction with locals are limited for protection.
The task was two-fold: First, Zeit needed a brand that was both historical and modern.
They also needed an e-commerce website that would allow users to select travel packages in an intuitive way.

View Prototype

Project Type

Solo project for UX Academy program

Tools

Sketch, Invision, Adobe Illustrator

Role

Research, Interaction Design, UX / UI Design, Branding

Duration

3 Months

Design Process

Use existing mental models to guide innovation

I approached this challenge through a design thinking lens. Since time travel doesn't exist yet, I relied on existing mental models for travel today to imagine what the product would look like.

Research

Understanding the market & potential users

Competitive Analysis and Market Research

I conducted both market research and a competitive analysis on both direct and indirect competitors to find trends and opportunities in the product space:

Secondary research summary on the travel industry, competitors, and provisional personas

User Interviews

I interviewed several potential users on their experiences with travel to better understand their needs, motivations, and perspective on travel.

Key Insights‍

People want to know that they can travel alone
Users need to be able to refer to travel advice when trip planning
There needs to be opportunities to explore the outdoors during the trip

Empathy Map

Using the interview notes, I created an empathy map based on the 5 senses. These groups helped identify pain points and opportunities.

Thinking and Doing sections of the Empathy Map

Define

Outlining the Scope

User Persona

I created a persona that embodies the insights from the previous research and from the empathy map. This will help focus our design on and understand our target audience.

The user persona outlines the motivations, goals, and needs of the target user

Storyboard

To showcase the context and build empathy potential users, I created a storyboard.
View the storyboard.

Card Sort

I asked a group of potential users to categorize a list of trip titles that would be included on the site. Based on common patterns/sorts, we were able to see how users might expect to see the site organized.

Analysis of patterns, opportunities, and interesting finds from the card sort

Feature Roadmap

I listed and prioritized all potential features based on impact and complexity. This helped me plan out the initial design and define the scope of the initial build of the site.

Ideate

Developing the Information Architecture

Site Map

Based on the feature roadmap and card sort, I created an outline of how the sites’ pages would be organized. This provides a baseline of pages that need to be included and gives us a skeleton of potential site workflows.

The site map outlines the page hierarchy of the website

User Flows

Based on the site map, I then mapped out how our persona, Sam, would complete tasks in Zeit such as finding and booking a trip.

The site map outlines the page hierarchy of the website

Prototype

Bringing ideas to life

Sketches

I sketched several variations of what a landing page for Zeit might look like. These rough sketches provide a quick and low cost way to explore multiple ideas before digitizing our design. View Sketches.

Wireframes

I drafted wireframes for the key pages of the website, based on the elements from the sketches that helped build a cohesive story.

High-fidelity wireframes of the home, trip search, and trip summary pages

UI Kit

I researched how other sites conveyed new, innovative products and also how space and travel are typically colored. I choose a selection of deep purple-blues and greens to convey the sense of mystery/awe and fresh perspective that Zeit brings.

UI kit of branding, interaction elements, and page header/footer

Mockups

I then added the branding elements to my wireframes to make the mockups.

Mockups of several pages from the desktop version

Prototype

I then created a prototype based on the mockup screens. View the prototype.

Test

Finding opportunities for improvement

Usability Tests

I created a test plan that defined the scenarios to test and to document the assumptions I had about the results of the test.

Affinity Map

I grouped observations and comments made during the usability tests to derive patterns. The patterns and comments helped find insights and create/prioritize recommendations for changes to make.

The affinity map aggregates patterns from the usability tests to inform insights and recommendations

Reflection

Lessons Learned

Having been my first full UX project, I learned a lot about visual hierarchy, telling a story through copy/images, and how to make interactions more clear. The main insights I gathered from the usability tests revolved around the meaning and expectations of the elements on the page. On the re-vamp of my project, I updated much of the interactions to more closely match common patterns that are already out in the wild.