As a rock climber, I've been using Mountain Project for years to find rock climbs to try outside. The website is very useful in well populated areas as all content is created by the community but it can be difficult to get good information on more obscure climbs.

‍

I've been wanting to do a website redesign project for a while now and I thought this would be a great starting point. The original Mountain Project website isn't terrible. The information is organized well and the layout is easy to navigate. My goal with this project was to update the look and feel and change the layout around a little bit to something that I, an active user, would prefer. I also wanted to get into the little details like grids, text and button styles, and consistent auto layout within Figma.

UI Elements

There are a number of re-used UI elements on the Mountain Project website that are worth tackling. For this, I chose the side bar that provides a list of rock climbs in the area that you are looking at. Originally, there is a dropdown menu to select which type of climb you are looking for (boulder, sport, trad, etc.) It'll then display a number in red showing you how many there are in each respective area. This feature is great because often times, you're on Mountain Project to look for something specific and getting a quick glance at what's around is extremely helpful. I decided to take it one step further and instead of choosing from a dropdown, there are buttons that will filter the list. This allows you to search for more types of rock climbs at once. For example, I might be planning a bouldering and ice climbing trip (why? who knows?). By selecting both 'Boulder' and 'Ice' I can see how many of each type there are in a particular area, giving me more information to plan and work with. Another thing that I thought was helpful was continuing with the already established color schemes for each of the different types of climbs. Currently, whatever type you select will just display in red but by introducing multiple types of climbs, that system needed to change. Grouping everything related to a specific type of climb under one color follows the Gestalt principle of similarity and makes the site and, more specifically, the route listing easier to interpret and navigate.

Homepage Layout

The homepage was an obvious choice to redesign and I had quite a few ideas for this one. In the 7ish years that I've been using Mountain Project, the one thing I use most consistently is the Route Finder tool. When I'm starting my search for a new climb to try, I don't exactly know what options are out there and where they. I do, however, often know the general location, difficulty, and type of climb I am looking for. Because of this, I decided to keep everything besides the Route Finder and some pretty photos below the fold. Upon page load, I want to be greeted with a cool photo that will get me psyched and the one tool I need to find my next project. In my opinion, the Route Finder is the USP (Unique Selling Proposition) of Mountain Project. Everything else just supports it so keeping it prominent and above the fold emphasizes that idea.

On Mountain Project currently, the content below the Route Finder is as follows: Your favorite areas and any updates to them, a featured route, the top 20 classic climbs, news, and lastly a list of locations to start your search. I wasn't planning to go too much further than just UI elements but some basic information architecture changes really helped in this case. I chose to ditch the section that displays your favorite climbing areas. Personally, I don't set a lot of areas as favorites and often times, my favorite areas are the ones that I go on trips too and more often than not I'm only looking for climbs in my backyard to try during the upcoming weekend. Instead, I pulled the locations listing up to the top and stuck your 'To-Do' list next to it. I love the Route Finder but if I'm not going to use it, the next two places I go are my 'To-Do' list if there's something specific I'm looking for, or the location listing if I'm just exploring and seeing what's out there. I also decided to reduce the location listing down to just the states. Originally, it included states and their most popular areas below them but I feel that this made the screen look more cluttered and difficult to navigate. With that in mind, however, each state would have a dropdown that features those areas.

Route Page

Redesigning the route page was a little more difficult as there wasn't anything specific that I knew I wanted to change going in to it. This was the last page that I redesigned though so I was able to carry the design system that I had established over the previous two pages into this one. Besides the updated design system and new filter options for the route listing, the main thing that I did was move a bit of the content around. Because Mountain Project is driven by the community, every page has an author, admins, updates, and page views. This information isn't usually necessary so I decided to move those off to the right sidebar and I moved the description, location, and protection sections to the top of the page because that's the crucial information that a user is interested in.

Overall, this was a fun project to work on and I think I might extend it and do the mobile app version as well. I have a lot of issues with that app but that's besides the point. Check out the comparison shots below to get a good idea of how things changed. You can take a look at the super basic prototype here as well as links to the original pages that I worked off of: Home Page | Joe's Valley | The Angler