RailsLearning platformGDSPrototypingEducation

Design Prototypes: a GDS learning platform built on Rails

The goal was to teach what prototyping in code actually means. The outcome was a moderately successful learning product, with a new version on the way.

Duration
2023 – present
Year
2024
Outcome: Live learning platform at design-prototypes.com: courses, certificates, design histories blog
Design Prototypes: a GDS learning platform built on Rails cover

The problem

Government departments, local councils, and individual contributors need to design and build prototypes using the GDS Design System. But learning materials were scattered. Figma alone doesn’t produce functional prototypes, and many designers never learn what happens between a mock and a working service. The gap between design tools and usable prototypes was real.

The brief was for a learning platform: hands-on courses that would help service designers, interaction designers, and researchers create accessible, high-performance prototypes. Not theory. Practice. Real prototypes with the GOV.UK Frontend, real journeys, real data handling.

What the platform does

Design Prototypes teaches rapid prototyping with GDS standards. The philosophy is simple: highly functional, accessible, and performant prototypes make better services. The platform delivers that through four core offerings.

Rapid prototyping with GDS. Master the art of creating high-functioning, user-centered prototypes. Not static mockups: working interfaces that users can actually interact with.

Efficiency in delivery. Streamline the journey from concept to usability testing with minimal iterations. Avoid the friction of neverending research and design; get a highly functional prototype in front of users in a fraction of the time.

Data integration. Learn how to use APIs and manage real and synthetic data securely within prototypes. Prototypes that can handle real data structures produce more reliable research.

Innovative design practices. Explore approaches that foster innovation and collaboration: design histories, iterative workflows, evidence-based decisions.

Landing: GDS Prototype Tutorials

Design Prototypes landing page with GDS Prototype Tutorials headline and course features

The learning journey

The platform guides learners through a three-step path: enroll in a course, build and test with real-world examples, then earn a certificate of completion. Whether you are a service designer, interaction designer, or researcher, the content is tailored to different roles and experience levels.

Courses include the free Introduction to GDS Prototyping for beginners, plus paid options for those ready to go deeper. The approach is hands-on from the start: create real prototypes with a step-by-step implementation of the GDS Front End library, styled with GOV.UK CSS. Learners understand the complete lifecycle: design, user testing, iteration, and preparation for assessment.

How to start your learning journey

Three-step learning journey: Enroll, Build and Test, Get Certified

The blog as curriculum

The blog is not filler. It displays design histories and case studies from UK Government departments: the kind of work the courses prepare learners for. Posts cover macro interactions (iterations based on user research, achieving 100% task completion), progressive disclosure (when one thing per page fails), postcode search (improving UX with AAA-accessible results), and design histories as a practice (what they are, why we use them, the CMS that made adoption possible).

This content grounds the courses in real outcomes. Learners see what the skills produce. They read the reasoning behind design decisions, not just the mechanics.

Course features and approach

Design Prototypes course features: hands-on practice, GDS standards, from Alpha to Live

Technical choices

Rails. The platform is built on Ruby on Rails: familiar territory for rapid product development, with conventions that support fast iteration. The same stack used for todo-it.app reinforces a preference for tools that get out of the way.

Second iteration. The current version is under construction. The focus is on expanding the video platform and adding more course content. Moderately successful so far, enough traction to justify the next phase.

Why Figma isn’t enough

The platform’s FAQ addresses a common misconception: Figma is a great design tool, but it is not a prototyping system. Static screens and click-through flows don’t test how users handle real forms, real validation, real data. The courses teach the GDS kit to create highly functional, accessible, and performant prototypes. That’s a different skill set.

Outcome

A live learning platform at design-prototypes.com, serving government departments, local councils, and individual contributors. Courses, certificates, and a design histories blog that connects theory to real work. The new version, with expanded video content and curriculum, is coming soon.