Summary
Smith College needed to upgrade its site’s CMS and wanted a new look to modernize the site.
Role: Designed a new component library as Lead UI/UX designer while partnering with 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. Updates were difficult for authors to make, and they were forced to insert custom code to alter components to tell their story. 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. See the full before page.
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 reviewing design survey results, I delivered an element collage to set the tone for the new site through typography, colors, and component examples. It included:
- New fonts – a unique heading style with a sophisticated playfulness pulled from their new branding package paired with an open-source font optimized for legibility across digital devices for body text.
- An expanded, accessible color palette – all colors would be visually distinct for color-blind users to inject fun, energy, and boldness into the pages.
- Component examples – showing how the interchangeable, vibrant colors will fill the library with flexible, visually dynamic components for content creation.
A piece of the element collage for Smith showing typography and color.
Next, high-fidelity pages with mobile examples featuring the components and page structures of the separate content types within their new system. The designs received positive feedback from the college board.
Zoom around the desktop prototypes in this window or go to the Figma board.
Components were broken down for pass-off to front-end engineers for development after approval. As part of the QA process, I tested for visual correctness and how components would respond to different screen sizes. I then re-tested components in the CMS to ensure the proper guardrails were in place for content authors and removed any extra authoring 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.
