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.
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.
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.
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.
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 & AFTERHere 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"
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.
