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