The Process

Research Assumptions

Research Methods

Market Research

Competitor Analysis

To continue my research, I identified direct and indirect competitors in the field and looked at their approach to solving a similar problem, taking into account their relative strengths and weaknesses. In what ways have they brought value to their customers? Are there are any gaps in the market? I learned that even though many direct competitors provided the ability to create personal itineraries, their websites were fraught with unclear navigation and broken links. Many direct competitors offered built-in maps to explore locations, a fact in alignment with my market research. However, unlike Google Maps, those maps did not offer recommendations near a particular point of interest. While indirect competitors like Tripadvisor and Expedia were resourceful with reviews and photographs posted by travelers, there were very few suggestions on what to do or sightsee.

User Interviews

Survey

Empathy Map

After gathering insights from my user interviews and survey, I created an empathy map to organize my research and learn about users’ behaviors and attitudes — what are they seeing, hearing, thinking and feeling? In both my user interviews and survey, I discovered that the primary factors people considered important with travel planning were creating a budget and viewing destination sites on a map relative to one another. My assumptions about people wanting to read reviews and look through quality images were in line with my findings. However, contrary to my assumption about people knowing what they want, I learned that people do in fact love recommendations on what to do and see. Below I summarized user frustrations and needs in the form of pains and gains.

User Persona

After using an empathy map to consolidate my research findings, I created a user persona, Alicia, to further explore people’s goals and frustrations with travel planning. This helped me focus on the major needs and expectations of my users and how they would most likely use the feature. Here I validated two assumptions — people use good images and reviews to help them decide on where to go. However, I learned from my research that costs, maps, and recommendations were also important factors to consider. I wanted to create a good user experience for my target user group, but I had to identify where there was a need that current market players did not address or failed to meet. With the user persona I identified Alicia’s 3 main needs and frustrations to help me think about the problem I was trying to solve for my users.

Customer Journey Map

Having uncovered Alicia’s needs, wants, goals, and pain points with travel planning, I created a Customer Journey Map to tell the story of her encounter with Condé Nast Traveler across all touch points. By visually mapping out Alicia’s journey, I was able to gain insights into common customer pain points, and in turn better optimize and personalize the customer experience. I resonated with her thoughts and feelings and looked for opportunities where Condé Nast Traveler would succeed in meeting her needs. Many of these opportunities, like quality photos and reviews, were derived from my secondary research. However, I noticed that based on my understanding of users’ goals and motivations, there were service offerings missing in the current market even though the need was obviously there, like recommendations based on interest and integrated maps showing activities relative to one another. Below was a problem to opportunity conversion I discovered:

Problem Statement & HMW Statement

After learning about who my users were and their wants, needs, and pain points, I defined the problem that I would try to solve for them. This was where I turned empathy into an actionable problem statement with clear-cut objectives to work towards. I used the 4 Ws method: “Our (who) has the problem that (what) when (where). Our solution should deliver (why).” Through my research synthesis, I identified problem areas that pose challenges to the people I would be designing for. Therefore I created a How Might We statement that would turn those challenges into opportunities for design.

Problem Statement: “Alicia has the problem that she doesn’t know what to do or sightsee when she travels to a different place. Our solution should deliver a way for her to search destination sites and create an itinerary so that she would feel comfortable traveling with a solid plan.”

HMW Statement: “How might we design the travel planning experience for Alicia so that she can easily create a solid itinerary and keep track of what activities to do there.”

Project Goals

Product Roadmap

Having defined my project goals, I moved on to brainstorm features and functionality in the travel itinerary that would support overall business objectives. I looked through my research findings again to remind myself who my users were and what they needed. While doing so I discovered many features that contribute to a positive user experience, which was an overlapping goal for both business and users. For instance, in order to address the problem statement, which was to create an itinerary that factored in activity and date, Alicia needed to learn about the place and add it to a calendar. Therefore About the Place and Calendar were top priorities that needed to be integrated into the design. Priority 2 through 4 features were “nice to have”, and could come later depending on available resources, development capability, and return on investment.

Sitemap

Once I have established the goals and features list, I created a visual sitemap. I used this as a guide for the website’s organization and as a targeted outline for creating content and connection between Condé Nast Traveler’s existing web pages. Given this was a feature add-on project, I kept in mind the roles the current pages played in the overall site structure.

Through this sitemap I could see how the navigation should be structured, where content would sit, and what I needed to design. Before my research I assumed people always knew what they wanted when they created travel itineraries. Through my research, I learned that people love recommendations and would look for ideas by browsing different categories (if the option was available). Therefore I needed to make sure that users could find a place not just by name but also by category. Given Condé Nast Traveler’s website tagged hotels and activities by high level categories (Stay, Eat & Drink, To Do), I added one more layer in the data hierarchy so that users could search by theme and interest within a particular category (reminder: not being able to do so was a user pain point on my empathy map).

Task Flow

After mapping out the overall information architecture, I created a task flow focused on the pathway Alicia, my user persona, would take to create a travel itinerary on Condé Nast Traveler’s website. What steps would she take to book a hotel, a restaurant, and an activity? What features needed to be in place for her to do so? While asking these questions and creating the task flow, I came across an interesting observation — each task followed the one before it. The linear nature of these tasks emulated a realistic itinerary building process that I could use to test the navigation and interface with (hint: usability testing).

