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
LEFT: Original
RIGHT: Redesigned Wireframe
2) ADMISSIONS
Original
Redesigned Wireframe
3) UNDERGRADUATE
Original
Redesigned Wireframe
4) COURSES
Original
Redesigned Wireframe
Usability - User Flow Chart
Usability - Usability Comparison
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.
Original
Redesign Option 1
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
Tablet
Mobile
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.