The College of Medicine Website Redesign
This web redesign project is from 2015. At this time we were at the early stages of integrating Material Design into our visual design language. We didn't yet have a solid component library in place but we managed to create a (for the time) visually appealing website.
Goal #1 - Design Language
The first goal with this redesign was to implement a new visual language for our web space. There was uncertainty as to who owned the visual design of the web, so we took this project as an opportunity to exact some degree of ownership.
Our front-end was also in the process of transitioning from native bootstrap to Material Design. Unlike our web applications, we didn't have a Material Design library implemented into our web space so we had to recreate the aesthetic of Material Design without utilizing a front-end library.
Goal #2 - Simplify
Minimal is all rage at this point. Their requirements for the redesign included all the content that existed in their old design (which was a lot), and then some. In their mind, this was an opportunity to get additional content on their page, not remove or update existing content.
To help us convince the college to cut back on content, we created a CRUD map to show all the content that exists for each audience. We used a different sheet of paper for each audience member and a sticky note for each bit of content that exists.
This image shows only a small portion of the CRUD boards we had created. This image shows 6 out of 16 boards that entirely encircled the room.
It's difficult to comprehend the amount of content that exists in a web space. We knew we were speaking to people that had very little web experience. This physical illustration helped us convince them there was a lot of content.
We worked with the department to pull sticky notes from these posters until we were left with only the most critical content. We cut about 80% of their requirements from the homepage.
Designing
After we convinced the department to cut a lot of content and received approval from the marketing team to implement a new design, we got started on our mockups.
Homepage
We didn't implement enough white space as we had initially intended. In the mockup phase we had intentionally added a lot of whitespace. When it came time for the department to review and approve, they kept asking us to remove more and more white space and, for some reason, we complied.
We also wanted to provide a way for the students to interact with the Office of Scholarships and Financial Aid staff. Again, one of their biggest complaints was not knowing who to contact and when. The message center allowed them to have a direct line of communication to staff, and staff could see the student's dashboard to quickly garner what information they needed.
Another cumbersome part of the process for students was knowing what forms they needed to fill out, when to fill them out, and how to submit them. I created a document center to bring all the relevant forms to a single location. Like the rest of the sub-pages, the document center had a lot of information that the user could pour through. The dashboard widget for this page pulled the most important details from this page and prominently displayed it for the student.
Subpage
To ensure that content editors were creating and adding components that all looked consistent, We also had to create a design for every component that was available in our CMS, SharePoint.
Final Thoughts
The initial ask from the college was to add more content to their already cumbersome page. We took this as an opportunity to reinvent their web space and implement a new, simpler visual design.
If you enjoyed this and want to see more UX work, view all blog posts by UX tag.