The 10th Mountain Division in training at Camp Hale in Colorado
10th Mountain
Hut Association
Responsive
Website Redesign
Subtle changes to the booking and
decision-making process to bring
huts.org into the modern age.
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?
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
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
users
Needed to research externally before committing to a hut
100% of
users
users
Of users used the map to make a booking decision
50% of
users
users
Preferred a monthly over weekly view of the calendar when booking
50% of
users
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.
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
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.
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
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.
-
Current huts.org homepage
-
Updated Huts.org homepage
-
Current Uncle Bud's Hut Page
-
Updated Uncle Bud's Hut Page
-
Current huts.org search page
-
Updated search page
-
Current huts.org mobile homepage
-
Updated huts.org mobile homepage
-
Current Uncle Bud's mobile page
-
Updated Uncle Bud's mobile page
-
Current huts.org mobile search page
-
Updated huts.org mobile search page
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
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.
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