• 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.

  • 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