New River Alliance of Climbers (NRAC)
Full rebrand and responsive website build to improve community outreach and access to climbing safety resources.
Overview
Problem
The New River Alliance of Climbers (NRAC) website was visually unappealing.
Information like access updates, safety information, and member outreach was hard to access.
The bad bolt report form had low levels of user engagement and poor completion rates.
Goal
Our primary goal was to redesign the website with intuitive navigation.
The structure should prioritize content on access and safety updates.
Our secondary goal was to overhaul the bolt report form.
Proposed Solution
​Redesign website aesthetics according to the style guide from the total rebrand.
Improve navigation structure to optimize priority content.
Overhaul the bolt report form to make successful completion easy and intuitive.
Action
Collaborate with the design team to create new logos, style guides, and a website UI.
Diagram site maps based on goals and user testing to establish a better site structure.
Iterate multiple versions of wireframes with user testing to improve the bolt report form.
Results
​Redesign boosted website engagement with improved SEO and appealing visual flair.
The new site reduces the number of clicks required to access updates by 33%.
Bad bolt report form completion rates are projected to be 20% more successful.
Increased community access to educational safety resources by 50%.​
Problem: 60% of users struggled to find safety info; the bolt report form had a low completion rate.
Solution: Redesign site with 100% new branding, clearer navigation, and simplified reporting.
​
Action: Delivered new logo, style guide, and 20+ redesigned pages with the dev and design teams.
Outcome​: 33% fewer clicks to updates, 20% higher report completion, and 50% more safety resource access.​
Services
-
UI/UX Design
-
User Research & User Flows
-
Wireframing
-
A/B Testing
-
Web design
-
Webflow development
-
Branding and Style Guide
Scope
Timeline:
One-month sprint
​
Role:
UX & UI Designer
​​​​
Tools
-
Figma
-
Lovable
-
Squarespace
-
Banani
-
Stitch AI
-
Github
-
Loom
_edited.png){kind=small}
Executive Summary
A Little Background on Climbing...
The New River Alliance of Climbers (NRAC) is a local climbing organization based in Fayetteville, WV, home of America's newest National Park. Their mission is to protect access to climbing in the New River Gorge.
​
One key safety measure involves maintaining fixed hardware—bolts drilled into rock walls—that allow climbers to ascend and descend securely. Since old bolts can fail over time, NRAC oversees their replacement and needs a system for climbers to report unsafe hardware. As both a climber and NRAC member, I helped design a bolt report form that meets user needs for safety and NRAC’s goal of bolt management.
New River Gorge National Park
New Bolts Replaced by NRAC
Me, Climbing in the New
The Old Website
Hueristic Review
.png)
1. The Navigation Bar doesn’t organize content effectively according to project goals.
​​
​
2. Lacking a header/banner to greet visitors. This is website landing page 101.
​​
​
3. Poor photo quality, also lacks written photo descriptions for accessibility.
​​
​
4. Color contrast is minimal, so it's hard to read. Consistency, colors, and branding are not cohesive.
​​
​
5. Colors changing halfway through text. Poor readability, not WCAG compliant for accessibility. Still not consistent.
​​
​
6. Too much white space. Not being used correctly to reduce cognitive load.
​​
​
7. Paragraphs are offset randomly; content should follow the F pattern.
User Research
Interviews & Affinity Mapping
10 in-person interviews
Data organized to identify trends
Patterns give insight into user goals
Aligns user needs with project goals
.png)
Click image to view & zoom in FigJam!
Key Takeaways:
-
Users want updates from NRAC in a consistent, accessible format like a weekly social media post or newsletter.
​​​
-
Climbers are aware of rebolting efforts, but lack knowledge about what defines a bad bolt. Multiple users have felt unsure about the integrity of a bolt, but did NOT report it due to a lack of knowledge.
​
-
Users do not visit the NRAC website regularly (at least once a month). The most common reason to visit the site is to donate.
​
-
The main thing holding users back from donating/volunteering with NRAC is a lack of visibility; opportunities are not advertised, and results of donations/volunteering efforts are not posted.
Quotes:
-
"I haven’t (reported a bad bolt) yet. I’ve seen some sketchy ones, but I wasn’t totally sure if it was bad, bad, so I didn’t."
​
-
"Yeah, I’ve looked at the website. It’s fine, but kind of basic. I’d like more photos, like seeing the actual rebolting work, or maybe maps showing which areas are updated."
Addressing Takeaways:
Increase Outreach Consistency
Improve Visibility for Opportunities and Updates
Expand Website Functionality
Provide Educational Resources About Bolts
Defining the User
User Stories and Personas
.png)
Information Architecture
MVP User Flow for Bad Bolt Report Form
-
One major problem with the old site was the confusing navigation that hid important information.
​
-
I start the website rebuild by creating flows so that the navigation effortlessly guides users to key elements.​
​
-
Designing user flows is efficient-this saves time and money down the road and enables rapid iterations.
​
-
The flow below creates unprecedented ease of navigation and fulfills both project goals and user needs.​
​​​​
-
It also makes form completion a breeze, which will boost success rates and make our users happy!
.png)
Click image to view and zoom in FigJam!
Mobile Design Sketches
The Strategy of Sketching:
-
Pen to paper sketches save valuable time by giving me feedback early on.
​​​
-
I shared these designs with stakeholders to iterate collaboratively.
Lo-fi Wireframes
2 Versions of Bolt Report Form for A/B Testing
Based on the conversations in my stakeholder meeting, we chose to draft initial wireframes with 2 options.
​Then, I commenced Preference Testing with users for tangible feedback on designs.
.png)
Usability Testing
Preference Testing Results:
Preferred Option
Option 1 (Multi-step Form): 15/20 participants (75%)
Option 2 (Single Long Form): 5/20 participants (25%)
Participant Breakdown
Total Participants: 20
Testing Format: Preference Test (Option 1 vs 2)
Test Duration: 2 minutes per participant
Demographics:
-
50% local climbers
-
30% visiting climbers
-
20% global climbers
Qualitative Feedback:
Option 1 (Multi-step Form - Preferred)
​
-
“I liked the feeling of progress. The steps made it feel manageable.”
​
-
“The success screen was a nice confirmation. I would click the donate button.”
​
-

