Case Study: Esports at Yeovil College - A Microsite

I was asked to design and develop a website for the BTEC National in Esports course at Yeovil College, starting in the 2020-21 academic year. The website was developed with a modern technology stack and is hosted on Netlify.

  • Web Design
  • Web Development
  • Marketing

Introduction

Yeovil College asked me to design and develop a website for their upcoming BTEC National in Esports course, starting in the 2020-21 academic year.

The website was designed to be familiar to users of the main Yeovil College website, but with some added touches. It was developed with Next.JS, enabling Static Site Generation (SSG) with ReactJS. I used many modern technologies to ensure it was extremely fast - not just on initial page load, but throughout its use.

The Design Process

The original design displayed on a Macbook The chosen single-page design

I began by creating three wireframe designs for the website, each with a different concept. The first wireframe design is the design I selected for the final product. The other two experimented with side-scrolling and a multiple-page experience. I deemed multiple pages excessive as there isn't a large amount of information displayed on the website, and side-scrolling was ruled out as it would've been too unfamiliar for users of the Yeovil College website - a large majority of these users are parents between the ages of 35-55.

Single-Page Design

Another mockup of the design displayed on a Macbook

The single-page design was chosen as it proved simple to use, and the site didn’t require many individual pages due to the small amount of information presented. I did consider expanding the site by adding further information about the course on separate pages, but this wasn’t necessary as the information is already available on the main Yeovil College website. The single-page design is more than sufficient for its purpose – displaying information about the course and allowing visitors to apply to the college.

Website Layout

The layout above-the-fold, the first thing users see, was influenced by the Tesla website, and microsite experiences. A full-page hero with an eye-catching image background was placed at the top of the page - this drew attention to a call-to-action button in the centre, which served to increase enrolment numbers.

Hick's Law was considered throughout the design - few options were required, so I only presented the most important links, relevant to the current section.

Responsive Design

Mockup showing the website scaling down to mobile width

Since this project, I've built my designs mobile-first, which ensures a great experience across all device sizes. This website was built desktop-first, and tablet/mobile sizes were considered afterwards. However, the website scales down very well to these device sizes.

Encouraging Scrolling

All the content on the website is presented on a single page. The design encourages the visitor to scroll down for more information, and doesn't overwhelm them with too much text inside their browser viewport. In the page header there are links to the various page sections, such as the course and subject information sections.

There are links to the enrolment application, and course information and campus offerings on the main college website, throughout the page. These links allow the user to easily explore the regular college site. The purpose of the website was to showcase the esports course and encourage visitors to enrol – a main focus of the design process.

Layout Revisions

Initially, the sections for course and study information were split 50/50, with one side being dedicated to an image, and the other to text content. I revised the design to make these sections taller, shrunk the images to form borders, then shifted them upwards to create a sense of three-dimensional space. This design allows the section type to be placed underneath the image, with the section heading displayed alongside. On smaller screens, all the elements shift into a single column, which ensures a consistent experience across devices. The images serve to separate each section and catch the attention of the visitor.

The Development Process

The website was developed with modern web technologies. I used ReactJS to build the website, as it allowed me to split the website into reusable components. SCSS was combined with CSS modules, allowing nesting of selectors and the use of variables in stylesheets.

Content Management

Another benefit to the use of React is the ability to inject data directly into a page, from various sources. As the website was going to be hosted by the college (a plan which later didn't come to fruition due to the Coronavirus pandemic), I wanted to make it easier for the college IT staff to hook into their own Content Management System (CMS). This could have easily been enabled with the same methods I used on my own personal website.

Performance and JavaScript

Though I used a JavaScript framework to create the website, I did not want any JavaScript code to be run on the client. For that reason, I chose to migrate the website to Next.JS, a framework which enables Static Site Generation (SSG). Building the website with Next.JS meant that the page served to visitors was simply HTML and CSS - no JavaScript at all. This makes the website super-performant on all devices.

Images and WebP

The website itself is fairly image-heavy, so I wanted a way to keep the page size and render times as low as possible. For this reason, I used the new WebP format to serve images, and fell back to compressed JPEG images if the client didn't support the format (at time of writing, only Google Chrome supports WebP images).

Deployment

I deployed the website on Netlify, and you can view it here. Netlify offers a very generous free usage tier for static sites, hosted on their super-fast CDN.


Update: The design writeup for this project is now available on Behance.

Thanks for reading! Please check out my portfolio and contact me for enquiries.