In my third year as UAB IT's web developer, I had the great opportunity to make sweeping changes to the design and structure of the IT website. As we began a deeper dive into the website's architecture than we ever had, we found years of technical debt, patchwork solutions, and poor organization.
Reorganization §
The primary problem with the website's user experience was the lack of navigation to guide the user around the website. However, the lack of a navigation system was only a symptom of the underlying chaos that was the page organization on the back end.
To tackle this problem, I began with a site map. The site map is a great tool to show stakeholders the problem in a visual way, and show a marked improvement. After evaluating and taking inventory of each of the website's 120 pages, we began to reorganize and restructure content.
Dealing with technical debt §
One of the most difficult problems was the website's media folder. All images and documents were stored in the root media folder which totaled 2.32GB. Aside from disk space, this made a huge impact on the image picker in the WYSIWYG editor which would cause it to freeze for over a minute each time it was opened.
In the end, we decided that it would be easier to rebuild the website from the ground up - following new standards for development - to ensure consistency in the future. After rebuilding the website, we had a clear folder structure, and had reduced the media disk usage down to 77.2MB - a huge win for performance.
User focused design §
After we solved the website's technical problems, we turned our attention to the aspect of design. After several months of UX research, I presented several new mockups and the beginning of a design system for the website going forward. The new design was focused on intentional use of white space, thoughtful use of color, and clear typographical hierarchy. The final designs and illustrations were a collaborative effort involving our project manager Jessika Reed, graphic designer MJ Moon, and myself.
Maintainability §
To ensure the maintainability of the structure and design of the website, my team and I created a comprehensive design system and documentation website that outlined core design philosophy, UI components, content strategy, organization, and naming conventions.
Outcomes §
After a year of research, development, and countless revisions, the new website launched with overwhelmingly positive feedback. Our website audits are also seeing massive improvements to UX, accessibility, and performance. Due to the new design system and clearly structured backend, it has become much easier to design and launch a new webpage, cutting development time in half.