10th Mountain
Hut Association
Responsive
Website Redesign

Subtle changes to the booking and
decision-making process to bring
huts.org into the modern age.

Project Background

The website and booking system for huts.org are in dire need of a refresh. While the mobile version of the site is “Responsive” it is confusing to read, navigate, and book a stay, especially if a user has been on the 10th Mountain Division Huts website before.

Project Details

Project Timeline: 2.5 weeks

Role: Research, IA restructuring, UI Design, User Testing

Outcome: Created a responsive booking experience for huts.org for both desktop and mobile that is up to date, easy to navigate, and more inclusive of all necessary information hut users would need to know in order to complete a hut booking.

10th Mountain Hut Division Background
Case Study: 10th Mountain Hut Association Responsive Website

The 10th Mountain Division in training at Camp Hale in Colorado

The 10th Mountain Hut Division is a series of 34 backcountry huts in the Colorado Rocky Mountains that are connected by 350 miles of suggested routes. They provide a unique opportunity for backcountry skiing, mountain biking, or hiking while staying in secure, comfortable shelters. Many people gather groups of friends and family to share the experience together. The 10th Mountain Division Hut Association is a nonprofit that manages the hut system. The name honors the men of 10th Mountain Division of the U.S. Army, who trained during World War II at Camp Hale, near Ski Cooper.

Research
Case Study: 10th Mountain Hut Association Responsive Website

Competitive Analysis

  • All competitors have an up to date and responsive website

  • Booking systems range from Google Sheets to responsive and modern booking pages

  • The indirect competitors are larger but less specific to 10th Mountain users. The UI of these websites is a good model.

Secondary Research

  • Huts have been a mainstay for adventurous travelers in Europe far longer than the US

  • The largest concentration of huts is in the western United States

  • New England has the most huts in the US and provides unique amenities services other hut systems cannot

Customer Types

  • All customers types have adventure at the heart of their trip-making decisions

  • All customer types prioritize safety and preparedness

  • "Escape" is the key word for all of these customer types.

Case Study: 10th Mountain Hut Association Responsive Website

Walter's Hut in Winter

Usability Testing on the Current huts.org Website

Purpose: At the discovery phase of my project, I conducted usability testing on the current huts.org website in order to get a better understanding of how people research and book a hut.

Tasks: Users were prompted with a series of tasks to understand how they would use both the huts.org website or any external website to conduct research and make a booking decision

Follow Up Questions: Follow up questions focused on other booking platforms and their experiences both positive and negative, including features they liked using

75% of
users
Needed to research externally before committing to a hut
100% of
users
Of users used the map to make a booking decision
50% of
users
Preferred a monthly over weekly view of the calendar when booking
50% of
users
Want a more visual experience to digest information
Case Study: 10th Mountain Hut Association Responsive Website

Empathy Map

I divided user feelings and actions from my initial Usability testing on the current huts.org website into different categories to better understand what design challenges I needed to prioritize moving forward.

  • Users like to look at resources first before booking a specific hut such as routes, avalanche reports, weather, blogs, or alternative websites for information

  • Some users find planning stressful and rely on their companions to do that

  • Users prefer a more visual experience over text-heavy experiences

  • Users want to know amenities ahead of time to plan what to pack better

  • Users don't like how much they have to click just to figure out hut availability

Case Study: 10th Mountain Hut Association Responsive Website

Key Persona: Edwin Taylor

Edwin is the quintessential mountaineer who is always looking for the next big adventure.

  • Edwin was developed as a byproduct of pain points and needs of the users I conducted usability tests on with the current huts.org website.

  • Edwin is looking to find the right information in the right place so he doesn't have to externally research to find information about his trip.

  • Edwin also wants a more intuitive booking process that he can use multiple places across the huts.org platform.

Information Architecture
Case Study: 10th Mountain Hut Association Responsive Website

Site Map

The first thing anyone will notice after spending any time on the 10th Mountain Huts website is that there is actually a TON of information. However because of the way the website is currently organized, in completing the most common task of booking a hut, a user may never actually realize this information is on the website.

This sitemap is a simplification and reorganization of the current huts.org website. Because there is a wealth of information on the current website, I did not want to take away from that. But my aim was to map the website so the information people look for most could be found more easily and at the moment the user needed it most.

Case Study: 10th Mountain Hut Association Responsive Website

Booking Task Flow

Booking a hut is the most frequent action on the huts website and what required the greatest overhaul.

The biggest changes to the booking process now include:

  • An online reservation system that allows users to research huts AND see availability from the booking platform or on a hut page

  • The website now also allows users to register an account so they can expedite the checkout process, look up past trips, and find information for upcoming trips

  • Centralized and image-heavy display of critical information on the hut page so users never have to leave the website or go to another part of the website. New elements include:

    • Interactive trail maps

    • Live avalanche reports from CAIC

    • Live updated weather reports specific to each hut

    • User reported trail conditions

    • Nearby recommended activities

