Case Study: Virgin Sport

Virgin Sport (part of the Virgin Group) had recently acquired a firm who were responsible for organising local half marathons and other community sport events. As part of this they commissioned a full rebrand and required an entirely new online presence to support this.

I was hired by the design agency who had just completed the new branding and had tasked me with adapting this into a website which would provide event information, registration and membership for participants.

The core design approach I had was to take the hexagon shape used heavily in their branding and use it as a functional part of the design. It had the effect to make what could be quite plain and functional pages into ones which were both playful and would encourage higher levels of engagement from the users.

Early sketches & wireframes
Design development: The Events landing page was regarded as the most important page on site, the central hub for the user. It went through many design iterations to reach an agreed workable solution.
The grid: As part of its new identity, the branding team developed this grid pattern to be used throughout the Virgin Sport designs. I decided to incorporate this into the page architecture and shape key elements around this grid. From basic angles to the hexagonal shapes used throughout, they are all derived from this core grid.
Panel variation mapping: As part of the functional requirements, the main ‘Events’ page was stress tested and documented to ensure all of the panel combinations were viable. This was also beneficial to the developers who could see all the combinations up front. As with many of the components, they are all formed from the hexagonal core grid.
Panel types
Encouraging user participation: One of the key drivers for the user ‘Events’ page was to encourage users to complete all of the segments for each event. As they do this, the segment ‘lights up’ to tell them they have completed it. The aim was to essentially ‘gamify’ the experience to increase engagement.
Mobile
Profile page