ZEIT Time Travel

A Responsive E-Commerce Website for a Fictional Enterprise

Project Overview

Challenge

ZEIT is a fictional enterprise that managed to make time travel tourism available to all by providing 289 safe travel destinations all over the world. ZEIT hired me as their UX designer to help them establish in the travel industry. They want me to establish their brand identity and design a responsive website for their business.

Objectives

  • Design a Logo for the company that can be modern and historical at the same time
  • Design a reponsive E-commerce website that is easy to use and allows customers to browse through all different trip categories and details, filtering via interests and classifications created

Project Scope

Responsive Website, Branding

Tools

Figma, Adobe Illustrator, InVision, Zeplin

Role

UX Designer (Research, Visual Design, Interaction Design, User Testing)

Team

Self Directed, with feedback from the mentor and peers

Duration

4 Weeks (160 Hours)

View Prototype

Design Process

01 Empathize

Research Plan

Research enables me to dig deep into my understanding of users - not only their immediate frustrations, but also their hopes, fears, abilities, limitations, reasoning, and goals. It lays essential foundations for creating solutions in later stages.

To ensure the research stays on track and better guide the responsive website design later, it is important to create a research plan before diving into the reseach phase. I listed research goals, research questions, assumptions, methodologies, participants, and timeline in my research plan.

Research Goals

Methodologies

Secondary Research

Market Research

While Time Travel is relatively new, it is likely to fit into the global travel and experience market that has been established for a long time. Therefore, it is important to get a big picture of the market - to get a sense of what we know and don't know yet, who the audience are, as well as what the recent trends or news are.

Selecting a place

Expectations on booking

Future Trends

Demographics

Competitive Research

It is equally important to research enterprises that pioneer in the travel and experience package markat, as their solutions to similar problems will help me gather insights about their strengths and weaknesses. These insights also help me identify any gaps in features that ZEIT might address. I analyzed 3 direct competitors, who are trying to solve the same problem with us, and 2 indirect competitors, who solve one part of the problem very well.

Primary Research

User Interview

Building on a general understanding of the market and the audience, it is time to dive deeper and build real connection with our user and gain direct insights on them by primary research.

Considering the resources and time limit here, I decided to use user interview. I listed 13 questions for interview (see the Interview Guide here), and I avoided asking leading questions or double-barreled questions. I tried to invite the participants to share their experiences and stories.

User Interview Summary

  • 5 Participants were interviewed about their past trips and online booking experience
  • Interviews were based on open-ended questions
  • 3 males, 2 females
  • Age: 24 - 32
  • Duration: 12 - 20 min

Research Synthesis

Empathy Map

To synthesize the qualitative data gathered from user interview, I created an empathy map to identify patterns across users, uncover insights, and generate needs. See a larger version of empathy map here.

Insights

  • Users determine their travel time availability prior to their selection of the travel destination.
  • User search forums and blogs for travel inspirations.
  • Users always try to find the cheapest deal.
  • Users are not in favor of packaged tours.
  • Users want to learn more about local knowledge, culture, or the topics they care about.
  • Users don't want their travel plans to be messed up by incidents.

Needs

  • Users need to know the proper travel duration for each destination.
  • User need to know if destinations satisfy their interests.
  • User need to find and compare affordable deals.
  • Users need to have flexible travel arrangements.
  • Users need to know whether a place has educational aspects.
  • Users needs to get the latest updates regarding their trip.

User Persona

Since I have gathered a bunch of knowledge of the audience, as well as their goals and needs, I use the user persona to represent key audience segments. It helps me focus on tackling the most important problems – to address the major needs of the most important user groups. It is both fictional and realistic.

Let’s meet Sofia, a 30-year-old Architect in New York. She is an art lover, and she yearns for a unique and unforgettable trip. She loves places with rich culture where she can try authentic food of the local. She prefers a relaxing and cost-effective trip.

Storyboard

