Yale School of Arts
Project Overview
Yale school of arts is a website aimed at prospective, current and alumni students as well as caters to faculty. It showcases their courses, student work, alumni events, news happening on campus and various admission processes and details.
My Contribution
UX Research, UX Design, Information Architecture, UI Design
Note to add: I did independently work on this after the semester to enhance some features, deliverables and add more design elements to the project.
Team Members
Individual Project - Pooja Gurudatt
Timeline
3 months
The Problem Statement
Yale School of Arts seeks to enhance its website to facilitate users in efficiently accessing information, navigating web pages, evaluating available courses, and enrolling in their diverse range of arts programs. The website exhibits poor usability with a confusing navigation structure, disorganized information that is not readily accessible, numerous dead-end links, an outdated design, and a lack of both search and navigation systems. User-friendliness is rated at zero
Antique website
Lack of information
Not user centric
Dead links and data
The Objective
To revamp the Yale School of Arts website through an in-depth exploration of its framework, comprehensive research about the university, usability analysis, and information architecture enhancements, resulting in a redesigned layout and navigation system. This project aims to provide the website with a refreshed and modern interface, ultimately increasing web traffic and enrollment to college programs. Our goal is to prioritize user-centric designs, ensuring that the website becomes highly user-friendly and responsive to the needs of its visitors.
Design Process
Discovery
Research
Test
Design
Sneak Peak into the final designs
1. Discovery
-
I completed did a heuristic analysis for the current Yale school of arts website to find out several design mistakes, usability issues and accessibility problems.
-
I also referenced several similarly graded colleges to see what they have to offer that Yale school of arts website lacks and did a comparative note.
-
A deeper website assessment helped me pinpoint all the changes I needed to make and create improvements.
Revamp website
Mobile UX
Collect Data
Retain Users
2. Research
-
I did first round of content assessment to see what I'm working with.
-
Created user personas based on the needs and opportunities I could find during research.
-
Compared some well known university websites and noted features to introduce into Yale website.
-
Once I was able to create an information architecture and sitemap, I tree tested the layout and also did a navigation stress test to better design the UX.
Content Assess
User Research
Competitive Analysis
Testing
Mobile UX
2a. Research - Content Assessment
-
Vintage website with jarring visuals and not apparent navigation system.
-
Search is not present and there is not any structure noticed. No accessibility options.
-
Information unorganized and scattered data for users. User unfriendly. Zero branding. No aesthetics.
2b. Research - User Research
-
Desk research led me to discover the personas of actual students who go to university, the staff who are employed there and potential students.
-
I crafted the personas for each of these users.
-
Based on these personas, I designed the user journey.
2c. Research -Competitive Analysis
3. Site Testing
-
Tree test using "Optimal Workshop" tool with 10 participants. Only 50% efficiency with old website.
-
Based on feedback from the tree test, I redesigned the information architecture to better organize data and information and did card sorting with 2 participants. This resulted in over 90% efficiency!
3. Design
My favorite part of the journey has to be the design phase. I was on a tight schedule of 3 months to present my design ideas and I thought having a prototype will be best to communicate these features to stakeholders.
I gave more importance to redesigning the information, having a search and navigation system, big and bold sections of important data, about page and courses page.
1. Used Figma for wireframes. I contemplated over many versions before settling for the current one shown below.
2. Developed the wireframes further to create the prototype to best showcase my design ideas.
Wireframing
Prototyping
4. Design - Wireframes
The YaleTransformation
Takeaways
-
Navigation and good data structuring can completely make-over a product.
-
Following basic system needs like search and accessibility can improve user experience.
-
Humans want to explore and connect and by providing the correct medium, success is guaranteed!
-
Universities are places of exploration, networking, showcasing talent and skills and gaining knowledge and their products like websites should reflect that.
