Zeit

RESPONSIVE WEBSITE DESIGN

Research

Market Research  | Competitive Analysis  | User Interviews

Market Research

I began my research by searching through secondary research online to identify demographics and statistics related to current travel trends. This helped me develop an understanding of the travel industry and identify potential users.

Competitive Analysis

By researching five competitors I gain insight about their strengths and weaknesses with their site and to identify any gaps in features that could be beneficial for Zeit to address.

User Interviews

After gaining substantial information about the travel industry, I needed to learn more about traveling from the user’s perspective. I conducted five user interviews where I gained information about why users travel, what they like or dislike about travel, and how users find and plan their upcoming trips.

Overview

• 5 participants interviewed over two days

• 4 were female and 1 was male

• Ages ranged from 45-60

Empathy Map

To synthesize my findings from the user interviews, I put together an empathy map. I organized sticky notes of my observations to identify patterns and insights. These insights helped me identify my user’s needs and pull my research findings into building the persona.

Define

Persona

Persona

After synthesizing my research, I created the persona Maggie who represents the user based both the secondary and primary research I conducted. I pulled the implicit needs directly from my empathy map and then continued to identify Maggie’s goals, motivations, & frustrations based on the user research.

Ideate

Card Sort | Sitemap | Task + User Flows | UI Requirements

Card Sort

I conducted an open card sort with three participants to gather insights on how users would organize and look for information on the site. These observations helped me build the information architecture for the site and create a site map.

Overview

• Open card sort with 50 items

• 3 people - 2 were male, 1 was female

• Ages ranged from 25-50

Observations

• Time of the event, era or location

• Location such as country or continent

• Well-known construction & creations

Sitemap

To build out the site map I looked back at my observations from the card sort. I found that users would group the information based on region, time, and well known events. Then I looked back to the user needs and goals identified in the persona as well as the market research conducted and user/business goals identified to make decisions for the remaining pages.

Task Flow & User Flow

To identify key screens and understand how the user would flow through the site, I created a task flow and user flow on how the user could book a trip their whole family could enjoy. By visualizing the key pages we can learn more about how the user could interact with the site.

UI Requirements

After identifying the key screens needed, I created a UI requirements document to list out the pages and necessary elements for a user to complete their task of booking a trip their whole family can enjoy.

Design

Sketches | Mid-Fidelity Wireframes | Brand Identity

Low-Fidelity Sketches

With the UI requirements listed, I began sketching out variations of these key pages to ideate potential navigation, search and page layouts. Sketching first allows me to think more freely and creatively.

MId-Fidelity Wireframes

Once I decided on a visual layout direction, I created mid-fidelity wireframes to determine visual hierarchy, placement of elements, and site flow before adding any styling, color, or graphics. I used a 12 column grid to align the elements on each page and to help me create a responsive layout.

Brand Identity

Before creating high-fidelity wireframes, I needed to develop Zeit’s brand and UI elements. I created a mood board for inspiration on typography, color, logo design, & overall visual design while addressing the sites attributes: innovative, inviting, modern, reliable, and inspirational. Then I sketched and digitized a logo, selected colors, fonts, and imagery to represent the brand.

Prototype

High-Fidelity Wireframes & Prototype

High-Fidelity Wireframes & Prototype

Using the branding style guide, I created high-fidelity mockups in Sketch. I then created a clickable prototype in InVision to use for user testing.

Test & Refine

Usability Testing | Affinity Map  | Revisions |  UI Kit

Usability Testing

Before conducting the think out loud usability testing, I put together a usability test plan to define what I want to test and why. After testing, I pulled together my notes and transcribed the feedback to prepare for synthesizing the outcomes of the test.

Affinity Map

To synthesize my user testing results, I created an affinity map and organized my observations into different categories; successes, pain points and comments. The affinity map helps me identify patterns and insights that will uncover recommendations for revisions to the design.

UI Kit

While creating the high-fidelity mocks I kept an updated document of all the UI elements across the site.