KRIZTILLE
UX DESIGNER
zeit-mockup-4b.png

Zeit

 
Zeit-3-device.png
 
 

ZEIT

Scope: Responsive Website

Client: Zeit, a fictional time travel agency

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

The Challenge: Design a branded responsive website to promote destination packages for time travel.

The Result: Zeit now has a responsive website with a brand that reflects both history and modern technology.

 

Background

 Zeit is a time travel agency looking to push this new way of traveling to the consumer sector. They are looking to focus on a brand that both reflects their ties to history, and the use of modern technology to make time travel possible. They need an responsive website that promotes this time travel as a new kind of travel experience.

 

The Process

 
 
 
 
 

RESEARCH

Tools: Market Analysis, Competitive Analysis, Provisional Persona, 1:1 Interviews

Understanding the Landscape

As a pioneer for consumer time travel, Zeit needed to understand its place in the industry. I conducted a competitive analysis to identify competitors that offer unique and niche experiences as well as potential target demographics.

 
 

Start with the People

The target users of Zeit were young professionals who were seasoned travelers and adventurers.

To better understand and empathize with our target user, I conducted a series of 1:1 interviews to acquire a deeper understand of the target user’s key drives, motivations, fears, and preferences.

Throughout the user research process, I focused on disproving or proving the following assumptions:

  • New travel experiences will be favorable if the target users are already seasoned travelers/adventurers.

  • There will be initial pushback due safety concerns

  • Users would want to see a sample of the experience so they can validate their own assumptions.

  • Users would spend more if the experience is unique enough

 
 
 

DEFINE

Tools: Empathy Map, Persona

Identify Insights and User Needs

With the use of an empathy map,  I uncovered what the users think, hear, say, and do. This was used to gain insights and identify user needs. 

 
 
Zeit Empathy Map

Defining our Target User

Using the insights gained from the competitive analysis and user interviews, I identified an ideal target user through a persona.

 
 
 

IDEATE

Tools: Card Sorting, Sitemap, User Flow, Wireframes, Logo Sketches, Style Tile, High-FIdelity Wireframes

Card sorting was conducted to understand and explore an intuitive way to organize information related to historical figures, places and events. Insights from this study will be used to determine key categories for the website.

ZEIT Card Sorting
 

THE SITE MAP

was used to show a top level overview of the informational structure of the website. I wanted to create a menu that showcases popular categories and company information in a way that is intuitive.

 

THE USER FLOW

Based on the sitemap, I showed how our persona would interact with the website given a specific goal and point of entry.

 
 
 

Wireframes

Once the project goals and information architecture of the site has been established, I created a rough outline of key pages based on the user flow for the wireframes.

I started with a quick wireframe for the desktop version of the homepage first, laying out several UI requirements that would be populated on the homepage including popular categories, a search bar and navigation at the top. The same elements (like the menu) will be later applied throughout all the pages. From the homepage, I built out the rest of the key pages including a category page, an individual product page and the checkout process pages.

To ensure the wireframes were created to fit the specifics of a responsive website, I also took the time to build out the mobile wireframes.

 
 
 

Brand Identity

Before moving forward with the high fidelity responsive wireframes, I brainstormed a few concepts around attributes that represented the brand.

Zeit’s logo was derived from a concept of star maps and galaxies. The thin lines and the two dots indicated a journey from one point to the next. The blue color palette was chosen as both to offer a sense of stability and security, but also to represent the heavenly bodies. The orange was added to represent excitement and energy. The Zeit brand was designed to embody feelings of wonder, adventure, and curiosity.

 
 
 
 
 
 
 

High Fidelity Wireframes

Using the new brand identity, I created a high fidelity version of the wireframes.

 
 
 

PROTOTYPE

Tools: Prototyping with InVision, Affinity Map.

I created a limited prototype in InVision using the key screens from the user flow and wireframes.

 
 
 
 
 

Prior to test, I developed a testing plan that detailed the project goals, objectives, and procedures. The usability test was conducted with 6 participants who were asked to go on the website and book a destination.

The tasks were broken down as follows:

  1. From the homepage, select and book a trip (The Renaissance)

  2. Navigate to the destination page and go through the checkout process.

Participants were observed to see how they interact with the website, and to identify potential pain points.

 
 
 

INSIGHTS + RECOMMENDATIONS

I compiled my notes and observations from the usability testing into an Affinity Map, where I sought out patterns and trends which lead to several insights and design recommendations.

AffinityMap2.png

From the Affinity Map, it revealed that many of the participants did not use the search bar to look for destinations. The company credibility and background was important to many of them. Any informational content on the company and their history was a recurring theme. As for the destinations, many of the participants were reluctant to book prior to reading the destination information, and peer reviews were especially important in helping them make a decision.

I took these insights and identified design recommendations to apply to the next prototype iteration.

 
 
 

ITERATE

Tools: Update Prototype, UI Kit

Using the design recommendations from the usability testing, I made revisions to the wireframes and the prototype.

There were changes made to the homepage:

  • The main search bar that was prominent on the hero image was removed and two call-to-action buttons were added in its place to encourage users to explore.

  • Next, a link to the company information was added to the global navigation.

  • Any confusion about the trip destination was amended by adding an option to view a sample itinerary.

  • If there was any more hesitation about booking a trip, the company's credibility was highlighted through customer reviews and testimonials which are now more prominent on featured posts like on the category page.

See an active prototype here.

 
 
  See the active prototype here.
 
 

UI KIT

With the wireframes and prototype updated, a UI Kit was created as a guideline for maintaining the visual elements used on the site.

View for UI Kit Here.

 
 
 
 
 

NEXT STEPS

 Based on the usability test findings, once the prototype has been update, I would once again conduct another round of usability testing.