IATSU


Website

Interactive Arts & Technology Student Union

iatsu.com


Tools

Adobe XD

HTML5

CSS3


Summary

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).

Homepage
Updated landing page with a swappable banner

Breakdown

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 homepage
Old IATSU website before overhaul

Development

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.

Mockups
Mockups for each page - desktop & mobile

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.


Changes

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.

Mockups
Old IATSU site on mobile
Mockups
Updated IATSU site on mobile


Conclusion

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.


Old homepage