Smith College UI Design

Summary

Smith College was upgrading its Drupal platform and wanted a new component library to revamp the site.

Role: I was the UI/UX designer partnering with UX researchers, front-end developers, and the client web team.

The problem

Smith College was working with a very limiting and rigid site-building platform. They were forced to use custom code to alter components to tell their story, and updates weren’t easy for authors to make. Pulled from stakeholder interviews and a goals workshop, a few of the goals that would apply to the design were to implement storytelling tools to create an exciting content experience, to have a visual design that is fresh and joyful while featuring the campus and its students, and for the site to enable clear communication.

A screenshot of Smith's Homepage before the redesign

The Smith homepage before the redesign.

New homepage. Click/tap on the prototype content to simulate page load. Then, keep clicking or use the arrows to simulate user scroll. If the prototype isn’t loading, use this link.

The solution

After sending out a design survey to gauge their feelings about the current design and what they hoped to achieve with the new one, I delivered an element collage to set the tone for the new site through typography, colors, and component examples. A font from their new branding package struck me as unique with a sophisticated playfulness, so I used it for the heading styles and paired it with a new font optimized for legibility across digital devices for body text. I also expanded on their color palette, reconfiguring shades for accessibility and creating a stepped series where all colors would be visually distinct for color-blind users to inject fun, energy, and boldness into the pages. The aim was to make colors as interchangeable and vibrant as possible to fill the library with flexible, visually dynamic components for content creation.

Sample of part of the element collage for Smith

A piece of the element collage for Smith showing typography and color.

High-fidelity pages with mobile examples to feature the components and the page structure of the separate content types within their new system were sent next. After they provided feedback and updates to the pages were sent, the designs were presented by the Smith team to their board. They were elated that the board was also excited and gave “no kickback whatsoever” to the designs or the direction.

Zoom around in this window or go to the Figma board.

Once approved, the components were broken down for responsive behaviors and sent to front-end for development. As part of the QA process, I tested for visual correctness and how components would respond to different screen sizes. Once components were wired within Drupal, I would ensure the proper guardrails were in place for content authors and remove any extra options that could break the component when put to use.

example of a component breakdown

One component example and its breakpoint behavior.

The result

The Smith team was delighted with the new component library and its slew of variations available for storytelling. The component flexibility and visual dynamism allowed them to fill the site with joy, and improved navigation helped to enable clear communication. The site is live at Smith.edu.