Banner.png

RESPONSIVE REDESIGN

THE BRIEF

As part of Jeff Huang's UI/UX class at Brown University, I was tasked with improving the UX and visual design of a website of my choice. I chose the Yale School of Art website.

TIMELINE

2 Weeks

October 2019

TEAM

This was a solo project completed. 

KEY GOAL

Improve the visual and UX design of
the Yale School of
Art website.

BREAKING
DOWN THE PROCESS

The website suffers from many usability issues, such as poor legibility, a lack of hierarchy, conflicting elements, poor affordances, and a generally cluttered interface. 

 

I began the redesign process by creating some Balsamiq wireframes that would greatly improve the usability and structure of the site.

Usability - Wireframes

1) HOMEPAGE

Homepage AI.jpg
Homepage.png

LEFT: Original

RIGHT: Redesigned Wireframe

2) ADMISSIONS

Admissions.png

Original

Redesigned Wireframe

Admissions.png

3) UNDERGRADUATE

Undergraduate.png

Original

Redesigned Wireframe

Undergraduate.png

4) COURSES

Courses.png

Original

Redesigned Wireframe

Undergraduate Courses.png

Usability - User Flow Chart

Flow Chart.png

Usability - Usability Comparison

Usability Comparison.png

Visual Redesign

In addition to various usability issues, I also felt that the website’s visual design could be refined. I redesigned the Admissions page, based on my original wireframe, as an example.

Admissions.png

Original

Visual Redesign Option 1.png

Redesign Option 1

Desktop.png

Redesign Option 2

OVERALL CHANGES

 

In both cases, I wanted to retain the less traditional design style of the original website, while still ensuring that it was readable, easy to digest, and generally had a sense of visual refinement. 

 

The new layout follows a user’s natural scanning pattern - news is at the top, the most important information is in the middle of the page starting on the left, where a user will usually start reading from, additional links are to the right, and then general navigation is at the bottom. Additionally, the colored scrolling bar in the general information section indicates required scrolling in a particular area.

 

OPTION 1

I made the design playful by choosing a condensed, all-caps typeface (Bebas Neue) for the navigation buttons and heading, but I increased its legibility by increasing its tracking and removing the background gradients and images/GIFs, so that there was nothing else distracting from the text. In addition, I used a Gill Sans for the body copy, as it has a modern feel and is very legible.

 

I reduced the color scheme to two colors (which I extracted from the gradient used on the original Admissions page), in addition to black and white, to ensure visual consistency and simplicity. I also created a sense of hierarchy by ensuring that the most important pieces of information were signaled by the more traditional black text on a white background, which makes these sections both more prominent and easier to read.

 

I also improved navigation by creating a loose color-coding scheme: in general, pink type signifies something that can be clicked, and blue type suggests static information (apart from in the page header, where pink suggests the page that the user is currently on, because the website name is static, whereas the page name changes).

OPTION 2

I used the colors from the original gradient, but made the gradient much smoother and removed all the other imagery, colors, and visual clutter. I also retained the playfulness of the original by using a monospaced display font, while using Gill Sans for the body copy to ensure legibility. As with Option 1, I strove for clear hierarchy and color-coding throughout.

FINAL CHOICE

I ended up selecting Option 2 moving forward as I felt it better embodied the spirit of the original design, while still improving upon the navigation and legibility.

FINAL DELIVERABLE

I ultimately built a responsive prototype of the Admissions page using HTML and CSS in order to demonstrate the desktop, mobile, and tablet versions of the website.

Desktop Mockup.png

Desktop

Tablet on Screen Cropped.gif

Tablet

Mobile on Screen Cropped.gif

Mobile

Resizing Demo.gif

Resizing Demo

KEY TAKEAWAYS

This project provided me with an invaluable opportunity to think more carefully about the qualities of effective visual interfaces and user experiences. It also enabled me to hone my responsive web design and HTML/CSS skills.

Like what you see?

Let's chat.