Rethinking the UX of the most-visited art history resource in the world

C&G partnered with the team at Smarthistory, a free digital platform for art history, to make impactful changes that improved the usability of their website while working within the confines of their current platform.

ROLE
UX/UI

CLIENT
Smarthistory

STUDIO
C&G Partners

Redesigned Menu

Users reported having trouble finding the correct page in the website's mega nav. We redesigned the navigation and removed extensive nesting in the nav to allow people to narrow their selection within each landing page. 

BEFORE

A sea of red with white text posed problems for WGAC accessibility. Nested content made it difficult to locate pages. The separate search bar pushed the tall menu down even further.

AFTER

A warm dark gray behind white text provides excellent color contrast to meet AAA WGAC accessibility. Removing extensive nesting in the nav allows people to narrow their selection within broader landing pages. The search moved to the same bar as the other items menu items.

Updated Textbook Chapter Templates

Smarthistory launched a new initiative to provide free and open access to its extensive content and catalog in the format of a digital textbook. The textbook contains links to pages within the Smarthistory ecosystem, but outside of the textbook itself. I reorganized and formatted the links to enhance the readability of the textbook chapter and increase the clickthrough rate on these additional links. 

BEFORE

1. Chapter header is congested and lacks typographic hierarchy, and has competing clickable links.
2. Sticky sidebar with guiding questions is positioned on the left and distracts from the primary essay
3. Right-aligned essay text appears next to photos and looks more like a photo caption than part of the essay
4. Modules with additional required readings feel like suggestions that take readers away from the essay

AFTER

1. The chapter header has a clear typographic hierarchy with streamlined colors and breathing room. All clickable links are styled in maroon.
2. Sticky sidebar with guiding questions is moved to the right where it no longer distracts readers from the essay
3. Essay text always occupies the full width of the text block, photos stand on their own as a visual break from text
4. Modules with additional readings now have cookied check marks for
readers to track their progress with required reading

Dynamic Search Results Page

By simply embedding a search bar into the search results page, I allowed users to quickly adjust or refine their search terms.

BEFORE
Users said the search functionality was particularly frustrating. Search results pages were not dynamic, and there was no way to adjust your search input without retyping into the navigation search bar.