
YALE SCHOOL OF ARTS
Improving University's website for smoother user experience

YALE SCHOOL OF ARTS
Improving University's website for smoother user experience

YALE SCHOOL OF ARTS
Improving University's website for smoother user experience

YALE SCHOOL OF ARTS
Improving University's website for smoother user experience

YALE SCHOOL OF ARTS
Website & Mobile Redesign
THE
CHALLENGE
Yale school of arts is a creative website & associated with Yale University, an ivy league institution. The moment I visited the website, I knew it needed a redesign for better and smoother user experience.
The challenges I could clearly see were...
-
Improper Information architecture(IA)
-
Navigational challenges
-
Typography is hard to read
-
Creativity never felt so cluttered before...
Have a look at the current version of Yale School of arts and I'm sure you'll notice certain things that need to be fixed in addition to the challenges listed above from a UX perspective. This website is a clear experimentation of creativity and has a lot of potential for UX improvements.
The current website can be edited by the all the members and students of Yale School of Arts. However, to display all of this information is a huge challenge! To get things organized in a way that are pleasing and easier to understand for the user, is even more challenging in this case.
-min.png)

ROLE
UI/UX Designer
TOOLS
Adobe XD
TEAM
Individual
DATE
January - March, 2020
METHODS
Brand Research, SEO, Responsive Web and Mobile Design
COURSE
Interactive Information Design - 1
THE UX DESIGN PROCESS

