Yale School of art - Tracy Guinchard

Tracy Guinchard A01170969

MDIA 2540UI/UX Strategy 1

CASESTUDY

Y a l eS c h o o lo f a r ta r t.y a l e .e d u

W

3ART.YALE.EDU CASE STUDY2ART.YALE.EDU CASE STUDY

The website for the Yale School of Art isn’t like most university websites. Most university websites strive to have a clean, impeccable design as a way to represent the quality and prestige of their school and the education they provide. Browsing through other art school websites, it’s clear that art.yale.edu is entirely unique. This is because the website employs a “wiki-style” editing process where anyone (students and faculty) can edit the website to their own desire: change the images, colours, and most of the overall site content, with some limitations so that information remains reliable.

In truth, the idea of a collaborative website that showcases the diversity of voices and ideas within the schools’ community is endearing; a good idea in theory and one that has the potential to be a good idea in practice. However, the result of this collaborative design leaves some important aspects out. For one, there isn’t any, or very little, artwork by the actual students — which is something that could also showcase the diversity amoungst the student body.

This case study aims to identify the key areas where the website can be improved by exploring the existing site, identifying the users who will most likely use art.yale.edu and the kinds of tasks they will try to complete. Then, new design ideas for the website will be presented in the form of paper prototypes, wireframes, and mock-ups. Ultimately, this redesign doesn’t want to strip away from the spirit of the website and create something completely conservative, but rather show another way in which that same spirit and idea can be expressed, in a more user-friendly manner.

Introduction:ABOUT YALE.ART.EDU

While assessing the sites current design, a number of issues present themselves as discussed in the three main pain points: overall design, usability, and a lack of art. Yale School of Art is a very well-known, highly respected and prestigous school. Overall, the school relies on name and reputation — the site itself does not encourage or inspire prospective students, faculty, or donations.

There is of course, the old adage of “if it isn’t broke, don’t fix it.” Ultimately, because of it’s name and reputation, it is doubtful the Yale School of Art is suffering from a lack of donations or student applications because of its site. But that doesn’t mean it couldn’t still be improved.

In terms of bounce rates, users are either spending a great deal of time on the website to find the things they want, or they get frustrated and leave rather quickly.

The website seems to be purely functional at best. Although it’s meant to be celebrated as an expression of diversity and community, it’s unclear how low-res images pulled from Google of artwork (by artists not at the school) and gifs truly express that. This is the biggest key in my redesign: creating a site that more closely aligns with the ideals it claims to represent.

OverallChallenges

S

PA

IN

PO

IN

T

Overall usability is low. Social media is not easily accessible. Additionally, the navigation is not clearly defined. Rather than traditional navigational structures, the pages are presented on individual pages and listed one after the other with commas. Also, important pages such as Study Areas can’t be accessed from the Homepage, and instead can be found on the About page. Links are another issue since they are not marked in any way; they are the same colour as the rest of the text and only change on hover.

The font is small and difficult to read, in part because of the colourful backgrounds which don’t provide much contrast. The website is rather text-heavy as well, which the small font doesn’t help. Finally, there is no search feature, or at least, not one that can be easily found. With poor navigation, not having a search feature only makes it more difficult to find relevant information.

Pain Point #2 — Usability

As an art school, there is very little artwork on the website; a lack of examples of student work. Practically the only “artwork” can be found in the background images, which isn’t artwork created by the students but images most likely found on Google.

Seeing examples of student work would be very inspiring to prospective students, those seeking to make donations, and, as previously stated would be an excellent way to show the schools diversity.

Pain Point #3 — Where is the art?

Although the idea of a website being edited by any of the students, faculty, and staff members is excellent in its intention to create a sense of freedom, creativity, collaboration, and to show the diversity of the student body — overall it creates a chaotic and messy website that can be difficult to navigate and find the appropriate pages. The website doesn’t represent the quality of the school and instruction that is provided. Bright colours that don’t compliment each other, low-quality images, and poor readability are just some issues.

Pain Point #1 — Overall design

Homepage: cluttered design, small text. Navigation button is clearly marked however

Menu expansion: small, lack of margin again making accurate clicking difficult

