PROJECT: Responsive e-commerce website for a travel company

TARGET USER: Adventurous travelers seeking to experience a different culture and time

GOALS: Design a logo and an easy-to-use responsive website

MY ROLE: User research, interaction design, interface design

TOOLS USED: Pen/pencil and paper, Sketch, OptimalSort, Marvel App, InVision

1. EMPATHIZE

The first step in the design process was to build empathy for the user, the modern time-traveler, through research.

1.1. RESEARCH GOALS

For this project, I had four main research goals:

1. Discover the current tourism landscape (both time traveling and non-time traveling)
2. Discover the target audience for time travel
3. Discover the target audience's overall view of time travel, including interest level and concerns
4. Discover travel habits and considerations when planning, during, and after a trip

1.2 MARKET + INDUSTRY RESEARCH

Zeit looked to create a platform to book time-travel vacation packages or experiences. Since time-travel is an entirely new, innovative space, there were no direct competitors in the field. However, there were a variety of indirect competitors to examine to gain an understanding on the current trends, as well as the direction that travel is heading.

In addition, my market research informed my view of the target audience: those specifically interested in time-travel were likely history buffs, sci-fi fanatics, and science gurus, such as physicists. Those interested in travel in general were adventure seekers, solo travelers in search of self-fulfillment, or social media mavens interested in showing off.

1.3 COMPETITIVE ANALYSIS

Travel websites come in a variety of forms. I first evaluated the strengths and weaknesses of the most direct competition - the web sites that allow for booking "experiences," whether in the form of full vacation packages or individual activities: TravelZoo, Airbnb, STA Travel.

Next, I evaluated strengths and weaknesses of indirect competitors - those that addressed one or more aspects of Zeit's audience or business goal. For example, SpaceX is a space flight company with a science fanatic audience base. Kayak and momomondo both offer the ability to search for hotels, flights, cars, and packages, but not experiences.

Some key takeaways and questions:

• Flexibility appeared to be key, with sites allowing for a variety of booking options and ability to search by key logistical details, as well as by feeling or activity. However, do users actually use these flexible search options?
• Deals are everywhere! It appears that the lower the cost, the better - as long as it doesn't seem cheap. Do users agree?
• Inspiration pages, galleries, and destination guides are eye candy and may inspire users to visit more often or plan trips they weren't originally intending on. Do users visit these pages and galleries? If so, when, and do they impact trip choice?

1.4 USER RESEARCH

To better understand travelers, their pain points, and goals, I conducted six user interviews. Some interesting patterns began to emerge:

Planning for Travel

• When planning for travel, all participants planned an agenda to some degree, but noted a desire for wiggle room while traveling.
• No participants reported a single go-to site used (though Kayak was referenced often); instead, all "just google" the destination.

While Traveling

• Participants most often preferred local dining and "wandering" around cities.
• Inclement weather, feeling board, and feeling the pressure of not maximizing a short trip were all the largest frustrations during travel.

Generational Differences

• Participants between 29 and 32 years old all shared a distinct preference for having authentic and "un-touristy" travel experiences, while those between 37 and 60 years old favored hotels and were less concerned with appearing as tourists.

Thoughts About Time Travel

• Most participants were excited and eager to participate in time travel.
• The main questions and concerns included logistics, safety, racism, food/drink, wardrobe, and sanitation.

A couple of quotes from the interviews:

"If we think of a place we're interested in, it turns into a Google-fest of reading about the place. We look at small hiking websites, blogs..."

"I think the way we would prefer to travel is to stay in our Airbnb, go to coffee shops, wander around... lots of walking. I would want to try to balance having a local experience and stumbling on things that seem interesting."

1.5 EMPATHY MAP

After conducting the user interviews, I further distilled the responses into an empathy map in order to gain a deeper understanding and uncover pain points, gains, insights, and needs. The empathy map consisted of four quadrants: Thinking + Feeling, Hearing, Seeing, and Doing + Saying.

Determined to include every detail, I began by writing each utterance on a post-it note, with each color dedicated to a specific participant. I stuck the post-its to my wall in clusters of similar remarks.

However, I quickly learned that tiny handwriting spanning the entire length of a living room wall is a tough way to visualize trends and eke out insights. So, I turned to a digital version instead:

1.6 VARIABLE MAPPING

Next, I mapped interviewee responses relative to others along a spectrum of behavioral variables in order to reveal patterns and similar participant perspectives. This exercise confirmed the patterns that I'd found in my interview debrief and empathy mapping, but did not offer much additional insight.

1.7 PERSONA DEVELOPMENT

Using all of the insights and information uncovered through user research and empathy mapping, I derived a persona, Lizzie Harris. Lizzie represents the goals and behavior patterns that I recorded and serves as the target user for Zeit's responsive e-commerce site.

1.8 STORYBOARD

Finally, I created a storyboard that put Lizzie's experience and viewpoint in context in order to further foster empathy. The storyboard emphasizes Lizzie's feelings of boredom at work (despite being a user researcher - gasp!), fear of missing out, and ultimately, excitement and reinvigoration because of a trip booked/taken through Zeit. The storyboard was a good reminder of opportunities for designing a quality experience both before and after booking a trip, and on and off screen.

2. DEFINE

After a good dose of research and empathy building, I sought to define the problem and goals and begin to examine solutions.

2.1 PROJECT GOALS

