Summary
Smith College was upgrading its Drupal platform and wanted a brand-new component library to revamp the site.
Role: Lead UI/UX designer partnering with UX researchers, front-end developers, and the client web team.
Smith College UI Design
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, the design goals 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.
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.
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.
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 dynamic storytelling. The component flexibility and visual dynamism allowed them to fill the site with a sense of joy, and improved navigation helped to enable clear communication.
After launch, accessibility testing improved by 900%, target audience visitors increased by 49%, total engagement time increased by 20%, and user retention increased by 17%. The team lead at Smith said the new design is “getting acclaim from everyone, all the way up to the top of the institution.” The site is live at Smith.edu.
