ALLISON YAN

A responsive and mobile-friendly redesign of the Ontario Alliance of Climbers website


Tools Used

Axure RP,  WordPress, Adobe Photoshop, HTML, CSS, PHP

Roles & Tasks

User experience design, information architecture, visual design, strategy, WordPress setup/development


Overview

The Ontario Alliance of Climbers (OAC, formerly known as Ontario Access Coalition) is a non-profit organization promoting safe and environmentally sustainable outdoor climbing in Ontario.  With the popularity of rock climbing rising, the OAC wanted to make their outdoor stewardship knowledge and activities more accessible. Their website needed a refresh, from a blog format to a more compelling, navigable and responsive website. In particular, the website would target information to three groups in the Ontario climbing community: climbers, land managers and sponsors. These were the opportunities the organization and I identified: 

  • Organize content and resources in engaging ways relevant to climbers, land managers and sponsors
  • Highlight climbing events in Ontario and ways to get involved with and donate to the organization
  • Make website responsive and mobile friendly 

Information Architecture 

Condensing and re-organizing hierarchies. The project manager provided a proposed information flow and content. While it was very helpful to know how the OAC expected the website to be navigated, I noticed there were some very long, heavy pieces of content that worked in PDF format, but not necessarily on a website. I took this opportunity to work with the OAC team to break content down into more digestible parts in distinct categories.

User research. The team also provided poll data from OAC members on where they climbed, and their climbing habits, etc. to help me distinguish pages that would be more frequently used. The increasing popularity of rock climbing also made me think about how to balance the organization of important information for newer and experienced outdoor climbers alike.


Wireframes

I initially drew rough sketches on paper and then used Axure to develop my ideas further. This helped me communicate my designs and ideas to and get feedback from the project team at the beginning and to transition the design into the WordPress templates later. 


Community Engagement

Encouraging participation. Throughout the different pages, I made sure there were calls to action to get involved depending on whether you were a climber, volunteer or sponsor.

Social media & community. OAC climbing events also have their own pages for registration, schedules and travel directions. To help bridge the gap between the website and social media, I ensured that there were always links on the main OAC event page to their corresponding Facebook event pages.


Visual Design and WordPress

I took inspiration from non-profit websites and outdoor/nature websites, making the design sharp, strong and clean, and highlighting the beauty of Ontario climbing areas (crags) taken by the local climbing community. 

The OAC team chose a modern WordPress template for the redesign to simplify website maintenance. I modified templates and created CSS stylesheets. The WordPress format was new for the organization, so I wanted to ensure that the pages and templates are organized in a clear, consistent way so that any team member can make updates. 


Top row: Mobile views. Bottom: Ontario Crag Status listing page

Mobile/Responsive Website 

The increasing use of mobile devices over desktop computers made responsive design a priority. There were several important PDF documents in the original OAC website. I have converted some of these PDFs to website format while allowing users to download PDFs if they need to print them for display purposes. 

Crag information. Climbing areas in Ontario have different rules and fees, which the OAC compiles into a single PDF. To make this information more easy to access on mobile, I created a crag status section on the website, splitting climbing areas into separate, searchable pages by geographic location with fewer images to reduce loading times. 



The Website

Check out the live website here.


What I Learned & Reflections

I’m glad I had the opportunity to work on such a large project. The most challenging part was to conceptualize the different parts of the website for different audiences. Being a newer climber myself, I see firsthand the importance of encouraging climbers to properly maintain and share the environment for years to come. I had to strike a balance between making the website intuitive for new climbers as well as for seasoned climbers and land managers. 

Looping back and user research. Multiple touchpoints throughout the project helped me to better define the scope and address issues with the OAC team, though I would make sure communication happens earlier and more frequently. I look forward to getting more user data from the different user groups to improve the website further. 

Maintenance for the future. I learned a lot about WordPress and I would also like to become more familiar with the WordPress plugins to make the site experience more seamless (e.g., creating a way for OAC staff to easily update crag statuses and to generate a PDF.) 

Using Format