RESEARCH & EMPATHIZE
Brand Discovery:
About Yale School Of Arts:
-
Yale School of Art is an Ivy League school that offers a degree in Master of Fine Arts to graduate students. They offer courses like painting, film making, color theories and provide intense training to artists, painters and designers. They cultivate and appreciate the talents and skills by providing students a design studio, artist type environment and design facilities.
What We Do:
-
Yale School of Art offers graduate degrees in Master of Fine Arts (MFA) in Graphic Design, Painting and Print Making, Photography and Sculpture. It also provides graduate courses in Filmmaking/Video and interdisciplinary workshops for Critical Practice.
Who We Are:
-
Yale School of Art is an Ivy League art school in United States for graduate degrees and certification. It is the best school for Art students who want to take up Art and Design as their full-time career.
Brand Reputation:
Past Brand:
-
Yale School of Visual Arts opened in 1832.
-
Yale school of fine arts was the first institution in the country to offer higher education in Drawing, painting and art history.
-
1959 school of art and architecture became graduate professional school.
-
In 1972, School of Art and School of Architecture became two independent schools with separate deans.
-
Samuel F.B.Morse father of dots-and-dashes, American songwriter and composer Cole Porter, Former President Bill Clinton, Hilary Clinton, Former President George.W.Bush, Actor Meryl Streep, Indra Nooyi CEO of PepsiCo are notable alumni who make Yale a prestigious and Ivy League institution.
Current Brand:
-
Yale school of art is a prestigious Ivy League institution with undergraduate and graduate courses in art.
-
It is fiercely competitive to get a seat in the school of art since there are thousands of applicants and only 65 applicants are selected for the program.
-
Yale school of art is the best school for artistic fame and recognition.
-
Yale school of art offers meaningful connections, conversations and highest level of training in art and design and is best in the country.
Future Brand:
-
Yale School of art will develop new programs, refresh curriculum
-
To provide seamless campus environment and facilities to leaders, innovators, entrepreneurs and pioneers in all fields of society.
-
To provide scholarships in art and design for students with great work irrespective of their financial background.
-
To share Yale’s intellectual assets with the world and create leaders of the future who bring in new levels of art and class.
Target Audiences:
Primary:
-
Primary (60%):
-
Professional art students with degrees in visual/graphic design in USA.
Secondary:
-
Secondary (30%):
-
Smart, hard-working and career-minded students in the field of art and design from all over the world, International students.
Tertiary:
-
Tertiary (10%):
-
Best education professionals like Deans/ Professors/ Coaches/Office/Administrative staff.
NOTE:
There can be donors who would be interested to fund the institution who may not necessarily be the alumni.
High-level Goals:
-
The best art and design students that will make notable contribution in the field of painting, sculpting, print making and design.
-
Get the highest level of faculty who can mold talent to reach new heights.
-
Provide excellent environment and facilities to the faculty and students on campus at all times.
-
Lead the art and design field by example.
-
Strive to be the best art school for higher studies in the country and the world.
Unique Value Proposition (UVP):
-
The number one factor that makes Yale school of art so unique is its Ivy League reputation and it’s the best art school for higher studies in the country. Alumni include Noble Laureates.
-
The number of professional and highly skilled faculty is more than the talented and committed students that helps the students to gain knowledge, perspective and direction from a variety of sources on campus.
-
Scholarship and grants per student is higher at $38,170 as compared to other art schools at $28,538.
-
The on-campus crime rate is 2.11% which compared to other schools is at the lowest.
-
No other art school is affiliated to the history and significance of Yale and to be a part of it is a once in a lifetime opportunity.
Messaging:
Primary (Students in USA):
-
We are Yale school of arts, an Ivy League Institution that pioneers in art and design studies where art comes to life with a blend of highly skilled faculty, immensely talented and committed students. Explore our programs and apply now to see if you are eligible to give flight to your artistic dreams.
Secondary (International students):
-
We are Yale school of arts, an Ivy League Institution that pioneers in art and design studies where art comes to life with a blend of highly skilled faculty, immensely talented and committed students. We offer scholarships to the future art leaders and grant financial aid to exceptional design creators. We support your dreams as much as you do. Be a part of our 300-year-old history and explore our programs to find out what makes you fly!
Tertiary (Faculty):
-
We respect and honor everyone who is a part of our 300-year-old historic institution. Being an Ivy league school, we are looking for dignified professionals who have created history in art and design and lead students by example on campus. To create and manifest is your passion, to make and believe is your motto, every single detail is so important that you can even notice an extra stroke, if that’s you, we would be happy to have you here!
Direct Competitors:
-
Rutgers University
-
Maryland Institute College of Art
-
Virginia Commonwealth University
-
Cranbrook Academy of Art
-
California Institute of the Arts
-
Hunter College
-
City University of New York
-
Massachusetts Institute of Technology
-
Massachusetts College of Art and Design
-
School of the Art Institute of Chicago
-
Rhode Island School of Design (RISD)
-
University of California Los Angeles
-
Columbia University
-
Portland State University
-
Savannah College of Art and Design
-
Pratt Institute School of Art and Design
-
University of Illinois at Urbana-Champaign
-
Pennsylvania Academy of the Fine Arts
Creative Likes:
-
Beautiful Art
-
Clean web design
-
Courses and Student information
-
Seamless navigation and usability
-
Accessible information for first time users
Creative Dislikes and things that will NOT work for this brand:
-
Unconventional website layout
-
Irregular font sizes
-
Hard to read
-
Unclear sections
-
Confusing web pages
-
Cluttered Information Architecture
-
Improper usage of color
-
Lack of consistency
-
Unpleasant to the eyes
Industry No-no:
-
They can’t promote alcoholic beverages like posting photos of their faculty, students and alumni socializing with beer, wine or champagne on their Facebook and Instagram accounts and pages. That would send a wrong signal to their audiences and may affect their Ivy League reputation.
Search Engine Optimization (SEO):
-
For SEO and keyword search, I used tools like SEMrush and "Keywords Everywhere" which is a free Google Chrome extension for more insights related to search volume of this brand, competition level and user's intent.
-
The following keywords define this brand, make it stand out and different and informs their target audience about their current activities.
-
#yale
-
#ivyleague
-
#newhaven
-
#yaleuniversity
-
#connecticut
-
#ct
-
#instagram
-
#newhavenct
-
#yalesmartliving
-
#yalelibrary
-
#yaleschoolofart
-
#design
-
#SoA2022
-
#yaleart
-
#yaleschoolofart150
Social Media Presence:
-
Yale School of Art uses Facebook and Instagram to promote their institution on Social media about their most recent event updates, lecture information, art, designs and activities.
-
Yale School Of Arts is using the right strategy by promoting their brand on these platforms as they are widely popular and used by masses across the globe. One way to enhance their promotions is by boosting their content and campus life by using Paid Ad campaigns (PPC) for more and variety of student talents.
CREATE
Sitemap:
Yale School Of Arts - Sitemap
Lo-Fi Desktop Wireframes:
-
While creating the low fidelity wireframes for Yale School of Arts, I had an idea of how they will look
-
I designed them in a way that they feel artsy but also kept the branding of Yale University in mind
-
The design is heavily dependent on what the school offers in addition to user's actions on the website
-
The overall design of wireframes is to keep it simple, clean & to the point with improved usability
-
Yale School of Arts is an independent website which is also a part of Yale University which shows in the footer design
Style Guide for Desktop Designs :
Hi-Fi Desktop Design Mockups:
Creating a Defined Homepage
Looking at the current Yale School of Arts website, the first challenge was mending the improper information architecture and I did that by...
-
Creating a hero image with text and CTA
-
Placing a functional yet, easy to use Navigation bar
-
Prioritizing website's goal and aligning content accordingly
Result: This helps users to browse everything at a glance and chose to take action as per their choice. They are in control!