Medium Fidelity Wireframes

After finalizing site structure and content flow, I started to define visual hierarchy with medium fidelity wireframes. By adding in real context and descriptions, I could visualize space allocation, content prioritization, and intended behaviors that I would not have done so with low fidelity wireframes. During the Empathize phase I learned that Alicia was frustrated with not being able to see where destination sites were relative to one another. I pondered about how to make the map view more effective, and ultimately decided on adding a search function relative to a point of interest. This way Alicia would be able to search for an activity say near a hotel she was staying at (hint: similar to Google Maps’ Near Me function — an insight from my market research), and the categorized results would show name, price range, neighborhood, and relative distance. On top of the Google-inspired calendar view, I also created a Kanban-style summary view with further details about a particular activity such as the location, phone number, and website. I made a mental note to test later on which method users preferred more in consolidating their travel plans.

Along the way, I asked myself if the solution ideated solved the problem identified in the Define phase, which was for Alicia to search destination sites and create an itinerary so that she would feel comfortable traveling with a solid plan. My answer to them was yes as my medium fidelity wireframes focused on meeting users’ needs, specifically:

• Itinerary with location details, hours spent, and cost

• Various recommendation with pictures of destination sites

• Map view with search function relative to a point of interest and results can be filtered by proximity and price range

• Filter and sort by category (eg. Stay) and sub-category (eg. boutique hotels)

• Editable calendar view and summary view to keep track of all activities on the itinerary

Below were a few of the itinerary creating blueprints — Dates page, Map page, Results page, and Itinerary Summary page.

Brand Style Tile

Condé Nast Traveler’s website had a strong brand identity, which I defined as clean, premium, modern, reliable, and visual-focused. To ensure consistent branding that aligned with the website’s current clientele and customer experience, I used the same color palette and font styles. While studying Material Design, I learned that it was important to offer clear affordance that distinguishes an element from other states, so for the buttons I added in hover state and disabled state. I put together all the visual elements into a brand style tile that not only communicated the website’s visual language but also provided rules of thumb and context notes to achieve consistency across all pages and platforms.

UI Kit

After defining the visual language, I moved on to create an UI Kit for the website to house all design components of the user interface. This served as a branding guide that would convey meaning and provide functionality to stakeholders, and also house modular UI elements for the future as features are changed and updated. When I first created activity cards, I did not offer clear affordance on the hover state, which I realized was missing when I looked at other travel websites for best practices. Therefore I applied overlay to distinguish a hovered activity card from other states and its surrounding layout. Initially I used a neutral color for selections in the dropdown menu, but later decided to employ brand color to distinguish it from the default state and add visual interest, making it recognizable and memorable.

High Fidelity Wireframes

After defining the information architecture and UI components, I filled in the wireframes with color, photos, and branding to visually represent the end product. I would then build a prototype to validate complex interactions during usability testing to determine if the design aligned with users’ mental models and solved the problem identified in the Define phase. While building the high fidelity wireframes, I referred back to my problem statement and HMW statement for insights. I quickly realized that my design overlooked a main user frustration — coming across websites with too much information without clear indication on where to start. The process of actively guiding users to find purpose and value in the itinerary feature was missing in my medium fidelity wireframes. Therefore I designed an onboarding page with explanation on how to create an itinerary and where users can start (essentially from any category — Stay, Eat & Drink, or To Do). Once users start the process, they can search and refine results in the current category, or toggle onto other categories in the horizontal list.

Prototype

After designing my wireframes, now it was time to build a higher fidelity prototype to test on real users! With a prototype I was able to have people experience content and interactions with the interface and validate my assumptions to ensure I have created the right solution to the right problem.

Throughout research, there were various findings that supported or negated my assumptions. For instance, I learned in my user interviews and survey that people love recommendations on what to do or see. This contradicted my assumption that people always know what they want when they create itineraries. Even though my assumption failed, I still gained insights from research. I learned that the itinerary creating process can get time-consuming; users would have to toggle between searching for ideas on travel websites/blogs and using Google Maps to see where they are relative to one another. Therefore I integrated the search function inside the map feature so users can easily look up an activity or category and visually decipher what to do around there. Along with those tried and true assumptions, my discoveries about users’ needs, goals, motivations, and frustrations were the driving force behind my design ideas.

Below is a walkthrough video of the prototype.

Usability Testing

During the task flow process I built linear tasks that emulated a realistic itinerary creating experience. I would use those tasks to test the usability of the prototype and validate my assumptions to ensure I have created the right solution to the right problem.

Test Findings

By having my participants use the prototype to create an itinerary, I gained valuable insights regarding the feature’s usability. I learned that 100% of my participants found the calendar view helpful while only a handful thought the same about the summary view; 70% found the map view with refine capability helpful; and 60% liked the suggestions with pictures in card view. I was able to quantifiably validate my assumptions that people love personalization and are drawn to good images. However, that does not mean my design was flawless. For instance, I learned that affordance was missing on the map. Many questioned what the map labels were. I received feedback like “Do I click on it? What does the symbol mean?” I took these major patterns, pain points, and frustrations into consideration and made recommendations on how the usability and interface can be improved to better meet users’ needs.