Yale School of Art — Website Redesign
The purpose of this project was to complete an entire website redesign in 50 hours. This includes specific website research, user research, style guide creation, and design. The website that I chose to redesign in the Yale School of Art website.
This current Yale School of Art website hosts an ongoing, collaborative experiment, where their art students can edit almost anything on the website. This is a unique and interesting idea, however, it was poorly executed and completely ignores the user experience. Users found the information difficult to find and found that the website was too flashy to follow the flow of information.
My goal for this project was to take the current Yale School of Art website and redesign it to be strongly focused on the user experience. I still incorporated the collaborative experiment, without jeopardizing the user experience and their ease of finding the information they need.
View the prototype for the final redesign here.
Step 01: Initial Website Research
Competitive Analysis — Top Competitors
I completed a competitive analysis for three MFA art programs; Rhode Island School of Design, University of California LA, and Columbia University. The details of these analyses can be seen here.
Some of the top competitors of Yale School of Art have simple and clean, yet basic websites. The unique design of the Yale School of Art website stands out above the rest but makes it very confusing to navigate. I will make sure to keep the unique aspects of the website while improving its usability.
I noticed that an easily accessible search bar/icon is important. The website’s competitors tend to showcase school news and events on the homepage instead of showcasing what makes their school unique. Some of the competitors had issues with having clean and effective navigation menus. This is something that I will focus on in the redesign.
Opportunities & Challenges
Opportunities
1. Offer a stronger focus on applying & why the user should choose Yale School of Art over other schools.
2. Provide a positive user experience with easy to find information.
3. Keep the collaborative aspect of the website, but with a better user experience.
Challenges
1. Lack of acceptance towards having a stronger focus on user experience than the collaboration experiment.
2. The collaboration experiment is a unique idea that is poorly executed. Aspects of this experiment will be kept but will have to support the user experience.
Assumptions
• Users find the current site difficult & frustrating to navigate
• Users find the animated backgrounds too distracting
• Users think that the student work examples are overthrown by the overwhelming website design
User Testing — Round 01
The goal for this round of user testing was to put the users through scenarios that would have them exploring the website, then to see what their overall thoughts of the website are.
The details of this round of user testing can be found here.
My biggest takeaway from this first round of user testing is that the information on the Yale School of Art website is not organized efficiently, taking away from the user experience. I also learned that although the graphics are cool and the idea is unique, the design is too chaotic to be able to effectively find specific information.
Step 02: Audience Research
Audience Importance Ranking
1. Students > Prospective > Graduate
2. Students > Current > Graduate
3. Parents
4. Alumni
5. Visitors
6. Donors
User Personas
Redesign Style Guide
The Yale School of Art website does not currently have a style guide or a specific design scheme that they followed, so I created a new one to follow for the redesign.
Navigation Card Sorts
The goal for these card sorts was to figure out how users would sort all of the information on the Yale School of Art website. Since it is currently difficult to find information on the Yale School of Art website, I thought this would help make sure that my redesign was easy to navigate.
The details of the card sorts can be found here.
My biggest takeaway from these card sorts is that users tend to categorize the information into larger categories like finances, events, and different types of people that would visit the site; such as current students, prospective students, and alumni. I also learned that users commonly categorize course/academic information together and information about visiting the school together. With these trends, I now have a good idea of how I can restructure the information on the Yale School of Art website to have it make the most sense to its users.
Website Restructure
I took the information that I learned from the card sorts and applied it to the restructuring of the information on the Yale School of Art website. Now that I knew how the website would be structured, I was able to start designing.
Step 04: Sketches
During the sketching process, I focused on figuring out what components would work together best to portray the original message that Yale School of Art wanted to portray, while also focusing on what designs would be best for the user experience. I knew that your first idea is never your best idea, so I made sure to do multiple sketches for each page to get out better ideas.
User Testing — Round 02
The goal for this round of user testing was to see if users were able to navigate my design by simply using the paper wireframes (sketches) that I created. It is best to know if the user is going to understand your design from the very beginning.
The details of this round of user testing can be found here.
My biggest takeaway from this second round of user testing is that just from the wording that I used in my paper prototypes I was able to get the users to understand that this website is for a school. The only thing the users really thought was missing was the navigation information. I will be adding in the navigation menu and since one of the users didn’t understand why there are two separate calendars for events and exhibitions, I am going to combine the calendars into one.
Step 05: Low-Fi Mockups
The main purpose of designing these low-fi mockups was to bring the sketches to life, while also applying the information that I learned from the previous user test to see how users better responded to these changes.
User Testing — Round 03
The goal for the third round of user testing was to see if the users could better understand the redesign based on the changes that I made from the previous user test, while also seeing what more I could do at this point to improve the user experience.
The details of this round of user testing can be found here.
My biggest takeaway from this round of user testing was that the placement for the monthly newsletter subscriptions was not in the best place for users to easily find. I learned that I should instead use a newsletter subscription banner to make it more easily accessible.
Step 06: Hi-Fi Mockups
Since I had learned from my user testing so far that, in general, my redesign was easy to navigate and to understand the flow of information, I was able to move forward with my design to bring in the colors, typography, and components from the style guide I created in step 03.
User Testing — Round 04
The goal for this final round of user testing was to see how well the website’s user experience has improved through my redesign. To accomplish this, I used the same questions that I asked in my initial user tests on the current Yale School of Art website.
The details of this round of user testing can be found here.
My biggest takeaway from this final round of user testing was that I had accomplished my main goal of this website redesign of taking the information from the original Yale School of Art website and making everything really easy to navigate and find. All of the users thought that the new design was very easy to navigate while still using the original idea of a collaborative website for the Yale School of Art students. The only feedback that I needed to add is adding a hover effect to the menu navigation.
Step 07: Final Website Redesign
The final step for this project was for me to complete my redesign. I added the final changes from information that I received from user testing and from my mentor.
View the prototype for the final website redesign here.
In the end, through user testing, feedback from my mentor, and applying my research findings to my designs, I was able to redesign the Yale School of Art website from a website with a great idea that was poorly executed and confusing to navigate, to a website that let others enjoy the collaborative experiment while keeping the user experience as the main focus.
In this Yale School of Art website redesign, it is now very easy for users to find the information they are looking for, while still enjoying the unique aspect of letting art students collaborate and receive recognition for their work.
