Yale School of Art Website

Developing the Yale School of Art Website to be accessible

introduction

Yale School of Art Website is a redesign and development project to manipulate an existing website to make it scalable and functional.

my role

Project scope

Solo web development project. 3 months (Sept. '24 - Dec. '24).

skills & tools

HTML & CSS, Front-End Development, Visual design, Prototyping & Testing

Problem Discovery

Current design sacrifices accessibility and functionality for creative experimentation.

Research reveals that the current website exists as an ongoing collaborative experiment in digital publishing and information sharing. As such, all members of the School of Art community have the ability to add new content and pages, and to edit most of the site’s existing content. However, there are outstanding issues in the site such as a lack of accessibility, legibility, and difficulty in navigation. As such, I began this project with a complete redesign in mind, disregarding the current website mission.
‍
This project involved the following processes:

Restructuring the sitemap to guide users with ease across the site
Develop wireframes for a redesigned interface of four pages
Coding the redesign and optimizing it for mobile view

HMW improve the information architecture of the current Yale School of Art website to be user-friendly and accessible?

Our Solution

Clean, organized, and functional information architecture.

Based on the problems identified, I worked towards addressing website issues by implementing appropriate solutions:

Optimize the interface to allow users to navigate the site on both desktop and mobile.
Create better legibility and ease of access across the design.

The website is live on Github with a working navigation (footer navigation only when in a mobile viewport).

The Process

Research & Ideation

By evaluating the existing sitemap, we discover limited navigation and information crowding.

To start the project, I looked into the existing sitemap to address the one of the main problems of navigation.

My findings are as follows:

Too much information is crowded under the "About" tab, making navigation overwhelming.
Combining similar pages would make it easier for users to find relevant information quickly.
Reducing the number of navigation tabs and simplifying labels would improve clarity and usability.

‍

User Storyboarding

Primary user groups would be the prospecting and current students.

This storyboard highlights the importance of being able to navigate through the website to find important dates and information. At this stage, the goal is to visualize the content structuring that would be best suited for all user groups. As Yale School of Art is a graduate school, the main groups would be prospecting undergraduates and current students.

Defining Persona & Goals

“I want to find information quickly to streamline my application prep.”

Jessica Ruth

23, new-grad, proactive

Their goal is to be able to find what they need from the Yale School of Art's website to get started on their application.

Photo by Ryan Hoffman on Unsplash

Project Development

Aligning the design to be representative of Yale's prestigious title.

After reorganizing the sitemap, I developed a design plan for the redesign. One key visual issue in the current design is its failure to reflect Yale’s distinguished reputation. To address this, I referenced Yale’s official website to capture its prestigious and refined tone.

Use the official Yale website style as a guide for the redesign
Create consistency between pages to support users in navigation
Create a clear hierarchy of information to allow for digestible content

I want to be able to navigate through the website intuitively.

There must be a balance between artistic expression and structure.

User Testing

Final Wireframes

Homepage

Secondary Page - Exhibitions

Desktop Mockups

Project Takeaways

Front-end development is a critical skill to learn as a designer.

This was my first project that involved the design and development processes. As I grow as a UX designer, the continued learning of HTML & CSS will become a valuable asset in my skill set as I begin to work in larger scale projects.

‍
Some key takeaways from this project are:

UX Design encompasses a plethora of skills to learn and develop. Coding is a tool to understand the capacity of a design and ensure its feasibility, while user research and testing help refine the experience to meet user needs effectively.
Design to development is a long path. This project challenged my ability to create a strong visual design while understanding my capacity in front-end development. From this experience, I will continue to hone my development skills to meet the same design efforts.

See my other work

Preview of the YEG Startup Community Awards banner.