Client H+I Adventures
Year 2025–2026
My Role Creative Lead, UX & UI Design
Skills Demonstrated
UX Design UI Design Design Systems Figma

My approach

Before any design work started, I built the process the team would use to work on design. Without it I felt that approvals would be unclear, and iteration would become reactive.

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

User Personas

Define who we're designing for.

No gate

Empathy Mapping

Understand user feelings, needs and pain points.

No gate

Card Sorting

Validate information architecture with users.

No gate

User Journey Mapping

Map the full end-to-end user experience.

No gate

User Flows

Future-state

↓
Gate 1
Creative & Commercial
  • Does this flow work for the user goal?
  • Is everything included relevant for this version release?
↓
Gate 2
Development
  • Is the flow based on best practices?
  • Are there unforeseen eventualities which need to be considered?

Low-fi Design Files

Wireframes

↓
Gate 3
Creative & Commercial
  • Have all messages been included?
  • Is everything included relevant for this version release?
↓
Gate 4
Development
  • Is the design based on best practices?
  • Are there unforeseen eventualities which need to be considered?

Hi-fi Design Files

Final designs

↓
Gate 5
Creative Sign-off
  • Does it look good?

Comments will have been raised and resolved in previous gates.

The gating system keeps development scoped to designs that have been properly reviewed, means feedback is given at the right stage, and gives the team confidence that what goes into build is ready. It creates space to step back and review the platform’s structure at a big-picture level: How data connects through the system to meet user goals. Collaboration is what makes the whole workflow effective: the team’s feedback at each stage is what lets me design a consistent multi-channel experience for the user.

The app

The app is dark-themed throughout: Near-black surfaces and a single brand green plus the semantic colours.

The core features cover trail tracking, social community, events, and ticketing.

End user onboarding

Getting someone from download to active user is where a lot of apps lose people. The welcome screens in the onboarding flow handles two contexts: people being invited to the app via a link to an event they’re received a ticket to, and organically. Event attendees end in a post-event app 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.

Create Account
Open app
→
Tap 'Sign up with Email'
→
Continue with OAuth — Google / Apple
→
Enrolment
Name
Email
Password
Agree to Terms & Privacy
→
Tap Submit
→
Form filled correctly?
→
No
↩ Back to Enrolment
Yes
Account created — home screen — App onboarding displayed
→
Send verification email
→
Email verified?
→
No
Show resend verification prompt
Yes
Tap verification link
→
Send welcome email
→
Account verified
Account Verification — Gated Features
Open app
→
User tries to access a feature for verified accounts
→
Account verified?
→
Yes
Access granted
No
App message: 'You need to verify your email to access this feature'
→
Send verification email
→
Tap verification link
→
Send welcome email
→
Permits account
Forgot Password
Login screen
→
Click 'Forgot Password?'
→
Tap 'Forgotten Password'
→
On-screen: reset link sent to your email
→
Reset password email sent
→
Tap link in email
→
Open app
→
Reset Password
Enter new password
Confirm new password
→
Tap Save
→
Form filled correctly?
→
Yes
On-screen: password reset — you can now log in
→
Password reset confirmation email sent
No
↩ Back to Reset Password
Log Out
Open app
→
View feed
→
Tap profile avatar — top right
→
Tap 'View data…'
→
Tap 'Log out'
→
User is logged out
→
Display login screen
Delete Account
Open app
→
View feed
→
Tap profile avatar — top right
→
Tap 'Three dots…'
→
Tap 'Delete account'
→
Sure you want to delete your account?
→
No
View feed — not deleted
Yes
Account deleted
→
Deletion confirmation email sent
Delete Account
Open app
→
View feed
→
Tap profile avatar — top right
→
Tap 'Three dots…'
→
Tap 'Delete account'
→
Sure you want to delete your account?
→
No
View feed — not deleted
Yes
Account deleted
→
Deletion confirmation email sent
Change Profile
Open app
→
Tap profile avatar — top right
→
Tap 'Edit profile'
→
Name
Enter Name
Image
Change profile image
→
Select image from device
→
Tap Save
→
End

The business platform

The admin web is how event organisers, clubs, associations, DMOs, and trail managers manage their presence on Mountain Bike United. There are multiple 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.

Package Selection
Business Web Pages
→
Select Package
→
Redirection Screen
→
To Admin Web
Login
User logged in?
→
Yes
Continue to next step
No
Login Screen
→
Create Account
Business User Preferences
First time Admin Web login?
→
Yes
Business User Preferences Screen
→
Prefs
User Provides Preferences
→
Preferences Stored in MailChimp / CRM
Skip
User Selects 'I'll do this later'
→
Generates Notification on Admin Web and App
No
Continue to select a business for this package to be applied to
Select Business
Does this user have a business?
→
Yes
Select Business
No
Business Creation
Trial or Pay
Trial or Pay?
→
Trial
Free Trial Success
→
→ Dashboard
Pay
Continue to Pay
Pay
Payment
→
Stripe Onboarding
→
Payment Success Page
Dashboard
Dashboard Tutorial
→
Dashboard Access
→
After trial period trigger automated emails and notifications to inform the user
Trial End
Package Selection
→
Stay
Continue to Payment
Change
Change Package
Cancel
Ask for feedback

Design system

The design system is built around a dark theme with a single brand colour as the sole accent: Neon electric green. Everything else uses a set of neutrals (Base Black, Surface Black, Dark Grey, Light Grey, White) and four semantic colour scales.

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.

Colours


Green #00FF12
Base Black #060606
Surface Black #2A2A2A
Dark Grey #939393
Light Grey #E2E2E2
White #FFFFFF

Information (Blue)

50 #D1E6FA
250 #75B2F0
500 #1980E6
750 #0F4D8A
950 #0A335C

Success (Green)

50 #D1FAD1
250 #75F075
500 #19E619
750 #0F8A0F
950 #0A5C0A

Warning (Orange)

50 #FDECCE
250 #F5C56C
500 #F59E0B
750 #AB6E07
950 #623F04

Error (Red)

50 #F7D4D4
250 #F0AAAA
500 #E87D7D
750 #981B1B
950 #570F0F

Low-fi wireframes

Before committing to hi-fi, I wireframed the key user journeys to validate layout decisions, screen hierarchy, and user flow decisions with the team so that feedback can be actioned quickly in easily-adaptable designs.


Beyond the screens

The 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 CRM lifecycle from trial start through to renewal reminders and payment confirmation. Every communication touchpoint is branded and designed for a consistent user experience.

Business Solutions interface preview
Mountain Bike United in-app prompt asking for feedback
Mountain Bike United password reset email design
Mountain Bike United subscription email design
Mountain Bike United welcome email

Related Projects

LOAM brand identity hero image with a mountain biker and LOAM headline

Outdoor Marketing Agency Brand Creation

Took an agency from zero brand to a fully systemised identity. Logo, site, and content engine driving a ~100% YoY increase in client enquiries.

Fort William Mountain Festival social campaign results cover image

Mountain Festival content strategy

Led social activation end-to-end — +95% Facebook reach, +29% ticket sales against the prior year.

Ghost E-Riot launch campaign image with riders in the Scottish Highlands

Ghost E-Riot Photo and Video Production

Concepted and led production end-to-end on a story-led launch film, delivering a hero video, 30 supporting assets and 150+ photos in a two-week turnaround.

Privacy Preference Center