Designing Important Sub-Pages
A page that matters to the user needs should have its independent web space. I exactly did that by...
-
Creating a CURRENT STUDENTS sub-page
-
Again, displaying the most important content first followed by general information
-
Using student work and imagery to engage target user's interest
Result: This helps users to understand information better. Images drive user's attention and help them take action, quickly.
Improving Typography & Visual Layout
The current website of Yale school of Arts is hard to read and is stressful to user's eyes. I took that pain point and improved it by...
-
Using a single font - Questrial
-
Increasing and decreasing font size as per importance of content
-
Creating proper line spacing for better readability
Result: This helps users of all age to read, understand and grasp information faster. Using a single font gives consistency and keeps users engaged with content on the website.

Desktop Website Prototype:
Lo-Fi Mobile Wireframes:
-
The low fidelity mobile wireframes for Yale School of Arts are based on desktop website design
-
I designed them in a way that fits and prevents content bleeding on the mobile screen
-
The design focuses on the most important aspects that school offers and vital information for students
-
The overall design of wireframes is to prevent overlapping of content, jumbled UI & crowded text by keeping minimal content, simple CTAs and fast loading usable mobile pages that focus on business goals
Style Guide for Mobile Designs :
Hi-Fi Mobile Design Mockups:
Creating a Seamless UX Across Devices
I designed this website keeping the mobile design in mind and streamlined the UX by...
-
Keeping consistency in the "look & feel"
-
Extending the functionality of website to mobile
-
Ensuring there is continuity of content & data for smooth transition across devices
Result: This helps users to get familiar with design and can retain information easily, across devices.


Making User's Objective a Priority
Unlike the website, mobile space is limited. To optimize that for the user, I did it by...
-
Displaying key offerings, exclusively for mobile
-
Prioritizing content that users will definitely use
-
Clear and tap friendly CTAs for quick action
Result: This helps users to browse content on mobile anywhere, anytime with the same effects as on other devices.
Focusing On The Details
While designing the mobile version, it often becomes difficult to see the bigger picture, literally! But I achieved it by...
-
Improving mobile site loading speed
-
Uploading compressed yet good looking images & videos
-
Designing user & business centric solutions
Result: This helps users to navigate the mobile site without any performance issues and the site loads in less than 3 seconds, leaving the users happy!

Mobile Website Prototype:
Final Conclusions and Reflections:

Modern Web UX Design
The before-and-after design is completely different! I designed this website with modern UX design principles that are based on namely information architecture, typography, usability & business goals.
IMPACT:
90% people said the new website is better and based its credibility purely on its aesthetics.

Exclusive Mobile Design
The new mobile design is minimal with clear and readable typography. It focuses on the user and school's offerings with high quality images, videos & functional CTAs. It has all the secrets that encompasses great Mobile UX.
IMPACT:
67% people in the world can now easily use Yale School of Arts, an Ivy League school, on their mobile phone anywhere, anytime.
1.
I accomplished the challenge of presenting vast amount of content & data in a succinct fashion for improved UX.
2.
I learned various design thinking techniques but one that stood out was Typography. I would love to experiment more of it.
3.
As a UI/UX Designer, I learned that it wasn't just user research & design I focus on, it includes SEO and business goals.
4.
This project validated user-centered design and the next step would be to conduct usability tests and reiterate.
Yale School of Arts Web Design Showcase:
![]() | ![]() | ![]() |
---|---|---|
![]() | ![]() |

Nice job! Can try new font choices and layouts , but it works and it's readable.