“Good for mobile. I didn’t have to scroll.”
​
​
Option 2 (Single Long Form)​
​​​
-

“Felt like a long survey, not a report form.”

​
-
“It could be a pain to scroll and double-check.”​
Key Insights: ​
Cognitive Load:
Users appreciate the reduced cognitive load of Option 1.
Completion Confidence:
Participants report feeling more certain they'd submitted correctly with 1.
Mobile First Design:
Option 1 performed better on smaller screens.
Design and Development
Expediting Mid-Fidelity Iterations with Generative AI
-
I utilized the AI agent, Lovable, to iterate on wireframes.
​
-
I skillfully prompt agents to rapidly design a variety of screens, expediting the iteration process.
​
-
Below, I show how a paraphrased version of how I used these tools to create drafts that facilitate developer handoff during a sprint with unparalleled speed.
​
-
This tactic leaves me with more time to focus on complex aspects of design that require human expertise, intelligence, and emotion.​
Phase 1: Goals & Structure
​Initial prompts explain the form’s purpose, key inputs, and structure to align AI output with project goals and needs.
Prompted with Intention:
I focused on user outcomes—speed, clarity, and ease of use.
Phase 2: Testable Outcomes
Used feedback and testable criteria (like mobile usability and completion time) to guide iterative prompt refinement.
Phase 3: Feedback Informed Refinement
Updated prompts after testing, incorporating user feedback to improve layout, input types, and field order.
3 Rounds of Iterations
Cross-Team Collaboration & Iterating With Users
3 rounds of prototype iterations.
Internal review with the whole team gives feedback.
Then, usablity testing is conducted.
​
The scroll selection is ambiguous.
​
​​​​​
​
Autofill is too broad to populate fields.
Substitute a dropdown for increased accuracy.
​​
​​​​
​
Add a severity section for more comprehensive user feedback.​​
Why are these issues important?
Because they relate to overarching project goals/user needs.
Threaten the goal of improving form completion rates.
Iterate & Repeat
.png)
.png)
Integrated dropdown menus with options for issue and severity rather than manual fill.
​
Added a new section, severity, for more comprehensive feedback.​​
Expanded bolt type selection (rather than a scroll) and separated it into its own screen.
This Iteration Satisfied Our Whole Team. Here Are Takeaways:
Stakeholders appreciate the aesthetic that adheres to new branding and style guides.
Developers feel confident that these designs will be straightforward to implement.
Designs meet the project goals of reducing clicks, increasing completion rates, and enhancing ease of use.
Now we just need one last round of usability testing to ensures that designs also align with our user needs.
Iterate & Repeat
.png)
Users requested bolt images that are of real rock in the New River Gorge to increase familiarity.
User feedback gave insight into best practices for our filled button state (increasing clarity).
Users particulary loved breadcrumbs to help maintain sense of progress. Let's let this inspire other aspects of the site!
A Recap On Usablity Testing:
Overview:
Hybrid remote and in-person moderated testing with 10 participants.
Task Completion:
10/10 completed the reporting process successfully in under 1 minute.
Ease of Use:
8.5/10. Biggest barrier cited was lack of indication for selections.
Biggest Win:
Achieves goals of increasing completion rate, and reducing time and clicks.
Final Design Visuals
Mobile-First Designs for MVP Bad Bolt Report Form
.png)
.png)
Responsive Designs: Tablet
.png)
Responsive Designs: MacBook
The Website Re-Design In Action
