Launching the Varsity Cup Website | 4i

Launching the Varsity Cup Website

22 February 2018 ‐ 5 min read

We were delighted when Varsity Cup approached us to rebuild their website from the ground up. Having built the Varsity Sports mobile app, we had a pretty good idea of what they were looking for and the market they are trying to reach. The deadline was super tight, so we had to work some responsive web design and development magic to bring it to life on time.

We sat with the client to go over the brief, and workshopped the project with our internal teams. The requirements included the UX and UI design, front-end and backend web development, as well as a user friendly CMS that can handle updates on-the-go.

Designing the website for Varsity Cup

One of the challenges we had to tackle was making sense of the informational hierarchy and presenting it all in a user friendly way, while ensuring a seamless, responsive experience for mobile users. The Varsity Cup website has a plethora of different media types, such as videos, images, articles, and tables. Using our smart thinking, problem solving toolbox coupled with a mobile-first approach, the 4i team worked tirelessly to make everything fit, look good and feel great on a mobile device. Varsity Cup is a large, content heavy website, so it was really important to strike the right balance between displaying media rich web pages while keeping the data usage light.


Smart and fast problem solving

The homepage displays rugby jerseys of all the FNB Varsity Cup teams at the top menu, and we thought it would be a great idea if those jerseys could link to a web page with information about the players. In addition, we came up with a few gamification ideas that make the website even more engaging, such as displaying the Supersport logo for the rugby matches scheduled on DSTV. We included a Google Maps pin linked to each location, so visitors can navigate straight to the game.

Enhancing engagement through gamification

In addition, If the game is live at that moment, the scores are displayed in Varsity Cup “pink” and updated instantly as the game progresses. Live matches include running commentary and instantly updated stats, so fans don’t have to miss out on the action even if they can’t attend or watch the game on screen. We added additional value in the fixtures section indicating where to find parking, and whether or not tickets are available at the game. FNB Varsity Cup can now keep fans engaged between matches by running competitions, and we added space for banner advertising opportunities. Overall, we really enjoyed working on this project and we were excited to see it go live within deadline.

Do you need an experienced website design and development team for your website? Drop us a line at

*Header image cred: FNB Varsity Cup

We hope you found this article helpful.
Why not share it on your networks?