Study Areas: too much text on the page, bright colours make for an uncomfortable reading experience — not good for accessibility issues

Sitemap: The only place on the website where all of the navigation can be accessed

About the School: navigation isn’t clearly defined, presented consecutively separated by commas. Small text and the ‘pause animations’ buttons blocks part of the text

Homepage footer: Footer navigatin is very hard to see and lacking a margin so only the word can be clicked to work as a link. Low contrast between the text and colour background

4 5ART.YALE.EDU CASE STUDY ART.YALE.EDU CASE STUDY

Despite the lack of design, overall art.yale.edu has a good rating on both Website Grader (87/100) and Nibbler (7.5/10). The site is functional and serves its purpose; more than anything, the greatest issue regarding the website is that is just doesn’t look very good and could have improved usability.

This is reflected in theExperience score on Nibbler which is 5.5. Marketing is low as well, at 5.7 and Popularity at 1.9, suggesting the website isn’t being used very much. The score for Mobile on Website Grader was 30/30 but 3.0 on Nibbler. In this situation, I agree with the Nibbler assessment. The mobile version is responsive and scales appropriately with the applicable screen size, but it deals with the same issues as desktop which are further amplified, such as the smalltext; it’s difficult to read thesmall font and accurately click on links. The lack of link distinction makes this worse.

The website does make good use of headings, page titles, loading times through page requests and page speed, and security. The website has high scores in all these areas. According to Nibbler there are no Analytics in place but this can’t be verified. Finally, SEO is good overall, with proper URLs and each page having a meta description. Currently the website shows on the second page of a Google search so it could still be improved as the meta description itself is weak.

t h i r dp a r t ya n a l y s i s CURRENT

DESIGN

A R T . Y A L E . E D U


After my first assessment of art.yale.edu I began to think about who would be using this website and what tasks they would be trying to accomplish. Ultimately, the Yale School of Art website would be used by a vast array of users from age to gender, education, income, religion, and background. With that in mind, the key types of users

I identified are as follows:

USERS, TASKS, and PERSONA

I then identified the types of tasks these users would be looking to complete while using the site:

• learning about the school and programs offered• applying to the school• scheduling a tour• looking for event and exhibition information• taking art classes• reading news about the school• donating, planned giving, bequests, and making endowment funds• looking for employment as faculty or staff

Taking these types of users and tasks into consideration I chose one which I felt would best allow for exploration of the website. I chose a prospective student and created a persona:

• prospective students• current students• philanthropists

• art lovers & enthusiasts• faculty & staff• job seekers

Jill, a prospective student for the Yale School of Art



Concept Map With a list of users and user tasks in mind, the next step in the design process was to create a concept map. I thought about the navigation of the website, the needs of the website in line with users and the tasks they would try to complete, as well as some more abstract concepts such as collaboration and creativity. This concept map was a way of organizing required content for the site such as the areas of study. Planning the navigation in meant thinking about the way in which the design could express the values of the school. With

a concept map and user persona created, the next step was to create a journey map.

D e s i g nP r o c e s sB e g i n n i n g s


In the first iteration of the journey map, the ideas and opportunities were lacking as well as the overall design aesthetic. In the second iteration,

I worked to improve the design aesthetic by adding more colours to better seperate the sections. I also added quite a bit more pain points, questions, as well as ideas and opportunities. Additionally, I changed the labels on the steps so they were more in context and expanded the overall process. In the final version, I have a post section where Jill finds out she is accepted and is directed to the Current Student page where she is able to learn all about her upcoming time at Yale School of Art. Finally, I added a few points regarding the credibility of the teachers, equipment and facilities since that was an important factor for Jill.

JOURNEY MAP(final version)


Header Header — footer Areas of Study

ContactAbout Program: Graphic Design


Design Process: Paper Prototypes

When beginning the design process I initially thought about the header images on all the pages to be quite large and to show images of student artwork, including the Contact page, as this was something I felt was greatly lacking in the original website design. Perhaps this will be animated or scrollable to show more work. I also wanted the navigation bar to be sticky so it would always be accessible as a user scrolled down the page. Additionally, I wanted the design to be quite “graphic” through the use of typographic elements such as the large numbers, and the use of images throughout the pages. These ideas were further explored using wire frames (next page).


