art department faculty redesign

During the first half of my senior year of college before the COVID-19 outbreak, I had the wonderful opportunity to learn from Dr. Zachary Kaiser in the final rendition of Prototyping Experience Architecture at MSU. In the class, we spent a lot of time discussing different tools and resources that can make prototyping projects, hardware and websites so much more effective in storytelling.

We were tasked with redesigning the faculty contact pages for the MSU art department’s website. When working on projects like these, I understand how important it is to be pragmatic about consulting the university to edit its current design. I knew MSU’s College of Arts and Letters uses a specific theme in concrete5 that will be unlikely to change, so I wanted to focus more on information architecture than completely turning the color-scheme and more upside-down.

Here you can see an image of what the faculty page looked/looks like before my proposed redesign

I started with a basic wireframe of my proposed information redesign that I based off of researching several other faculty pages from different universities, as well as adding some information that our class discussed we felt was needed (like office hours and classes taught).

I then decided to go a step further and work on the faculty landing page which I felt could benefit from a redesign as well. I felt it was important for all faculty to be recognized by their pictures, as well as adding icons besides their area of expertise to better help colleagues find skillsets they are looking for help with.

Finally in my redesign of Dr. Kaiser’s page, I decided it would be best to condense his information into dropdown menus, and head the page with a rounded image of his headshot so students who may have seen him can put a name to his face. I also removed the weird faculty list on the right of the page and instead added breadcrumbs above the headshot so visitors can re-navigate to the faculty page and to a different professor. I created my wireframes with Adobe XD.