Resume
MSU AAHD Faculty Page
Project Overview
The Challenge
Michigan State's Art, Art History, and Design (AAHD) faculty website page is due for change. It has many lacking features with inconsistent content within each faculty's profile page. The goal of this project was to create a faculty website page that would be more beneficial and useful to students and future students of MSU, and at the same time clean up the look and experience.
My Role
Team effort for lo-fi wireframes
Sole Designer and content manager of Sketch wireframes
Deliverables and Technique
Lo-fi wireframes, hi-fi wireframes, content creation, IA, Sketch
Understanding the Problem
MSU is an outstanding university with an outstanding art program. However, Michigan State's Art, Art History, and Design (AAHD) faculty website doesn't to the full extent reflect MSU's preeminent brand image, and doesn't provide the best user experience possible for potential or future students, current students, faculty, and other visitors.
Current AAHD Faculty Website
AAHD Faculty Home Page
AAHD Faculty Profile Page
Main Issues
Search engine searches for items within the whole MSU website, not specifically for faculty search purposes.
No filtering options to filter for faculty searches.
Some faculty names aren't clickable, allowing no further information available for that faculty member.
Presentation of faculty names is staggered, without a clear grid for alignment purposes.
No faculty headshot image.
Navigation bar on far right offers an odd and uncomfortable design.
Almost every faculty page has different content -offering no uniform or consistent content.
Lo-Fi Wireframes
Collaborating in a team with 3 others, my team sat down together to discuss our individual findings of the main issues on the website that calls for redesign. We discussed and brainstormed content that we as students, the key user group, would like to see on a faculty page that would heighten our experience as students at MSU, and connect students with faculty members in a unique and personable way.
Home Page
With thoughtful design, we redesigned the AAHD Faculty Home Page with the following additions and changes:
Filter by letter of last name
for users who may not remember the last name of a faculty member (like a former professor), but may be able to narrow it down by the 1st letter of the faculty's last name.
Search bar feature
for users to easily locate a faculty member.
Reduce information overload on home page
by simplifying content to a faculty image and name. Further information on faculty member can be found once user clicks on image.
Professional headshot images of faculty members
for users who are visual learners, and may recognize a faculty member only by image rather than
name.
Faculty Profile Page
Next, we wireframed the profile page of faculty members:
Headshot Image
Classes Taught
to familiarize students with what type of classes the professor typically teaches and their realm of interest and knowledge.
Interests
to introduce themselves on a more personable note.
Work
for faculty members to display their art work.
Quick access
to position, contact info, and other relevant information.
Bio
to give more background on faculty member, especially their education background and the path they took.
Publications
to give an opportunity for students to view their research and publications.
Hi-Fi Wireframes
After my team and I sketched our lo-fi wireframes, we branched off to individually create hi-fi wireframes.
I began my work to craft an interactive high fidelity wireframe on Sketch. While I was designing the high fidelity wireframe, using the low fidelity wireframe as a guide, I realized that the way we structured the information architecture of the content on the faculty home page and on the faculty profile page could be organized in a more structured and clean manner. Therefore, I expanded my own design additions and changes to the wireframe design:
My Changes in Hi-Fi Wireframe
-
Filters: I added filtering features on the home page to ensure users are able to locate faculty members based on certain categories. Users are now able to filter their search by faculty last name, by degree program, and by classes the professor teaches.
-
Content: In faculty's profile pages, I changed the content listed next to their profile picture to include the faculty member's position and expertise, location of office and office hours for students, and their email and phone number contact information, as opposed to what my team and I had listed in our low fidelity wireframe: position, office number, email, phone number, website link, and LinkedIn link. I added the faculty member's expertise and their office hours to give students the opportunity to connect with professors in areas they are interested in, and the professor's time frame availability to be able to have individual meetings with students (office hours). I eliminated the website link and LinkedIn link, as a website link may not be applicable to some faculty members, and believe faculty members can choose, instead of be required, to provide their LinkedIn.
-
Tabs: Instead of piling all the faculty member's information on one page, I created tabs within their profile page to provide better structure and organization. Information is sectioned by the tabs: About, Art Work, and Research.
-
Art Work: Because this is the AAHD faculty website, it's important for faculty members to display some of their art work. It allows students to explore the different art pieces their professors have created, and therefore can seek help and guidance on art skills from professors when they see a project that sparks their curiosity and interests. Therefore, within the "Art Work" tab, professors are able to display their pieces, and provide a written statement about each piece.
My Hi-Fi Wireframe Deliverable
I created the hi-fi wireframe on Sketch. Watch the video below as I navigate through my AAHD faculty website wireframe:
Below, you can find the PDF version of each website wireframe page I created.
Lessons Learned
-
The timeline of this project was about 1 week, so therefore didn't allow for any user testing. Therefore, my group members and I put ourselves in rhetorical situations of how a user would navigate through the site, and any pain points that may be present. Because we are part of the key user group, however, creating content that would be of use to students was easier to tackle.
-
Brainstorming with a group to discuss content, layout, and design is one of the most powerful tools of UX design.