Design Process:WIREFRAMES


Slider for media

Opens to gallery page

Text box expands when tapped

All images are ofStudent work or campus life

Image for each program is also link so users can click anywhere on banner


Design Process: Style Tile


With the overall f r a m e w o r k layed out and journey map complete the next step in

the design process was to think about colours, images, and text — how to bring the concept of the new website to life. Although the current website advertises itself as an expression of community and diversity through the ability to edit the pages as people wish, there is another way to reflect this. Work created by students is an excellent way to express those values.

Design Process Continuation

This, will be the main component of the new design. Large header images all of student work, which would change on a regular process to keep the site fresh. Additionally I chose a bold colour (#fcad37) to stray away from a more conserva-tive design. This color also com-pliments a shade of blue which is reminiscent of Yale University’s blue through which the art school is attached. The website for Yale University is quite conservative and not applicable to an art school so this blue shade provides a nod while still maintaining a separate identity. With the font, I chose Os-


wald and Lato which are sans-serif, and therefore easier to read.

One strength of the old website and a factor of it’s good SEO rating is the use the headings, titles and meta-data. The new design would maintain this. Links will be prop-erly signified by being a different colour than the rest of the text. A new global navigation will be put in place so every page is accessible from any page, making navigating the site and finding relevant infor-mation easier. When accessing the navigation from the hamburger menu, certain links such as Areas of Study will expand to reveal more pages.

Additionally the margin, or the area around links will be increased so users don’t have to tap directly on the text. The footer will contain social media buttons, links and the option to sign-up for newsletters so users can stay on top of events, exhibitions, and news. All of these changes were tested in mobile mock-ups (next page). I have in-cluded the initial design with peer-test feedback and the revised ver-sions with the appropriate changes made.


MobileMock-Upspeer-test results

MobileMock-Upsrevised versions

Revision process: For the revision, I shortened the pages by making the font smaller but still readable, as well as removing some of the white space. I also shortened some sections using links and ‘tap for more’. And, I made sure to implement a sticky header for Invision. Link: https://tracy28029.invisionapp.com/public/share/A610QTWEVU


TRACY GUINCHARDA01170969

MDIA 2540 UI/UX STRATEGY 1Case Study

School of Artyale.art.edu

YALEYALEYALET

he process of redesigning art.yale.edu was a multi-step process that required not only conside-ring the practical and functional aspects of the website, but also more abstract concepts, such as what the website represents. The current site for Yale School of Art is proposed as a collabo-rative effort, where faculty, staff, and students can edit the majority of the content. The result of this is meant to show the diversity of the school’s community. This is a great concept for the website, but ultimately it doesn’t deliver what it promises.What truly shows the diversity of the

school is the work that is being created; this was the cornerstone of the redesign.

My redesign, therefore, aimed to take this idea and create a website that was more functional and had overall greater usability, without losing the eclectic vibe. This was achieved by reorganizing the navigation to a global navigation, so all important pages can be assessed by any page, such as the Areas of Study, which previously could not be accessed from the homepage, except in the footer navigation.

Additionally, spacing was added around headers and links to improve usability. For the existing site, the content itself was well-written, the use of titles and headings, URLs and meta data were all relatively suc-cessful, so not a lot of changes needed to be made in this area. The greatest change came from the overall look and layout of the website to hopefully create a more enjoyable user experience; without veering too bor-ing or conservative, by using a bold orange colour and including several images of student work throughout the website.

Ultimately, this experience helped me to think beyond functionality and usability and consider the val-ues and ideals for a company, and using that as a guiding force. Additionally, spacing was added around head-ers and links to improve usability. For the existing site, the content itself was well-written, the use of titles and headings, URLs and meta data were all relatively successful, so not a lot of changes needed to be made in this area. The greatest change came from the overall look and layout of the website to hopefully create a more enjoyable user experience; without veering too boring or conservative, by using a bold orange colour and including several images of student work throughout the website. Ultimately, this experience helped me to think beyond functionality and usability and consider the values and ideals for a company, and using that as a guiding force.


FINALREFLECTIONS

Yale School of art - Tracy Guinchard

Documents

Transcript of Yale School of art - Tracy Guinchard