thumbnail image

Lana Jones

  • HOME
  • HOME
    • Homeaway Redesign

      Redesigning the HomeAway Website Navigation

    • Overview

      Context

      I was tasked with redesigning the navigation for a local e-commerce site, Homeaway. I would be focusing on the e-commerce flow, which for Homeaway, meant renting a vacation home. The target user persona was a 41-year-old start up CEO.

      Expectations

      My goal was to create a meaningful redesign for the navigation of the website. It was up to me to determine what the pain points of the website navigation were and what kind of changes would be most impactful to the user, taking into consideration my short time frame of just six days.

    • Client

      Homeaway

      Role

      Project Management

      User Research

      Sketching

      Wireframing

      Prototyping

      User Testing

      Presenting

      Duration

      6 days

      Tools

      Sketch, InVision, Zoom, Google Suite

    • The CURRENT SOLUTION

    • STAKEHOLDER BRIEF

      Homeaway

      World's Leading Marketplace for Online Vacation Rentals

      Homeaway is a local Austin company founded in 2005. Founder Charles Shaples and his family rented a variety of ski and beach vacation homes, enjoying the flexibility to invite others on vacation. However, he found that booking a vacation rental online was not as easy as reserving a hotel. Out of this frustration, he realized the opportunity to transform the vacation rental industry.

    • The Game Plan

      1

      Research

      • Initial Research
      • Heuristic Evaluation
      • Competitive Analysis
      • User Interviews
      2

      Ideation

      • Drawing Insights
      • Identifying Opportunities
      • User Journeys
      3

      Design

      • Sketches
      • Hand-drawn Wireframes
      • Paper Prototype
      • Low-Fidelity Wireframes in Sketch
      • High-Fidelity Wireframes in Sketch
      • Clickable Prototype made with InVision
      • User testing
      • Iterating
      4

      Deliver

      • Finalized Prototype
      • Presentation in front of Stakeholders
    •  

       

       

       

       

    • DESIGN

      Competitive Analysis

      I analyzed Homeaway in relation to some of its top competitors, Expedia, AirBnB, and Hotels.com, focusing on their online e-commerce flow. I also compared it to competitors in the area of user experience, such as Gmail. I found that Homeaway's usability score faired well, and it could stand on it's own against competitors. It would be a challenge to find what I could improve about the experience.

      Heuristic Evaluation

      In addition to a competitive analysis, I conducted a heuristic evaluation of the website to identify gaps in user experience and what could be improved. I noticed a potential pain point. Recent Activity is buried under Trip Boards, and there is no visual representation of this in the navigation.

      Information Architecture

      I found it important to look at the website navigation as a whole to look for what could be improved. I created this site architecture of the primary, secondary, and tertiary navigation to help me understand and synthesize the customer journey map I would create.

      Customer Journey Map

      Based on the research I collected, I created a customer journey map of the user's experience before, during, and after using the site. This helped me develop scenarios I would test during user testing.

      Target Persona

      For my user testing, I needed to ask certain pre-task questions to determine if the interviewee fell into my target persona. For this project, my persona was a 41-year-old startup CEO who struggles with work-life balance. My goal was to design the app around the profile of this user. The persona could be broadly interpreted. For instance, a 35 year old who works 60-80 hours a week and struggles with work-life balance could fit the startup CEO persona.

      User Interviews & SUS Testing

      I interviewed 5 users who loosely fell into my 41-year-old startup CEO persona. I had them test the website live and give me their feedback as far as usability scoring.

    • “It’s not easy to use. I would have to get used to it, playing around with it...the wording on how to navigate, like ‘Saved to Holidays’ is confusing.” - Participant Interview

       

    • Ideation

      Based on my research, I decided to design an improved navigation according to the following:

      1

      Saved Searches

      Created a new Saved Search results page based on an example from Expedia. Allows user to revisit past searches easily without having to comb through the website for embedded links or have to remember what they entered last time and restart the search from scratch, which happened in user tests.

      2

      Improved Navigation

      Add “Saved Search” to the top navigation, so user’s can easily see and navigate to their Saved Searches. And keep it at the top of the navigation on every page so the navigation is consistent and user-friendly.

      3

      Interactive Tutorials

      Show helpful hints throughout the e-commerce process to help the user navigate and not get lost, with a friendly conversational message. This feature received good reviews on all user tests, unanimously. Even the most critical reviewers said, “This is cool.”
       

      4

      Improved Breadcrumbs

      Disorienting breadcrumbs beckoned a user to return “Back to Trip Boards” when the previous page they were on was actually their Search Results. Updated this breadcrumb to be more reflective of the user’s browsing history, so they can navigate in a more intuitive way.

      5

      Improved Notifications

      Change “Saved to [Trip Board Name]” to “Saved to Trip Board [Trip Board Name].” Without the “Trip Board” title as an indicator, users were confused what this notification meant. This makes the meaning clear and direct.

      6

      Improved Copy

      Change the language “Add a Trip Board” to “Choose a Trip Board.” Users were getting “tripped up” thinking they could click the text “Add a Trip Board” to literally add a trip board. They didn’t realize this was simply header text and the selection was actually listed underneath. This eliminates confusion and makes the user's experience more seamless.

    • Problem statement & Hypothesis

      Based on our user tests, heuristic evaluations, competitive analysis, and SUS testing, I determined the problem statement my redesign needed to address. My user’s strong opinions on how they wanted to be able to maintain control over how they navigate their search results also inspired my hypothesis.

      Problem statement

      Startup CEOs need a way to easily navigate their search results and their favorites while they search for the perfect vacation home rental. They need many additional indicators to tell them where they are in the product search process, because they tend to struggle with focus and desire to retain control of their discovery process.

      Hypothesis

      We believe that adding navigational elements allowing the user to easily access saved search results, and navigate back to the previous page, we will achieve a greater sense of control for the user and an easier, more intuitive, and more satisfying user experience. We will know this to be true when we see usability ratings increase during SUS testing after the redesign.

    • SUS Testing

      Before Redesign

      The original website scored not too badly, 73%, but could use improvement.

      After Redesign

      After my redesign, the scores of all participants went up, even the most critical (+5%), to a total of 81%.

    • User Flow

      I took my notes on the user's journey and the improved navigation I wanted to create, and defined it into a simplified user flow to help guide my process as I began to sketch out wireframes and prototypes.

    • Storyboard

      Using my target persona, I got inspired by his story of being a busy 41-year-old startup CEO and envisioned how this improved e-commerce flow would work for him and impact his life.

    • Hand-Drawn Wireframes

      Breadcrumbs

      I designed a few wireframes outlining the customized breadcrumbs that will show the page you were on before, so that you don't get lost while navigating the site.

      Saved Searches

      I designed a wireframe that shows Saved Searches in the top navigation as well as the updated breadcrumb on the Trip Boards page. This helped me visualize what the changes would look like.

    • Wireframes in Sketch

      Low-Fidelity Wireframes

      In Sketch, I created low-fidelity wireframes that included the navigational changes I wanted to make. I used this to further test and validate. I found that the interactive tutorials successfully helped users to keep track of where they were while using the site.

       

      View Low-Fidelity Prototype

      High-Fidelity Wireframes

      For the final prototype, I created high-fidelity wireframes that also included the navigational changes. On my second redesign, after some user feedback I got from the first redesign, I changed “Saved to [Trip Board Name]” to “Saved to Trip Board [Trip Board Name].” Without the “Trip Board” title as an indicator, users were confused what this notification meant. I found that now my changes were so seamless, users didn't realize they weren't already coded into the site.

    • BEFORE & AFTER

      Here are the changes I made before and after the redesign.

      Improved Navigation

      Add “Saved Search” to the top navigation, so user’s can easily see and navigate to their Saved Searches. And keep it at the top of the navigation on every page so the navigation is consistent and user-friendly.

      BEFORE

      AFTER

      Saved Search Tutorial

      Added a tutorial to show where Saved Searches were stored, with a friendly conversational message.

      Improved Breadcrumbs

      Disorienting breadcrumbs beckoned a user to return “Back to Trip Boards” when the previous page they were on was actually their Search Results. Updated this breadcrumb to be more reflective of the user’s browsing history, so they can navigate in a more intuitive way.

      BEFORE

      AFTER

      Saved Searches

      Created a new Saved Search results page based on an example from Expedia. Allows user to revisit past searches easily without having to comb through the website for embedded links or have to remember what they entered last time and restart the search from scratch, which happened in user tests.

      Trip Boards Tutorial

      Added a tutorial to show where Trip Boards were stored, again with a friendly conversational message. This feature received good reviews on all user tests, unanimously. Even the most critical reviewers said, “This is cool.”

      Improved Notifications

      On my second redesign, after some user feedback I got from the first redesign, I changed “Saved to [Trip Board Name]” to “Saved to Trip Board [Trip Board Name].” Without the “Trip Board” title as an indicator, users were confused what this notification meant. This makes the meaning clear and direct.

      BEFORE

      AFTER

      Improved Copy

      While doing user testing for my first redesign, I received some feedback that users didn’t realize "Add to a Trip Board" was simply header text and they couldn't click it. They were getting confused thinking they could click the text “Add a Trip Board” to literally add a trip board. So for my second redesign, I changed the language “Add a Trip Board” to “Choose a Trip Board.” This change eliminates confusion and makes the user's experience more seamless.

      BEFORE

      Header reads: "Add to a Trip Board"

      AFTER

      Header reads: "Choose a Trip Board"

    • InVision Prototype

      Prototype

      My final design addressed the user's needs to be able to control their experience and locate their saved searches, without getting lost in the process, resulting in an improved overall experience navigating the site.

      VIEW PROTOTYPE
    • Video Walkthrough

    • Interested in working together?

      Let's talk!

      Submit
    Cookie Use
    We use cookies to ensure a smooth browsing experience. By continuing we assume you accept the use of cookies.
    Learn More