PlayAble
Project
Website + Booking Platform
Client
PlayAble
Industry
Community & Accessible Gaming
Services
UI/UX Design, Web Development, Accessibility, User Accounts & Booking (in progress)
Platforms
Web
UI Screens
Attached screens for reference
Overview
PlayAble is a community games room that makes gaming accessible to everyone. It matches adaptive controllers and alternative inputs to each person's needs, and runs open sessions, equipment assessments and peer support games nights.
We designed and built PlayAble's website for three audiences: players, parents and carers, and professionals. Accessibility is built into every page, so each visitor can adjust the site to suit how they read and navigate.
The next phase adds member sign-up and login, and online session booking, so people can see how busy a session is and reserve their place.
Technical Scope
Frontend
Built with Next.js for fast, search-friendly pages that work well on phones, tablets and desktops.
Accessibility System
A site-wide settings panel with Light, Dark and High Contrast themes, text size, reading width, a dyslexia-friendly font, a reading guide and focus outlines, remembered on every visit.
UI & UX Design
A bold, game-inspired design built around clear layouts, large touch targets and colour contrast that stays readable in every theme.
Content Structure
Around 30 planned pages organised for three audiences, covering the venue, events, resources and ways to get involved.
Accounts & Booking (in progress)
Member sign-up and login with Supabase Auth, and session booking backed by a PostgreSQL database on Supabase.
Challenges
The main challenge was building a website that genuinely works for people with a wide range of physical, sensory and cognitive needs, without losing PlayAble's bold gaming identity.
Key challenges included:
- Supporting different needs, from motor and visual impairments to dyslexia
- Keeping a bright, game-inspired look while meeting colour contrast standards
- Organising a large amount of content for players, parents and carers, and professionals
- Planning for member accounts and online booking from the start, without delaying launch
Our Solution
- Built an accessibility settings panel into every page, with each visitor's choices saved for their next visit
- Designed Light, Dark and High Contrast themes so the brand stays readable in every mode
- Added skip links, keyboard navigation and clear focus outlines throughout the site
- Structured the navigation and resources around each audience, so people quickly find what they need
- Planned the page and data structure so accounts and booking slot in as the next phase
Results
- Built 10 accessibility controls into every page, from High Contrast mode to a dyslexia-friendly font
- Gave PlayAble a clear, welcoming home online for players, families and professionals
- Made the site easy to use with a keyboard, with skip links and visible focus outlines
- Laid the groundwork for member accounts and online session booking
Key Specialized Features
Accessibility Settings Panel
Themes, text size, reading width, a dyslexia-friendly font and a reading guide, available on every page.
Light, Dark & High Contrast Themes
Bold brand colours that stay clear and readable in every mode.
Colour-Coded Sessions
Upcoming sessions show how busy each one is, so visitors can choose before they book.
Resources for Every Audience
Dedicated guidance for players, parents and carers, and professionals.
Membership & Donations
Clear routes to become a member, donate, volunteer or sponsor.
Accounts & Online Booking (Coming Soon)
Member sign-up, login and session booking, powered by Supabase.
Availability
PlayAble's website is in final testing ahead of launch. Member accounts and online session booking are being added next.