I first revisited the project brief and all research in order to identify business and user goals, which were then balanced with technical considerations.

2.2 FEATURE MATRIX

I next developed a feature roadmap based on the competitive analysis, project brief, and knowledge of Lizzie's wants and needs. Features were prioritized as P1: Must Haves, P2: Nice to Haves, P3: Surprising and Delightful, and P4: Can Come Later; however, I had difficulty differentiating between P3 and P4 categories. I paid close attention to the shared project goals above, ensuring that they were met as "P1" features.

2.3 INFORMATION ARCHITECTURE

In order to better understand how people conceptualize different types of trips, as well as to explore how users might expect to see trips grouped on the Zeit website, I conducted an open card sort using OptimalSort. The card sort included 30 cards and was fully completed by 11 participants.

I found the cart sort results quite insightful, as only one participant stuck with a consistent organizational strategy throughout (location - sorting trips into Africa, Asia, Europe, Pangea, South America, and USA).

Most participants grouped the trips using a combination of factors, with the most common categories based on location, then time period, and then activity/emotion/theme. This let me know that Zeit's website should allow for browsing by location, time period/era, and activity type.

2.4 SITE MAP

Given my feature roadmap and card sort results, I generated a preliminary site map including both P1 and P2 features. An omnipresent navigation bar would allow access to About, Trips, Search, Deals, Cart, Account, and Inspiration.

2.5 HOME PAGE SKETCHES

After creating the site map, I sketched out a few quick options for the landing page.

3. IDEATE

3.1 USER FLOW

I mapped out the high-level user flow, including three different user perspectives and entry-points. For example, our persona, Lizzie, hears about Zeit through a friend and proceeds to navigate through the site and book a trip. Doris is intrigued but reticent to book, so she decides to save and share a trip instead. Finally, James has visited the Zeit website before and decides to return to the site to book a saved trip.

3.2 WIREFRAMES

Next, I began to wireframe the desktop version of key pages: landing page, category page, search results page, and trip details page. In a step toward the goal of creating a responsive website, I also wireframed tablet and mobile viewport sizes for each page.

Though I liked the idea of swipe-able carousels on tablet and mobile versions, I opted for simple lists/galleries given the potential cost of implementation, as well as the possibility that users may actually be viewing a minimized tablet-sized viewport using a desktop browser.

While creating my wireframes, I began to realize that certain pieces of my original site map and user flow weren't practical or feasible. Most notably, I decided to eliminate the need for a "cart," instead opting for a "book now" button on the trip details page. To avoid complexity and confusion, I also changed the activities from a la cart to all included; in a non-fictional universe, this would ultimately be a marketing decision that I would be happy to weigh in on.

To confirm that the flow was usable and intuitive, I prototyped the desktop wireframes using InVision and the mobile versions using Marvel app. In the prototype below, you can search, check out a trip, and sign up for the newsletter.

3.3 LOGO DEVELOPMENT AND BRAND IDENTITY

In order to create high fidelity mockups, I first needed to create Zeit's logo and craft their brand identity. I assembled a mood board of images, typography, and other brand inspiration and then set off crafting a wordmark and style tile. I focused on the adjectives modern, fresh, historical, trustworthy, and approachable.

3.4 UI KIT

Next, I created a UI kit, focusing on adding icons and interactive elements, such as hover and active states and search fields.

3.5 HI-FIDELITY MOCKUPS

With the UI kit in place, I then built upon my previous responsive wireframes to create high-fidelity mockups. To complete the mockups, I generated content and sourced photography myself for all of the trips shown on the site; though this made browsing the site more fun, it may have ultimately been needless work that took focus away from the goal of verifying usability.

4. TEST

4.1 INTERACTIVE PROTOTYPE

In preparation for usability testing, I put together a working prototype using InVision. I specifically hid the hotspot prompts in order to see where users would click without assistance.

4.2 USABILITY TESTING

I conducted usability testing to confirm my assumptions and design decisions. I enlisted four participants - one in person and three via Skype (with screen sharing) - to test my InVision prototype.

There were four primary objectives of usability testing:

1. Assess the usability and efficiency of the Zeit website, with a focus on the ability to select and book a trip
2. Observe users' approaches to the user interface
3. Identify pain points or confusion
4. Identify gaps or missing features

I first gave participants a scenario: "You're particularly interested in music experiences, and you love the Beatles. Your task is to find an appropriate trip and begin to book it." Once they had achieved the task, I encouraged them to return to the home page and share what they might do if they'd arrived on their own, unprompted.

All four participants were able to complete the task of finding and booking the Beatlemania, 1963 trip, as well as signing up for the newsletter. In general, all users seemed to navigate easily throughout the site and reported liking the clean style, browse-ability, and color palette.

There was no shortage of participant feedback and excitement throughout all testing, and I took copious notes on the users' delights, questions, and concerns.

4.3 AFFINITY MAPPING

I created an affinity map to further note and organize participants' feedback into successes, challenges, patterns, insights, and suggestions. This time I learned my lesson and started straight-away in Sketch.

5. REITERATE

Usability testing confirmed that the site hierarchy, organization, and user flows were sound and intuitive, as all participants were able to complete all tasks with ease. Most constructive feedback centered on subtle visual changes and site content/copy - particularly with regard to the nature and safety of time travel. Thus, feedback would need to be shared with Marketing before any further revisions are made.