10th Mountain
Hut Association
Responsive
Website Redesign

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

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

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

10th Mountain Hut Association Project Background

The 10th Mountain Hut Division is a series of 34 backcountry huts in the Colorado Rocky Mountains and 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 shelter. 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.

The website and booking system are in dire need of a refresh. While the mobile version of the site is “Responsive” it is challenging to read, navigate, and book a stay, especially if a user has never done so before.

My task is to create a booking experience on huts.org on 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.

What does the competitive market look like?
10th Mountain Hut Association Responsive Website Redesign

Key Takeaways

Competitive Analysis

  • All competitors have an up to date and responsive website

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

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

Walter's Hut in Winter

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

Empathy Map

I used an empathy map to differentiate user's feelings and thoughts towards the current huts.org website.

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

By grouping inputs into different empathy categories, I can focus better on designing a solution that alleviates needs for all different types of users.

Grouping these inputs also helps me understand what influencing factors determine how hut users make a booking decision.

10th Mountain Hut Association Responsive Website Redesign

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
10th Mountain Hut Association Responsive Website Redesign

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 actually a simplification and reorganization of the current huts 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.

10th Mountain Hut Association Responsive Website Redesign

Booking Task Flow

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

Currently, the booking page and the hut information pages are completely separate. In other words, if a user were to start booking a hut on the booking platform, they would have to go back and forth between multiple pages to research the hut. Not only that, crucial information such as trail maps, avalanche risk and reports, and even images have to be found elsewhere on the website or on other websites entirely.

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 for 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
Top row: Desktop, Bottom Row: Mobile

Top row: Desktop, Bottom Row: Mobile

Sketches

I usually start the design process with low fidelity sketches as a quick way to illustrate my 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.

Early Prototype User Testing

Prototype tests were conducted on 5 target users ages 26-48 to assess the ease of use and of the huts.org website on desktop and mobile.

10th Mountain Hut in Spring

10th Mountain Hut in Spring

Early Prototype User Testing

Prototype tests were conducted on 5 target users ages 26-48 to assess the ease of use and of the huts.org website on desktop and mobile.

Tasks:

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.

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 thee 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 externally research

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

Desktop Prototype

User Testing Iterations

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

Mobile Prototype

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
With a few of my friends in 2020 outside of the Betty Bear Hut.

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

Above all this project was a lesson in diligence

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 the actual hut 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