Loading..

Case Study – Yale Art University​

Project Overview

INTRODUCTION

The primary objective for this report was to choose a website to redesign and improve the user interface and customer experience by suggesting various possible solutions to those issues that were found through the research aspect of the report. I decided to choose Yale University of Art (www.art.yale.edu) to base off my case study report on, as for my initial thoughts of the website, I felt it heavily lacked on the professionalism aspect and interface and it was fairly a struggle to navigate throughout the content of the pages. 

PROJECT INFO

OVERVIEW OF YALE UNIVERSITY

Yale University is a private Ivy League research university in New Haven, Connecticut as it is known to be one of the most prestigious institutions in United States. As their reputation can be at its highest, it does not indicate that their website is UI UX oriented as I discovered that their Yale University of Arts website seemed very unorganized and unprofessional. Keeping in mind of the key aspects to a well built user based website, I decided to partake how i would design their site that would encourage more on its functionality & interface elements.

WEBSITE PREVIEW

PAIN POINTS OF THE SITE

4 major pain points / issues of the site that stand out and are deemed necessary to improve:
 
  1. Site looks very unprofessional and substandard due to half of the screen being displayed with unnecessary animation in the back. The images that are presented are so poorly taken and everything looks so messy and out of place.
  2. Information on the programs heavily lacks on elaborating the entrance requirements, tuition cost or any other significant details. Lacks in visual presentation like videos or images of the program so the page looks vapid and dull.
  3. No search bar which makes it difficult and a hassle for the user to find the information the they are seeking. The concept of any staff or
    student from Yale University having access to the site so they can edit it the way they want to present their creativity is unique however, its not the best choice as the result is not very appealing.
  4. The site does not mention any opportunities or potential jobs that will be provided to the post graduates after the program so users who have a strong desire for a job after graduating wouldn’t bother to check the programs out.

JOURNEY MAP (DRAFT)

On the right side, it displays the first version, essentially the draft of a journey map I designed. The journey map basically details on what a typical user would go through when they first enter the website. The primary audience I depicted for the Yale University website is students who are looking for a prestigious institution that have a strong passion for digital or creative arts based around technology. 

JOURNEY MAP (FINAL VERSION / REVISED)

On the right side, I have my final version, essentially the revised version of the journey map. I had numerous people from my peers to evaluate my journey map and help me come up ideas to improve further. Some of the aspects I revised include, addition of touch points, elaborated further on the pain points at a perspective as a high school student for this particular persona, addition of channels & quotes, and also added a new stage after apply stage. 

PAPER PROTOTYPE

This is a paper prototype, essentially a sketch that I drew out of what my ideal interface of the application would become. I tried to implement a lot of interactivity that is more mobile friendly with more visuals that will be eye catching. 

WIREFRAMES

These are the low fidelity prototype stages where I designed these wireframes on Adobe XD. From the left, I have the home page that displays the general information with various areas that most students would particularly be looking for on the website, and to its right, I have the about page where I display all the necessary information about Yale University and the Arts program it offers etc. Right beside, I have the long listed programs page where it displays every general program the university has to offer along with a small description and view course section that will showcase every course in that particular program area. On to the very right, I have the navigation menu that will toggle when clicked on the left hamburger menu icon. 

STYLE TILE

Yale University brands itself using the yellow and blue colors to polish their aesthetic of the website. So I decided to go with the flow and came up with different shades or blue and yellow that can possibly be used for my high fidelity prototypes and colors for the website. I kept the fonts very simple and a common type which is the Myriad Pro. 

HIGH FIDELITY PROTOTYPES (DRAFT)

Now moving on to the high fidelity prototype portion of this project, this is essentially how my ideal graphics would look for the mobile application of the Yale University of Art would look like. As you can see, I heavily incorporated the yellow and blue colors all around the page to emphasize their identity and tried not to change the site information as much compared to the original website. 

HIGH FIDELITY PROTOTYPE (FINAL VERSION / REVISED)

This is the revised version of the high fidelity prototype that I designed and went through the same exact process as the journey map which was having my peers / classmates to help me find the issues and changes that needed to be made to improve its interface. From the revision process, I changed quite a lot of things from the original as it may not seem to different at first glance but it includes, lowering the opacity of the blue box where the text is labeled “#1 Ranked Art School in the United States” in the home page (far left image), increasing the size of the buttons and text, and images overall to increase the area where the user would interact with, and adding supporting images behind headers for the page titles and programs. There were definitely more changes that were made however, these factors were the dominant ones that I agreed with which in result turned far better and more user friendly than the original.
Scroll to top