Wireframes
Case Study: 10th Mountain Hut Association Responsive Website

Top row: Desktop, Bottom Row: Mobile

Sketches

I usually start the design process with low fidelity sketches as a quick way to ideate designs for the website.

Key Design Elements:

  • I used design patterns from direct and indirect competitors to create familiarity for my users.

  • I included the common information that users were researching externally for, such as maps, trail reports, and avalanche/weather information.

  • 10th Mountain is a very historical organization so I continued to include these elements on the new design.

  • Pages I focused initially on included:

    • Homepage

    • An informative hut page

    • Search

Hi-Fi Wireframes

I next took my sketches and created high-fidelity wireframes ready for prototype development. Below are design changes from the current huts.org page to their respective redesigned pages.

Visual comparison of current and updated huts.org pages for desktop and mobile

Early Prototype User Testing

Desktop Prototype

Test Participants: 5 users ages 23-50.

Testing Protocol: Users were asked to complete these tasks on both desktop and mobile prototypes while sharing their screens over Google Meet.

Task 1: Create an account

Task 2: Book a stay in Uncle Bud's from 5/8-9 for 4 people

Given the complexity of how many ways users could research and book a hut, this prototype required very tedious and thought-out planning to make sure every potential booking method was clickable.

Mobile Prototype

Noteworthy Findings:

  • 5/5 users had issues hitting touch targets on the calendar

  • 5/5 users liked that they didn’t have to click around a lot to complete their designated tasks

  • 5/5 users liked the more modern aesthetics of the website

  • 4/5 users used the top navigator to book a hut (could be a result of conditioning users to use the top navigator with the “create an account” task)

  • 4/5 users (all users who have used the site before) appreciated that all of the information needed to plan a trip was on the specific hut page and there’s no longer a need to research off of the huts.org page

  • 4/5 users had confusion with the dropdown (essentially all users who were directed to the search page)

  • 3/5 users were pleased to see they could also book a hut from the specific hut page (all previous huts.org users)

User Testing Iterations
Case Study: 10th Mountain Hut Association Responsive Website

10th Mountain Hut in Spring

Based on testing, I was able to identify multiple points of hesitations, prototype errors, and other ways in which users might search for a hut that I did not originally include.

Key Iterations on Desktop:

  • Touch targets on the calendar were enlarged to make them easier to click

  • Added a way to search by location

  • Removed the checkboxes from the "Select Huts" drop down to alleviate confusion with using the dropdown

Key Iterations on Mobile:

  • Touch targets on the calendar were enlarged to make them easier to tap

  • Added a way to search by location

  • Removed the checkboxes from the "Select Huts" drop down to alleviate confusion with using the dropdown

  • Made the text at the top of the page with history of the huts shorter with (read more) option

Summary of Learnings
Case Study: 10th Mountain Hut Association Responsive Website

With a few of my friends in 2020 outside of the Betty Bear Hut.

Above all this project was a lesson in diligence

As a product designer, I learned the importance of creating component library to simplify design iterations moving forward.

It was clear from my initial usability testing on the original website that there are a multitude of ways that users could search for and research a hut. Based on that information, I created multiple ways that users can book a hut on the updated website:

  • A CTA Book Online button on the homepage

  • A Book Online button in the header of the website

  • A Book Online button in the top navigator

  • The ability to search for a hut on the system map

  • The ability to search huts by individual hut systems from the homepage

Making each hut page a one-stop resources for information

In doing user research, every user who has used the website in the past has had to do some of their research off of the huts.org website. My goal was to centralize the information that users looked for most onto each specific hut page. Added elements that the current huts.org website does not have include:

  • Detailed routes with maps and .gpx file links

  • Nearby activity recommendations

  • Peer-reported trail condition with the ability to upload photos

  • Hut accessibility difficulty ratings

  • Live-updated avalanche risk ratings

  • Current and future weather forecasts

  • Perhaps most importantly: a way for users to book a hut on a hut's dedicated information page rather than leaving the page to go to another part of the website.

Creating the Ability to Make an Account

10th Mountain Hut Association currently allows you to become a member, but none of the information that you give 10th Mountain for your account is tied into the booking system. The goal in creating an account allows for faster checkout and the ability to look at both upcoming and past trips straight from the huts.org website. This was not an aspect that I focused on for this specific case study but would be a next step in future iterations.

In 2.5 weeks while working on this case study I went:

27,900
Yards swimming
343
Miles biking
107
Miles running
25,285
Feet of elevation climbed