British Swimming exists to win medals in the pool. To do so they need the best coaching. As part of their National Development Syllabus they were producing a range of video resources to make available to all coaches in Great Britain. This post will look how I created a low maintenance, easy to use site that was in line with the British Swimming brand.

A flexible site for future growth

I developed the site in parallel with the first batch of videos. The site was designed to be able to add more content as it was developed, starting with the Techinical videos.

The content structure had several categories of lessons - Starts, Turns and Underwaters. Each category in turn had lessons for each of the four swimming strokes. And each lesson (e.g. Backstroke Starts) comprised of 4 videos and a PDF factsheet.

Making the content discoverable

I wanted the content to surface to the top page, making it the first thing a coach sees when they log in. Using a container model, with the videos represented by their thumbnails, the breadth of content becomes immediately clear. It allows the coach to jump right in to a lesson, or drill down futher in the site heirachy using the “View All” links.

The design also helps to cut site admin down to a minimum. No superfluous copy or images are needed. Video thumbnails, generated automatically, and titles, serve as the UI.

The Django app

I chose Django for the app, having used it on similar projects before. The web app is hosted on a small DigitalOcean droplet. Site content itself is served from S3 via CloudFront, using signed URLs to keep the content private. Files are uploaded directly to S3 using django-storages and django-filetransfers.

Videos, even on poolside

The “container model” design described above easily scales down to mobile. But I also needeed to take into account the bandwidth-constrained nature of poolside. Videos needed to be transcoded to multiple resolutions.

For this job I used the AWS elastic transcoder, making use of django elastic transcoder – a small wrapper around the excellent boto AWS library.

User registration

British Swimming wanted any coach to be able to register for the site. But they wanted a verification stage. I used a customised version of django-inspectional-registration to manage the 5 registration steps. The process includes automated emails, sent to the the site administrator and the coach signing up.