Yale School of Art Redesign
Website Redesign and Development (HTML & CSS)
INTRODUCTION
Yale School of Art Website is a redesign and development project to manipulate an existing website to make it scalable and functional.
I take on both UX Designer & Front-End Developer roles to reimagine the website in a completely new form.
The goal of this student project is to challenge my HTML & CSS skills to develop a mobile-friendly and responsive web design.
Solo web development project. 3 months (Sept. '24 - Dec. '24).
HTML & CSS, Front-End Development, Visual design, Prototyping & Testing
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?
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.
Final Wireframes
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.
