From “Where do I click?” to “Sorted.”
As UX lead, I rebuilt navigation and flows around what users actually do: Donate a Bike, Get Support, Buy a Refurbished Bike (in-store).
I owned research framing, IA, task flows, content patterns and accessibility; Stephanie delivered UI.
Project:
Charity website UX redesign (case study)
Timeline:
4 weeks (concept + validation)
Role:
UX Lead
(UI by Stephanie)
Deliverables:
IA, content strategy, low–mid fidelity UX, usability checks, accessibility guardrails.
Overview
On Your Bike is a small UK charity with multiple audiences and limited internal resources. The existing website (prior to redesign) buried critical actions (e.g., “get help,” “donate,” “refer someone”), mixed messaging, and lacked clear navigation hierarchy. For a charity, clarity beats cleverness: people must quickly understand what you do, who you help, and what to do next.
TL;DR outcomes
-
Top-task success improved from ~30% → 70% → 100% across four tasks (old site → 1st proto → final).
-
Clearer labels and IA (“Get Support”, not “Programmes”), eligibility upfront, and one primary action per page drove the gains.
-
Results are from small-sample prototype tests;
Problem
Visitors couldn’t quickly: understand the mission, donate a bike, buy a refurbished bike, or find support. Many defaulted to Contact, increasing staff triage and causing donor/beneficiary drop-offs.
Assumption check: We assumed the charity’s primary value exchange is impact transparency + clear routes to action. If that’s wrong (e.g., most donations arrive via corporate partners), the IA should bias differently.
Key decisions
(evidence → change → effect)
-
“Programmes” label confused people → renamed to Get Support and moved to top-nav → task success reached 100%.
-
Donors feared wasted trips → added “What we accept” with photos + drop-off guidance → 100% donate-flow success in tests.
-
Mission unclear at a glance → rewrote hero in plain English (who we help + how) → 100% comprehension in tests.
-
Multiple CTAs diluted focus → one primary action per page; supportive links to footer → fewer misroutes to Contact.
Assumption check: We’re assuming online stock/checkout won’t increase conversions enough to justify operational overhead (inventory, fulfilment, returns). Revisit if: (1) repeated user demand for online purchase, (2) >30% “call before travel” drop-offs, or (3) reliable stock data becomes available.
Current website
Current website
Competitive Analysis
Put user intent front and centre; make it effortless to donate a bike, apply for support, or buy in store. Simplify navigation, lead with eligibility and plain English, and add a minimal book/plan step for donations and visits. Declare no online sales to remove false expectations; keep flows fast and accessible.
Assumption check: We’re assuming online stock/checkout won’t increase conversions enough to justify operational overhead (inventory, fulfilment, returns). Revisit if: (1) repeated user demand for online purchase, (2) >30% “call before travel” drop-offs, or (3) reliable stock data becomes available.
Research & Testing (current website → prototypes)
6 hallway tests (current site), 5 short interviews, 1 tree test (n=6). Success = unaided ≤2 min, correct first click, confidence ≥3/5. Baseline task success was ~30% with frequent misroutes to Contact. After label/IA changes, eligibility up-front, and one primary action per page, success rose to ~70% (proto 1) and 100% (final). Small-n; we’ll confirm with live analytics post-launch.
Josh W.
Leeds
“I’d donate if I knew my old hybrid is acceptable and how to drop it off.”
Rose H.
Birmingham
“Tell me straight away if I qualify and what documents I need.”
Mark M.
Leicester
“Before travelling, I need price range and whether my size is likely there.”
Who we designed for (1 persona + 2 proto-personas)
-
Persona 01 | Bike Donor (full persona): research-backed; drives the detailed Donate flow.
-
Proto-persona 02 | Beneficiary (seeking support): evidence-informed; to be validated post-launch.
-
Proto-persona 03 | Refurbished-Bike Buyer (in-store): evidence-informed; to be validated post-launch.
Depth note: We created one full persona and flow (Bike Donor). Beneficiary and Buyer are proto-personas with lightweight journeys; we’ll validate them with events and moderated tests.
User Persona
Bike Donor (full persona)
- Who: Local adult with a used bike, time-poor, wants to help / declutter.
- Top tasks: “Check if my bike is accepted” → “Find drop-off details”.
- Pain points: Fear of a wasted trip; unclear acceptance criteria; hidden logistics.
- Accessibility needs: Clear contrast, short checklists, mobile-first.
- Key insight → change: Certainty drives action → “What we accept” photos + plan-your-drop-off pattern.
- Effect: Donate flow task success → 100% in prototype tests.
Proto-persona 1
Beneficiary (seeking support)
-
Who: Person seeking a low-cost bike to access work/education.
-
Top tasks: “Do I qualify?” → “See next steps and documents”.
-
Pain points (assumed): Eligibility hidden in long text; jargon; unclear process.
-
Accessibility needs: Plain English; step-by-step; keyboard-friendly forms.
-
Hypothesis → change: Put Eligibility + ‘What happens next’ timeline above fold.
-
Validation plan: Post-launch first-click + completion events; short intercept survey on eligibility clarity.
Proto-persona 2
Refurbished-Bike Buyer (in-store)
-
Who: Budget-conscious rider comparing refurbished vs used-market deals.
-
Top tasks: “Price/size guidance” → “Where to buy / warranty”.
-
Pain points (assumed): Expects online stock; uncertain about sizing and warranty.
-
Hypothesis → change: Clear ‘in-store only’ label + price bands, size guide, warranty note.
-
Validation plan: Track clicks on size guide; reduce “Do you sell online?” enquiries.
Key User Flows
I translated findings into a full Donate a Bike flow plus proto-journeys for Get Support and Buy in store, clarifying exactly which screens and decisions users must pass through.
Information Architecture (IA)
Goal: Make top tasks obvious, reduce misroutes to Contact, and use plain-English labels.
Success measures: first-click accuracy on Get Support and Donate a Bike, time-to-first-click, and reduced misroutes.
Before → After (at a glance)
| Issue (old IA) | Change (new IA) | Effect (prototype tests) |
|---|---|---|
| “Programmes” ambiguous; beneficiaries missed it | Renamed to Get Support and moved to top-nav | First-click ↑ to ~80%+ in tree test; 100% task success in final proto |
| Donation criteria buried in prose | Added “What we accept” module + drop-off guidance | Donate task 100% success; faster first click |
| Multiple CTAs per page | One primary action per page; supportive links moved to footer | Misroutes to Contact ↓ noticeably in tasks |
| “Bikes” content split across site | Clarity page: Buy Refurbished Bike (in-store), size/warranty guidance | Buyers completed path without backtracking |
| Mission unclear above fold | Plain-English hero: who we help + how | Mission comprehension 100% in tests |
Wireframes & Content Patterns (UX deliverables)
Donate a Bike Page
“What we accept” module
- Problem it solves: Donors feared wasted trips; acceptance criteria were unclear.
- Design: Acceptance criteria presented visually with a concise checklist; single primary action.
- Evidence: Donate task success reached 100% in the final prototype.
Original Ways to Donate Page
(Donate a Bike Page Unavailable)
Mi-fi Ways to Donate Page
Mi-fi Donate a Bike Page
Mi-fi Donate a Bike Collection Form Page
Mi-fi Donate a Bike Collection Thank You Page
Get Support Page
Eligibility + “What happens next”
-
Problem it solves: Beneficiaries asked “Do I qualify?” first; details were buried.
-
Design: Short checklist + 3-step timeline placed above the fold.
-
Evidence: In prototype runs, first-click to eligibility became immediate and task success reached 100%.
Original Get Support Page
Mi-fi Get Support Page
Buy Refurbished Bike
In-store clarity for buyers
- Problem it solves: Expectation of online stock and sizing uncertainty.
- Design: “In-store only” banner, size guide, price bands, warranty card.
- Evidence: Buyers completed the path without backtracking in prototype tests.
Original Buy Resurbished Bike
Mi-fi Buy Refurbished Bike
Collaboration with UI
- I provided annotated wireframes, component guidance (e.g., card patterns, CTA hierarchy), and an accessibility checklist to protect contrast, focus states, and text scale.
- Stephanie evolved the visual system, applied brand-appropriate colours, spacing, and state styles.
- I reviewed UI for UX fidelity (flow length, scannability, CTA prominence, content legibility).
- WCAG-AA baseline: headings, landmarks, colour contrast, focus order, alt text guidance, form error messaging.
Mid-fi → Hi-fi (what changed and why)
- From “Where do I even start?” to a clear first click for each audience.
- From mixed labels and deep menus to a small, unambiguous IA.
- From generic “support us” copy to transparent, outcome-led donation language.
- From ad-hoc page templates to consistent content patterns the team can maintain.
Counterpoint to ourselves: “Will fewer menu items hide important information?”
We preserved depth via contextual links and a robust footer.
Mi-fi Home
Before → After
- Added a subheading that states who we help and replaced “Contact Us” with “Need Support” to match the two primary journeys.
- Grey bar to branded green with a persistent Donate; global action stays available while hero CTAs stay contextual.
Hi-fi Home
Mi-fi Donate a Bike
Before → After
- Moved “What Bikes Can You Donate?” from mid-page to directly under the hero, so donors check eligibility first, then proceed to drop-off or collection.
Hi-fi Donate a Bike
Mi-fi Buy a Refurbished Bike
Before → After
- Generic intro to “Find your perfect bike in our stores” (hero section) plus category tiles, sets “in-store only” expectation early.
Hi-fi Buy a Refurbished Bike
Mi-fi Get Support
Before → After
- Same sections, clearer hierarchy, dense text became tile cards and Apply now is more prominent.
Hi-fi Get Support
Across four top tasks (Understand Mission, Donate a Bike, Buy Refurbished, Get Support), success improved from ~30% on the old site to 70% on the first prototype and 100% on the final prototype (small-n, prototype tests).
Validation & Next Steps
- Add analytics & event tracking (privacy-aware): top-task funnels, search queries, exit pages.
- Task-based usability test (6–8 participants: 2 beneficiaries, 2 referrers, 2 donors, 2 volunteers) with think-aloud.
- A/B or sequential tests on donation page microcopy and Gift Aid messaging.
- Content governance: an owner, review cadence, and a light checklist to keep clarity and accessibility intact.
- Quarterly health checks: Task success, Lighthouse accessibility audits, and bounce on top-task pages.
If we had two more weeks: I’d prototype the referral and donation flows in high fidelity with content variants and run rapid tests to lock in language and field counts.
Risks, Trade-offs, and How I Mitigated Them
-
No stakeholder workshops at start: I documented assumptions, made them testable, and proposed a slim follow-up plan.
-
Limited analytics: I avoided guess-heavy decisions, leaned on established patterns, and set up metrics for post-launch validation.
-
Small-team maintenance: I chose content patterns and an IA the charity can sustain without design support.
Personal Reflections
- I framed decisions explicitly (who/what/why), not just artefacts.
- I optimised for clarity over novelty, a charity’s conversion is trust + simplicity.
- I designed with constraints, left measurable hypotheses, and defined a learning loop.
- I collaborated cleanly with UI annotated handoff and guardrails, not pixel-pushing.
See the Walkthrough That We Presenteted to the On Your Bike Charity (10 mins)
A quick tour we presented to the charity team. No jargon, just what changed, why it matters, and how to use the new site.
Credits
Anna
UX Designer
Stephanie
UI Designer
Informal testers: 7 participants
