UX case study – inf2192 ux capstone
Finding the Right Path: Jane's Walk Website Redesign
Duration
12 Weeks
Role
UX Researcher & Designer
Team
Group 17 · 4 People
Jane's Walk is a global walking festival active in 500+ cities across 37 countries. Their website caused newcomers to unintentionally apply to run entire city festivals. I helped fix that.
Information Architecture
User Research
Figma Prototyping
A/B Testing
Developer Handoff
WCAG Accessibility
01 — The Problem
A website that confused the people
it most needed to serve
Jane's Walk relies entirely on volunteers. Confusion about roles doesn't just frustrate users — it directly increases administrative burden on an already-stretched volunteer Steering Committee.
01
Users couldn't tell what Jane's Walk was
Only 1 of 16 new users surveyed knew what Jane's Walk was before the study. The site assumed name recognition that didn't exist. The mission was invisible until users dug deep.
03
Navigation organized for staff, not users
The information architecture mirrored internal content categories rather than user goals. Labels like "Cities" didn't match what users expected to find or why they'd click there.
02
Newcomers were applying to organize cities
Walk Attendees and Walk Leaders were being funnelled through the same pathways as City Organizers — a vastly different and complex role. Wrong form submissions created real administrative work for the committee.
04
The Steering Committee was an email funnel
One participant reported answering up to 10–20 emails per day during festival season, and was considering an autoresponder — for questions that a well-designed FAQ could have answered.
The starting point
"I get the same questions about walk duration and how to sign up — up to 10, 20 emails a day during festival season. I've started thinking about setting up an autoresponder."
Interview Participant E · Jane's Walk Steering Committee Member
02 — Research
Understanding the gap between how the organization works and how the site presents it
The central question: why does the site create confusion even for insiders? We ran parallel research streams — interviewing those within the organization, and surveying newcomers — to map where mental models collided.
🗣️
5 In-Depth Interviews
City Organizers and Walk Leaders. We used a think-aloud protocol on the live site to surface real navigation friction from those who knew the organization best.
📋
Survey — 16 New Users
Community members and event attendees. Focused on mental model mapping — what did users expect each page to contain, before clicking?
🔍
Competitive & Flow Analysis
Benchmarked against comparable organizations (Meetup, Upwork Help Centre) and mapped every As-Is user flow for Attendees, Walk Leaders, and City Organizers.
Research → Design Deliverables
5
In-depth interviews with
current City Organizers &
Walk Leaders
16
New user surveys mapping
mental models against
actual page structure
6 ➜ 3
City Organizer CTA entry
points rebalanced to match
Attendee & Walk Leader
03 — Design Decisions
Every change connected back
to a research finding
The creative strategy was constrained by a key partner requirement: preserve the visual identity they'd already invested in. That constraint pushed us toward structural innovation over visual reinvention.
Research Driven
Restructured navigation around user goals, not content categories
Survey data showed users' mental models didn't match page labels. "Cities" was expected to help attend walks — it sent users away from the site. We renamed and regrouped into 5 goal-oriented sections.
The decision to keep "About Us" and "Get Involved" unchanged was also deliberate: testing showed those labels weren't causing confusion, so renaming them would introduce unnecessary change.
Before
Cities · Get Involved · About Us · Support Our Work
Organized by internal content type. City Organizer-heavy. "Cities" links users off-site.
After
Find Your City · Get Involved · About Us · News & Media · Donate
Organized by user goal. Equal pathway weight. No off-site links in primary flow.
Before
After
Before
One "Get Involved" page collapsed all roles together with no visual hierarchy.
City Organizer form was reached accidentally by newcomers seeking to attend a walk.
After
Two separate pages. Role cards with responsibilities and explicit next steps for each user type.
Users see their role clearly before any form is surfaced. Equal entry points for all three pathways.
Research Driven
Separated Get Involved & Find Your City into distinct pages
The As-Is flow showed Attendees and Walk Leaders were being routed through the same funnel as City Organizers. This was the root cause of incorrect form submissions that burdened the committee.
Splitting these into two pages with clear role cards meant users could self-sort before committing to any form — reducing both user frustration and administrative error.
Before
After
Before
After
Design Driven
Added FAQ section to address the administrative email burden
Interview Participant B flagged walk duration confusion as the most common Walk Leader question. Participant E described 10–20 emails per day on this exact topic. The FAQ directly targets the identified friction — and our A/B test helped determine the best interaction format for it.
This decision was also informed by discovery: FAQ-style content was identified as a top information priority for newcomers in the survey data.
Before
No FAQ existed. Users defaulted to emailing the Steering Committee for basic questions.
Up to 10–20 emails/day per committee member during festival season.
After
FAQ added to Get Involved page, organized by role. Format validated through A/B testing.
Users can self-serve for the most common questions without external contact.
Before
After
Before
Original orange brand colour. Below WCAG AA compliance on white backgrounds.
Readability issues identified in discovery, especially for body-weight text.
After
Lorax (#F45E3D) — same brand family, adjusted for compliance. 3.22 contrast ratio.
Partner brand preserved. Accessibility requirements met. Documented in design system.
Design Driven
Accessibility-first brand colour adjustments
The original brand orange didn't meet WCAG AA compliance standards. Rather than abandoning the brand colour entirely (which the partner had specifically asked us not to do), we modulated it to a new shade — Lorax (#F45E3D) — which achieves a 3.22 contrast ratio and meets WCAG AA Large compliance.
All colour combinations in the design system were verified for WCAG compliance, and all images include alt text requirements in the developer handoff documentation.
After
After
04 — Validation
A/B testing to resolve tension between what stakeholders wanted and what users needed
Not every design decision could be resolved through research alone. Two key interaction questions required live testing to answer: how to structure the Find Your City page, and how to display FAQ content on Get Involved.
Version A
Find Your City: Dropdown + search → card result
Users select a region, then search. The result displays as a card on the same page — no navigation away from the current view.
FAQ: Full accordion — answers visible on expand
All FAQ answers appear immediately when a user opens a section, without an additional click.
Version B
Find Your City: Nested dropdown list by regional hierarchy
Users navigate through nested dropdown menus — continent → country → city — to locate their walk.
FAQ: Nested dropdown — each answer requires two clicks
Users first expand a category, then click the specific question to reveal the answer.
Version A
Version B
Version A
Version B
Methodology
Between-subject comparative usability test. 11 participants (6A, 5B). Remote, asynchronous via UXtweak. Task-based with pre/post questionnaires.
Key Finding — Find Your City
Both versions surfaced the Toronto link with equal reliability. Version A produced faster task completion and higher reported satisfaction — users preferred the search-based approach over nested hierarchies.
Key Finding — FAQ Format
Version B's nested FAQ outperformed A for content discovery. Users in Version B were more likely to locate and retain the walk duration answer, the primary task objective.
The Final Recommendation
Adopt a hybrid. Version A's find-your-city interaction pattern. Version B's FAQ nested dropdowns. A decision grounded in evidence, not preference.
An important caveat I documented: Our sample skewed 18–24, while Jane's Walk's primary membership is 30+. The recommendation explicitly flags this mismatch and recommends a follow-up usability session with older participants before full implementation. Acknowledging the limits of the study is part of making it useful.
05 — Outcomes
A handoff designed to outlast our involvement
The project closed with a full developer-ready Figma file, design system documentation, WCAG compliance reference, and component-based architecture — explicitly built so Jane's Walk can evolve the site without rebuilding from scratch.
1
Hybrid prototype selected for implementation
Version A's Find Your City search interaction combined with Version B's nested FAQ dropdowns. Recommended based on task accuracy and satisfaction data across 11 usability sessions.
2
Component-based Figma design system delivered
Documented typography scale, colour system (WCAG compliant), spacing, and component library. Designed for maintainability — future designers can iterate without rebuilding. Included as formal developer handoff.
3
Out-of-scope items flagged for future development
A city-level CMS to address the centralization gap was identified but sat outside Figma scope. Walk Leader submission workflow improvements were also flagged. Documenting what we didn't solve is part of a responsible handoff.
4
Follow-up usability session recommended
Given the sample's age skew, a second round of testing with 30+ participants is recommended before full implementation. This limitation was transparent in the report — not buried.
The End Result
06 — Reflection
What I'd approach differently,
& what worked well
↑ What worked well
Tying every design decision directly to a research deliverable. It made the design rationale defensible, and it made partner conversations easier — we could show the logic, not just the output.
↑ What worked well
The A/B test design. Running a between-subjects study with completion-adjusted scoring — rather than treating all 11 participants identically — made the results more honest and more useful.
→ What I'd do differently
Recruit more age-diverse participants for testing earlier. Our 30+ recommendation at the end is valid, but it would have been stronger to build that into the original study design rather than flagging it as a limitation afterward.
→ What I'd do differently
Explore the CMS question earlier in the project. The centralization gap we identified as out-of-scope was actually a root cause of much of the Steering Committee's administrative burden — it deserved more attention.
07 — THANK YOU
A Big Thank You To...
The Jane's Walk Steering Committee
For being open to our ideas, process and proposals while supporting us and providing us valuable insights into Jane's Walk & how we can improve.
Group 17 – Ben, Hill & Princess
The amazing team I was randomly paired up with for a course project. Thank you for all the meetings, laughs and great ideas that got this project to where it is now.