From user flow to final designs

It connects riders, trails, events, and businesses in one place — an iOS app for end users and a web-based admin platform for business users: event organisers, clubs, associations, trail operators, and race organisers.

The scope covers both products: design system, user flows, wireframes, hi-fi screens, email templates, digital ticketing, B2B onboarding, and the UX process I defined and onboarded the team with.

Before any design work started, I built the process the team would use to work on design — because without it, approvals are unclear, developers start building half-finished screens, and iteration becomes reactive.

I mapped and documented a 5-gate UX approval pipeline, presented it to the leadership team, and onboarded the full product team with it. It separates research (no gates) from design (gated approval at each stage), and defines exactly who needs to sign off at each point before anything moves forward.

The gating system keeps development scoped to designs that have been properly reviewed, means feedback is given at the right stage (not after a developer has spent two weeks building the wrong thing), and gives the team confidence that what goes into build is actually ready.

The app is dark-themed throughout — near-black surfaces, a single brand colour (neon electric green), and semantic colour scales for states like information, success, warning, and error. The visual language is deliberately stripped back: it gets out of the rider’s way.

The core features cover trail tracking, social community, events, and ticketing. Mapbox powers the trail maps with colour-coded difficulty routes. Points of Interest surfaces bike-friendly hotels, B&Bs, and amenities with directions and contact info. Social lets riders post updates, create groups, organise meetups, and tag each other. Events and tickets are fully integrated — riders can buy tickets, get QR code delivery via email, and redeem them in-app.

Getting someone from download to active rider is where a lot of apps lose people. The onboarding flow handles two contexts: a public event purchase (through the web shop or app, then Stripe checkout, then ticket delivery) and a private event (deep link into the app, account creation, event entry). Both routes end in a post-event tutorial.

Account creation covers the full range of auth states — Apple/Google SSO, email signup, login, password reset, and error handling for edge cases like attempting to log in with an account that was registered via a different auth method.

The admin web is how event organisers, clubs, associations, DMOs, and trail operators manage their presence on MTBU. There are nine different business types — each with their own package options (Foundation, Professional, Enterprise) — and the onboarding flow handles all of them through a single adaptive journey.

The flow covers: account creation (Apple/Google SSO or email) → personal profile → email verification → 2FA via SMS → business profile → package selection → payment via Stripe → Stripe Connect → dashboard. 40+ screens across the full journey, with a 14-day free trial and annual pricing from £1,500–£2,500.

I designed the B2B onboarding alongside the user flow, so what you see in the hi-fi was fully mapped before a pixel was placed. The business dashboard and every touchpoint from trial reminder to subscription renewal is part of the same system.

The design system is built around a dark theme with a single brand colour — neon electric green — as the sole accent. Everything else uses a tight set of neutrals (Base Black, Surface Black, Dark Grey, Light Grey, White) and four semantic colour scales running from 50 to 950: Information (Blue), Success (Green), Warning (Orange), Error (Red).

Typography runs across separate desktop and mobile scales, both with defined weight hierarchies. Having this all locked down early meant individual features could be built at pace without constant design decisions slowing things down.

Low-fi is where the thinking happens. Before committing to hi-fi, I wireframed the key user journeys to validate layout decisions, screen hierarchy, and flow logic with the team. Getting gates 3 and 4 signed off on wireframes means there are no structural surprises when hi-fi lands.

Wireframes covered end user event onboarding, the B2B admin web, the website, and individual app updates like the Search tab redesign.

A platform’s UX doesn’t stop at the app. I designed the full email system — welcome emails, email verification, password management, account deletion, and the complete B2B lifecycle from trial start through to renewal reminders and payment confirmation. Every communication touchpoint is branded and consistent.

The platform also includes a digital PDF ticket system for events: each ticket has a unique QR code for in-app redemption, and templates were built to handle different ticket types (day pass, weekend pass, full press experience) across different events.