Branding / Web Design Project

View website >

Spring-Summer 2017

Web Design

Revamped IATSU website with a swappable banner


This project is a website overhaul I self-started because of my elected position as Director of Web and Social Media within my University student union IATSU (Interactive Arts & Technology Student Union). As the new representative in charge of IATSU’s online presence I thought the current website at the time of my election was not a proper representation of the work and people of IATSU. I saw it as a semi-professional opportunity to expand upon my knowledge of web development.

I began development sometime in the second week of May 2017 and the overhauled site was launched July 1st, 2017 (with continuous small updates rolling out until my term ends in April 2018).


I approached this website as a new iteration of the groundwork and ideas of the website that already existed. So, while the old website had many elements I carried over to the new design, it was the overall execution and functionality of the old website that was quite poor and needed to be reworked. For example, there was no events on the website despite ‘Events’ being present in the site navigation. Additionally, the website was not fully responsive on mobile platforms and had several bugs in it’s visuals.

Old IATSU website before overhaul


I started by creating a simple web diagram of the websites structure, I knew I wanted to split up the website into a few pages rather than one because their was so much content to display. Afterwards I put together some mockups in Adobe XD using assets from the current website to get a feel for the layouts of each page in both desktop and mobile formats. I presented the mockups to my colleagues in the IATSU Executive Committee for critique, their response was surprisingly positive and I was able to jump into actual development a lot quicker than I anticipated.

Lastly it was just a matter of coding the pages, gathering images, and compiling the body content, the last of which included reworking old content (About IATSU, Past Events) and getting bios from the other Executive Committee members.

Mockups for each page - desktop & mobile


Here you can see the clear difference between the mobile presentation of the old website versus my overhauled update, I also recommend looking at the full versions of both sites to experience the functionality differences for yourself.


I learned a lot of new technical stuff while making this site and I really enjoyed the whole process. Seeing the mockups become fully fledged functional webpages representing IATSU feels very rewarding. I think working in the constraints of IATSU’s visual history was a good approach because I had to think outside of my own visual preferences and treat it like IATSU was a client.

Comparison of old and revamped mobile 'About' page