Client: Zeit

Timeline: 4 Weeks

Role: UX Researcher, UX Designer, Interaction Designer, UI Designer

Tools: Adobe Illustrator, Adobe Indesign, Adobe XD, Invision, Zeplin

Deliverables: Responsive Website Design, Desktop Prototype, Branding

1:1 User Interviews

With a foundation of secondary research, I moved on to 1:1 user interview to build a better understanding our of users. After developing a series of question to establish assumptions and gather new data, I spent some time one on one time with potential clients to help to understand how different people travel. What their frustrations, wants and goals are.

Total Participants Number: 5
Age: 26 - 55
Gender: 3 female, 2 male
Education: Bachelor +

5 participants of various ages and careers were interviewed to find out more about their booking and travel habits. Ages spanned between 26 - 55 and there were 2 males and 3 females. The 5 individuals all had bachelor degrees or higher and enjoy traveling . The participants had a range of disposable income and either had no kids or kids that were old enough to travel without.

Insight:

• Users are very focused on getting a good deal

• Users want different types of activities

• Users do most of their research online

Need:

• Find best deal for their money

• Be kept entertained by a variety of activities

• Have all the information they need well organized online

Persona

A tool used to understand who the users are, what their needs, frustrations, motivations and goals are. Using the information gathered from the empathy map we built a persona. I took Joan’s needs, goals, fears and motivation directly from the the findings from the user interviews to reflect the average user.

Storyboard

Using the persona that I had created based on user interviews, I narrowed down on her biggest frustration to narrate how this affects her and how Zeit can help solve for it. This is a great tool to build empathy for the users and understand their frustrations better.

Sitemap

Using the knowledge gained from the card sorting on how our users sort information, I were able to lay out a sitemap of our website to start understanding the structure of the website.

Task Flow

Next step in this phase was to understand what path Zeit’s users will take to accomplish their goals on the website. For this I developed a Task flow, which helped me understand what actions and pages users will have to navigation in order to accomplish two main tasks on the webiste. This helps identify any problem areas, where the flow is not smooth.

User Flow

One of my favorite part of the whole process is the user flow. This is a mapped flow of the steps and decisions points the persona has to make to accomplish different tasks. Using the task flow, I narrowed down on the journey and how each decision that users make along the way will affect their journey. This is a great tool to see how many steps an user has to accomplish in order to reach the end of each task and see if we help them by making this process as smooth as possible.

Sketches

I started the design process with some quick sketches, to put down a variety of ideas. These sketches reflect different ideas on how to solve for Zeit’s users needs and how best to address their goals. One of my persona’s main goal was to get find best deal for her money, so I made the specials prominent in sketch #3, which was the direction I took the wirefreames. The rest of the elements on the sketches are based on the research I conducted and include common design patterns.

Mid-Fidelity Responsive Wireframes

Using the sketches I had developed I moved on to Mid-fidelity responsive wireframes of both the homepage and an interior page, including desktop, tablet and mobile. I started with the desktop then adapted each element to both tablet and mobile size. This helped me show how each element will on the page will react when the screen size becomes smaller on each devices.

Mid-Fidelity Task Flow Desktop Wireframes

From there I continued to built out desktop mid-fidelity wireframes that will be needed to conduct user testing of the entire task flow process for picking a destination and checking out. I focused on creating pages that showcased the most important information prominently, using visual hierarchy to draw the user’s eyes to the action needed to reach the next step in their process.

Logo

Of course no brand is a brand without a logo. By understanding what the brand stood for I was able to sketch out numerous logos and narrow down a few and create them in vector. I presented these vector logos to a group of target audience and was able to narrow it down to one.

The adjectives for this brand are : Modern - Historical - Adventurous - Inspiring - Fresh - Classical - Reliable - Inviting - Dynamic

Branding

Once I had the logo, I continued with branding elements based on the over feel of the brand. I built up the brand by establishing the color palette, typography and the treatment of images. This helped create a coherent brand that reflect the brand’s adjectives and showcased how elements work together.

High-Fidelity Wireframes

Using the branding that I had established, I added a UI skin to my wireframes, making sure to keep consistent with my UI kit. One I had achieved a level of fidelity that could create an illusion of a live site, I developed a working prototype, using InVision. This prototype had all the required elements and pages for users to be able to complete the most important tasks for this website, select a destination and go through the full booking process.

Usability Testing

Now armed with a working prototype of the desktop website, it was time to test it and improve it. A key step to understanding how users are interacting with the Zeit website, I conducted usability testing. This testing was used to help identify any problem areas or roadblocks in the user flow.

Total Participants Number: 6
Age: 25 - 55
Gender: 2 female, 4 male
Completion Rate: 100%
Error-Free Rate: 60%

Test Objectives

• Study the overall flow and navigation of users through the site

• Test how long it takes for users to achieve a specific task

• Identify any issues or areas of confusion that the user seem to encounter

Task 1

• Find out more information about trips to North America

Task 2

• Find the trip “Vikings Discover North America” & complete the checkout process

Affinity Map

Using all the data collected in the usability testing from watching and listening to the participants I constructed an Affinity map. To do this, I organize each piece of the data in such a way that common patterns could be grouped to reach insights. From these insights of the problem areas I was able to brainstorm recommendation fixes that would help address these areas of friction in the flow.

Insight:

1. The “What is your travel style?” drop down menu is a problem area.

2. The half working prototype of the calendar on the Trip Information page is confusing people

3. The Trip information page does not provide enough information about what to do next. Users were confused about where to go from there.

Recommendations :

1. Make the “What is your travel Style?” default to any style after destination is picked. So users can automatically click on search trips or dig deeper into travel style if they wish to

2. Get rid of any functionality of the calendar in the prototype.

3. Rework the current elements on the page to make sure that the next button is visible from the first glance.

Prototype Revisions

Using the insights that I had discovered from the affinity map, I addressed the problem areas by redesigning some elements and updating a few pages. Updated by Zeit desktop prototype to reflect usability testing findings to create a better working product to achieve the best user flow

UI Kit

Every step of the process was accompanied by an updated UI kit. This polished list of elements used on Zeit’s website is an important step to keep consistency across all branding.