loader image
TL;DR

Royal Ascot

Role
Product Designer—discovery, design, prototyping, and user testing

Client

logo-ascot-hor

Racing towards a new season, Ascot reached out to us to create a customizable digital sales platform. Guided by our experience in creating modular websites, we developed a design system that used interchangeable components. This gave Ascot’s clients the “royal treatment” and generated over £2.5 million in sales.

project-4-1e

Background

Thoroughbred History

With events dating back to 1711 when it was founded, Ascot Racecourse is one of the UK's leading thoroughbred horse racing tracks. Visited by over 600,000 people a year—including Queen Elizabeth II herself—we needed an elegant solution in both aesthetics and application.

WEBSITE INTRO ANIMATIONS
Setting the Stage

To begin, the website needed to be an engaging personalized experience that conveyed the esteem of the biggest annual horse racing event in the UK: Royal Ascot. And so, we met with Ascot stakeholders to map out the content architecture of the first of five sales modules. Not knowing what the proceeding modules would entail, we took careful consideration to clearly define the parameters.

WEBSITE WIREFRAME

asc-wireframe

Taking Shape

Creating a Smart System

With this in mind, I created a design system with a components library in Sketch that could later be used in the upcoming sales modules. Built using smart-layout rules, components automatically scaled as content was updated. Colours, backgrounds, and images could also be freely swapped out without issue or much effort.

style-guide-1
style-guide-2
style-guide-3
Form Styles
style-guide-4
Dropdown Styles
style-guide-5
style-guide-6
style-guide-7
Instruction Styles
style-guide-8
Add-on Styles
Building Blocks

Based on the Atomic Design methodology, we set out to establish commonalities between each section of content with the idea of designing components which could easily be repurposed. We then identified their primary functions which would serve as the building blocks of the website.

component-1
PERSONALIZED GREETING
component-2
PRODUCT FEATURES
component-5
GALLERIES
component-4
MULTI-PRODUCT SHOWCASE
component-3
INTERACTIVE MAPS
component-6
ENQUIRY FORMS
Put Together
desktop-1-2
desktop-2-2
desktop-3-2
desktop-4-2
desktop-5-1
desktop-6-1
desktop-7
desktop-8-1
FINAL WEBSITE DESIGN

Personal Touch

It is sometimes the little things that mean the most.

All things considered, having something personal that’s created just for you is not only appreciated, but can also set the benchmark for user experience. Creating a modular design system for Ascot taught me to be flexible and to design for scale. But more importantly, it made me look for opportunities to surprise and delight users with a personal touch.

To that end, we developed a digital sales platform that adapted to our users’ needs. We empowered them to create bespoke experiences for their clients and as a result generated over £2.5 million in sales.

Since Then

A full season has passed since we launched Ascot’s website. In that time, we’ve increased product offerings, expanded personalization capabilities, and have continued to watch them grow. For this reason, we’ve also created a sales management tool for them. It allows users to track sales, losses, and provides transparency between teams. With it, Ascot has validated their website’s effectiveness with measurable success.

project-4-2
NEW SALES MANAGEMENT TOOL