To take a step further from Persona, I created a storyboard to tell a memorable and engaging story of how the product solves user's frustrations and impact user's life. This storyboard vividly presents a problem that the user is dealing with, and how ZEIT can be a solution to the problem.

02 Define

Project Goals

In Define phase, I take the data gathered from Empathize phase, generate knowledge out of data, and prioritize insights and needs that allow me to target specific problems. Listing project goals can help me form a clear overview of the product, pave ways for determining product features, and make the proper decisions.

I summarized user goals from my user persona and empathy map, collected business goals from the project brief, took technical goals into consideration, and visualized the project goals.

Card Sorting

In organizing the content of ZEIT's website, I conducted a n open, individual, remote card sorting to understand how users are classifying items. The summary from card sorting will shed lights on the Information Architecture and sitemap of ZEIT.

Some key findings include:

Based on these findings, I generated insights that are applicable to the website:

Sitemap

After setting up the project goals and organizing the content of ZEIT through card sorting, I want to continue building up the structure of the website using the sitemap. A sitemap helps me to visualize the relationship between the content and examine the hierarchy.

Below is an abbreviated sitemap, and a complete sitemap can be viewed here.

03 Ideate

Feature Roadmap

Feature Roadmap infuses the project goals into our product. It also helps me get a clear sense of the features for the product, as well as their priorities in terms of development. I created a comprehensive Feature Roadmap that includes Must-have (P1), Nice-to-Have (P2), Surprising and Delightful (P3), and Can-come-later (P4) features. These priorities are based on the business and user's needs.

Task Flow

To decide what I am designing, identifying the main flow of users when completing a task helps me to direct my focus on designing specific pages. By creating task flows that center on key functions of ZEIT, I was able to think through the necessary steps and examine the user experience in details. Below is the task flow for a user who wants to book a trip on ZEIT, and all 4 task flow can be viewed here.

User Flow

Building on the task flow, I mapped user flows whose scenarios correspond to the established tasks. This process helps me incorporate pages I need to design for users to successfully complete those tasks. Below is the task flow for a user who wants to book a trip on ZEIT, and a complete user flow can be viewed here.

UI Requirements

After identifying the key screens, I created a UI Requirements document to further escalate the knowledge gathered from sitemap and task flow to another level. It helps me create a to-do list for the wireframing process, in case it becomes overwhelming for design.

Wireframe

Sketches

With the UI Requirements, I started sketching different versions on desktop homepages. capture my ideas by pen and paper quickly. It enables me to examine my ideas before putting everything in the daunting process of digitizing.

Low-Fi and Responsive Wireframes

Once I decided the visual direction of the layout I want to go for, I started to produce a digitized, low-fi version of wireframes based on sketches. It allows me to apply product UI requirements, ensure elements are placed with the guidance of correct hierarchy, and avoid spending too much time on designing details.

Furthermore, to ensure users have a consistent experience across different devices, responsive wireframes are created for desktop, tablet, and mobile ends.

Branding

Before diving into logo and style tile design, I created a mood board on Pinterest to gather multiple inspirations around the specific attributes extracted from the project brief:

Logo Design

To further establish the brand identity, I generated logo concepts. I first started brainstorming adjectives around the brand attributes I established and sketched as many logo options as I could. I then digitized a few shortlisted options, and finalized my 6 top choices by examining their legibility at different scales.

Style Tile

I further developed the visual style of ZEIT through the style tile. It serves as a synthesizing document of the brand ideas and inspirations gathered, incorporating logo design, color palette, typography, and imagery that guides UI design later.

Responsive UI Design

I created responsive UIs by applying established styles. It further lets me to examine the overall aesthetic feelings and visual balance of the website.

UI Kit

UI Kit is a compilation of existing UI elements on the website that provides references for future design and collaboration for the design team. It is also a living document and will be updated whenever there is an iteration of the design. Below is a part of the ZEIT UI Kit, and the full version can be accessed here.

04 Prototype

Desktop Prototype

