Yale School of Arts
Yale School of Arts
Yale School of Arts
Redesigning the Yale School of Arts' website
Redesigning the Yale School of Arts' website
Redesigning the Yale School of Arts' website
REDESIGN
UX RESEARCH
UI DESIGN
Year: 2023
Project Duration: 1 month
My Role: UX Researcher, UX/UI Designer
PROJECT OVERVIEW
PROJECT OVERVIEW
The Yale School of Art's Wiki website, intentionally designed as an experimental platform for collaborative content creation, presents significant usability issues. Its cluttered homepage, distracting aesthetics, and dense, unstructured content hinder user experience, making it challenging for students, graduates, staff, and applicants to access critical information and navigate the site effectively.
The Yale School of Art's Wiki website, intentionally designed as an experimental platform for collaborative content creation, presents significant usability issues. Its cluttered homepage, distracting aesthetics, and dense, unstructured content hinder user experience, making it challenging for students, graduates, staff, and applicants to access critical information and navigate the site effectively.
The Yale School of Art's Wiki website, intentionally designed as an experimental platform for collaborative content creation, presents significant usability issues. Its cluttered homepage, distracting aesthetics, and dense, unstructured content hinder user experience, making it challenging for students, graduates, staff, and applicants to access critical information and navigate the site effectively.
PROJECT GOAL
PROJECT GOAL
The primary goal of this project is to redesign the Yale School of Arts website to enhance its usability, visual appeal, and alignment with the institution's goals and values. The redesigned website aims to provide an improved online experience for its diverse user base, including students, faculty, staff, prospective students, and the broader community.
The primary goal of this project is to redesign the Yale School of Arts website to enhance its usability, visual appeal, and alignment with the institution's goals and values. The redesigned website aims to provide an improved online experience for its diverse user base, including students, faculty, staff, prospective students, and the broader community.
The primary goal of this project is to redesign the Yale School of Arts website to enhance its usability, visual appeal, and alignment with the institution's goals and values. The redesigned website aims to provide an improved online experience for its diverse user base, including students, faculty, staff, prospective students, and the broader community.
Heuristic Evaluation
Heuristic Evaluation
Heuristic Evaluation
Conducting a heuristic evaluation was the initial step in the redesign process for the Yale School of Art's website. By applying Jakob Nielsen's 10 Usability Heuristics, I systematically assessed the site's usability to pinpoint design issues.
Conducting a heuristic evaluation was the initial step in the redesign process for the Yale School of Art's website. By applying Jakob Nielsen's 10 Usability Heuristics, I systematically assessed the site's usability to pinpoint design issues.
Conducting a heuristic evaluation was the initial step in the redesign process for the Yale School of Art's website. By applying Jakob Nielsen's 10 Usability Heuristics, I systematically assessed the site's usability to pinpoint design issues.
Home Page
Home Page
Home Page
Match Between System and The Real World
Match Between System and The Real World
Match Between System and The Real World
The "Match Between System and The Real World" usability heuristic is not effectively adhered to due to the positioning and size of the navigation menu. Typically, users have a mental model of how navigation menus should be structured and where they are located on a web page.
The "Match Between System and The Real World" usability heuristic is not effectively adhered to due to the positioning and size of the navigation menu. Typically, users have a mental model of how navigation menus should be structured and where they are located on a web page.
The "Match Between System and The Real World" usability heuristic is not effectively adhered to due to the positioning and size of the navigation menu. Typically, users have a mental model of how navigation menus should be structured and where they are located on a web page.
The navigation bar's placement on the side of the site is a significant departure from this convention. This non-standard positioning disrupts the users' expectations, making it less intuitive and potentially more challenging for them to find their way around the website.
The navigation bar's placement on the side of the site is a significant departure from this convention. This non-standard positioning disrupts the users' expectations, making it less intuitive and potentially more challenging for them to find their way around the website.
The navigation bar's placement on the side of the site is a significant departure from this convention. This non-standard positioning disrupts the users' expectations, making it less intuitive and potentially more challenging for them to find their way around the website.
The small size of the navigation bar exacerbates the issue, as it reduces the visibility and accessibility of the navigation options. Users may need to invest extra effort in locating and interacting with the navigation elements, which can be frustrating and counter to their real-world expectations of usability.
The small size of the navigation bar exacerbates the issue, as it reduces the visibility and accessibility of the navigation options. Users may need to invest extra effort in locating and interacting with the navigation elements, which can be frustrating and counter to their real-world expectations of usability.
The small size of the navigation bar exacerbates the issue, as it reduces the visibility and accessibility of the navigation options. Users may need to invest extra effort in locating and interacting with the navigation elements, which can be frustrating and counter to their real-world expectations of usability.
Aesthetic and Minimalist Design
Aesthetic and Minimalist Design
Aesthetic and Minimalist Design
The website presents a notable issue with visual inconsistency and a lack of adherence to the "Aesthetic and Minimalist Design" heuristic due to the crowded and continuous background pattern. This visually overwhelming background not only hinders readability but also creates an overall chaotic aesthetic. The constant visual noise from the background pattern competes with the website's content, potentially causing distraction and user disorientation. Addressing this issue by simplifying the background and introducing a more cohesive and user-friendly design can significantly improve the website's overall visual appeal and readability, aligning it with fundamental principles of web design and usability.
The website presents a notable issue with visual inconsistency and a lack of adherence to the "Aesthetic and Minimalist Design" heuristic due to the crowded and continuous background pattern. This visually overwhelming background not only hinders readability but also creates an overall chaotic aesthetic. The constant visual noise from the background pattern competes with the website's content, potentially causing distraction and user disorientation. Addressing this issue by simplifying the background and introducing a more cohesive and user-friendly design can significantly improve the website's overall visual appeal and readability, aligning it with fundamental principles of web design and usability.
The website presents a notable issue with visual inconsistency and a lack of adherence to the "Aesthetic and Minimalist Design" heuristic due to the crowded and continuous background pattern. This visually overwhelming background not only hinders readability but also creates an overall chaotic aesthetic. The constant visual noise from the background pattern competes with the website's content, potentially causing distraction and user disorientation. Addressing this issue by simplifying the background and introducing a more cohesive and user-friendly design can significantly improve the website's overall visual appeal and readability, aligning it with fundamental principles of web design and usability.
Consistency and Standards
Consistency and Standards
Consistency and Standards
There is a notable break from the "Consistency and Standards" usability heuristic by lacking a specific and coherent color palette. The absence of a consistent color scheme can make the website more challenging to read and navigate, causing cognitive dissonance for users. Inconsistent colors can disrupt visual harmony, creating distractions that hinder user engagement and focus. By implementing a standardized color palette, the website can achieve a more coherent and visually appealing design that enhances readability, user experience, and overall aesthetics.
There is a notable break from the "Consistency and Standards" usability heuristic by lacking a specific and coherent color palette. The absence of a consistent color scheme can make the website more challenging to read and navigate, causing cognitive dissonance for users. Inconsistent colors can disrupt visual harmony, creating distractions that hinder user engagement and focus. By implementing a standardized color palette, the website can achieve a more coherent and visually appealing design that enhances readability, user experience, and overall aesthetics.
There is a notable break from the "Consistency and Standards" usability heuristic by lacking a specific and coherent color palette. The absence of a consistent color scheme can make the website more challenging to read and navigate, causing cognitive dissonance for users. Inconsistent colors can disrupt visual harmony, creating distractions that hinder user engagement and focus. By implementing a standardized color palette, the website can achieve a more coherent and visually appealing design that enhances readability, user experience, and overall aesthetics.
Apply To The School Page
Apply To The School Page
Apply To The School Page
On another page, "Apply to the School", we see the same issues as on the home page. As in the home page, having a crowded & continuous background pattern in the creates a chaotic design. The location of the navigation bar is also small on the side of the site, which does not suit the mental model of the users. The lack of a consistent color palette does make navigation and reading difficult.
On another page, "Apply to the School", we see the same issues as on the home page. As in the home page, having a crowded & continuous background pattern in the creates a chaotic design. The location of the navigation bar is also small on the side of the site, which does not suit the mental model of the users. The lack of a consistent color palette does make navigation and reading difficult.
On another page, "Apply to the School", we see the same issues as on the home page. As in the home page, having a crowded & continuous background pattern in the creates a chaotic design. The location of the navigation bar is also small on the side of the site, which does not suit the mental model of the users. The lack of a consistent color palette does make navigation and reading difficult.
User Persona
User Persona
Developing a user persona for the Yale School of Art's website was a pivotal step to humanize and understand the needs of the target audience. Understanding David's motivations and pain points allowed for a more empathetic and tailored design strategy, ensuring that the renewed website would reflect the real experiences and expectations of potential users.
Developing a user persona for the Yale School of Art's website was a pivotal step to humanize and understand the needs of the target audience. Understanding David's motivations and pain points allowed for a more empathetic and tailored design strategy, ensuring that the renewed website would reflect the real experiences and expectations of potential users.
Developing a user persona for the Yale School of Art's website was a pivotal step to humanize and understand the needs of the target audience. Understanding David's motivations and pain points allowed for a more empathetic and tailored design strategy, ensuring that the renewed website would reflect the real experiences and expectations of potential users.
Click on the image to see full size
User Journey map
User Journey map
Creating a user journey map allowed me to tell a cohesive story of the user experience, from initial exploration to program discovery, financial considerations, and the application process. This visual narrative connected seamlessly with my prior user persona creation, grounding my design decisions in the real-world needs and emotions of users like "David".
Creating a user journey map allowed me to tell a cohesive story of the user experience, from initial exploration to program discovery, financial considerations, and the application process. This visual narrative connected seamlessly with my prior user persona creation, grounding my design decisions in the real-world needs and emotions of users like "David".
Creating a user journey map allowed me to tell a cohesive story of the user experience, from initial exploration to program discovery, financial considerations, and the application process. This visual narrative connected seamlessly with my prior user persona creation, grounding my design decisions in the real-world needs and emotions of users like "David".
Click on the image to see full size
Information Architecture
Information Architecture
After conducting a heuristic evaluation, creating a user persona and a user journey map, I recognize that there is a need for a solid foundation before diving into the design details. By creating an information architecture with a clear structure and hierarchy, I aimed to address issues identified in the heuristic evaluation and provide a more user-friendly platform.
After conducting a heuristic evaluation, creating a user persona and a user journey map, I recognize that there is a need for a solid foundation before diving into the design details. By creating an information architecture with a clear structure and hierarchy, I aimed to address issues identified in the heuristic evaluation and provide a more user-friendly platform.
After conducting a heuristic evaluation, creating a user persona and a user journey map, I recognize that there is a need for a solid foundation before diving into the design details. By creating an information architecture with a clear structure and hierarchy, I aimed to address issues identified in the heuristic evaluation and provide a more user-friendly platform.
Click on the image to see full size
design systems
design systems
In the design system phase, I incorporated Yale University's colors for a touch of institutional continuity. The chosen Verdana typeface, a humanist sans-serif known for its readability on digital screens, aligns with contemporary web design standards. The palette and typeface blend tradition with modern usability, providing a visually cohesive and user-friendly experience on the Yale School of Art's website.
In the design system phase, I incorporated Yale University's colors for a touch of institutional continuity. The chosen Verdana typeface, a humanist sans-serif known for its readability on digital screens, aligns with contemporary web design standards. The palette and typeface blend tradition with modern usability, providing a visually cohesive and user-friendly experience on the Yale School of Art's website.
In the design system phase, I incorporated Yale University's colors for a touch of institutional continuity. The chosen Verdana typeface, a humanist sans-serif known for its readability on digital screens, aligns with contemporary web design standards. The palette and typeface blend tradition with modern usability, providing a visually cohesive and user-friendly experience on the Yale School of Art's website.
final design
final design
Thanks!
Thank you so much for your time for reviewing my portfolio :)
Thanks!
Thank you so much for your time for reviewing my portfolio :)
Thanks!
Thank you so much for your time for reviewing my portfolio :)