In the Prototype phase, I build scaled-down versions of the product for testing. It helps me uncover false assumptions, identify UX frictions, eliminate errors before investing too much in developing the product.

I used invisionApp to create the prototpye using the pages that are necessary for users to finish each task.

Tasks include:

View Prototype

05 Test

Usability Testing

Prepare for the Usability Testing

The mockup created in Prototype phase is brought to Test phase for users to interact with. In this process, I gather insights from usability testing, evaluate them, revise them, and retest them.

To get prepared for testing, I first wrote a usability testing plan to define what and why I want to test. It is important to set up test objectives, subject, methodology, tasks, and rubrics for measuring the result of the testing before conducting a test.

Conduct Usability Testing

I then conducted both in-person and remote usability testing with 5 participants, and created transcripts for each participant based on my observation of their interaction with the prototype. I jot down their mistakes, slips, and confusions they expressed in the process. This transcript is a perfect raw material for summarizing the patterns of user’s interaction with the prototype.

Affinity Map

The results from the usability testing could be summarized by creating an affinity map. Like the empathy map, it is effective in helping us find patterns and frustrations when users are interacting with the prototype, and identify areas of improvements based on priority levels.

I represent each participant using a unique color, and categorize the observation by success, patterns, and frustrations. I only listed patterns that are shared by a majority of participants. For each pattern from frustrations, I uncovered one insight, and generate one recommendation. I then ranked the recommendation based on the priority level, where I will fix problems that affect key functions for our website and customers’ quick recognition of the brand.

Patterns

  • 4/5 Participants thought filter on the side bar is inconvenient
  • 4/5 Participants didn't notice they can select filters on the side bar
  • 5/5 Participants were confused about the service of this website at the first sight
  • 4/5 Participants were confused with "Destinations" and "Get Inspired"
  • 3/5 Participants didn't try to click the cards unless they find the task is unfinished

Insights

  • Users want to view all filters at the same time instead of scrolling up and down
  • The side bar is visually unobvious
  • The information provided on the landing page is not enough
  • The word chosen do not fit into people's categorization of items
  • Cards are not visualling appealing for users to interact with them

Recommendations

  • Redesign filters and accordions that can expand (High Priority)
  • Change the color of the side bar and make it brighter (High Priority)
  • Add description of ZEIT's service on the landing page (High Priority)
  • Change the wording from "Getting Inspired" to "Explore" (Low Priority)
  • Add a hovering effect on cards (Low Priority)

Priority Revisions

As the time and resources we have is limited, I made revisions based on the priority level I set up for each recommendation in the affinity map.

The first-tier edits I made is on the filters. Users found the filters on the sidebar is inconvenient to use as they have to scroll up and down to view filters. I changed the filters to an accordion, and added a section at the top where users can see what filters they have applied.

The second tier edits I made is on the homepage. While customers were aware that the service is about travel booking, they didn’t realize it is about time travelbooking. They also found the wording in the navigation bar a bit confusing. Therefore, I edited the hero quote to include time travel directly, and added a line of description of the service. I also reworded the department’s name in the navigation bar.

Final Thoughts + Next Steps

Final Thoughts

This is my first UX design project where I applied design thinking. It was really difficult, but I had a lot of fun throughout the process. Apart from gaining precious experience from user interview that allowed me to collect direct user input, the most important skills I learned was to rationalize every design decision by solid research that minimizes gaps. I also found the usability testing very helpful that uncover usability issues neglected by me as the designer. Overall, I gained much understanding in the UX design process and e-commerce business.

Next Steps

Design Implementation & Handoff

Since the design has been tested and revised, it is ready to enter the development phase. In order to effectively communicate the design to developers, I redlined and organized my design deliverables using Zeplin for handoff, and prepared to assist with any follow-up questions.

Maintenance

Updates and revisions will continue to exist in the future, and I will address them based on the priority levels.

View Other Projects

Venmo
Adding New Features
Komegashi Too
Responsive Website | Branding
Bhuku
End-to-end Application | Branding