The Problem
90% of websites are inaccessible to people with disabilities.
Diverse BookFinder needed to implement a recent rebrand and redesign key website pages while evolving its research tool to better serve a new middle- and high-school audience.
Goals:
Improve sitemap and navigation to improve user experience
Implement new brand guidelines into website visual language
Adhere to WCAG standards.
Colorful Meganavigation
We implemented a full-width mega navigation that integrated new branding assets and typefaces while supporting the addition of newly designed pages.
Benefits:
Meganav now includes contextual descriptions of pages
Primary navigation language organizes pages by function
Homepage
The homepage needed to be condensed and better reflect DBF’s emphasis on support and inclusion while improving clarity around key features. We introduced a structured card system and integrated motion and visual assets to add hierarchy, context, and color to a previously text-heavy page.
Benefits:
Replaced dense text with graphical elements for reduced cognitive load
Homepage length reduced by 60%
New Team Page
The original Teams page lacked hierarchy, was difficult to scan, and could not scale to support new team members and volunteers. We redesigned it with a modular side-navigation system that organizes hundreds of profiles and enables users to quickly browse and access individual biographies.
New Data Page
DBF collects an extensive amount of statistics about the organization of their database, but it was previously limited to the homepage. We opted to flesh this content out into its own dedicated page, as a way to show off their detailed collection of books.
This section showcases two infographics that update to reflect the collection every time a book is added.
Creating Responsive Layouts
We made each frame able to quickly adapt to any screen size from Desktop, Tablet, and Mobile to give our developer the most accurate visualization of the website design. This made communication easier and ensured that our designs would work on any device.
Dev Handoff
Throughout the project, we documented and annotated every detail of the design, organizing files in a structured developer handoff format that included user flows, component states, and responsive breakpoints. Over the 12-week timeline, we collaborated closely with the developer to ensure a smooth, comprehensive final delivery.
Impact
This project strengthened my ability to maintain organized design systems, communicate clearly with clients, and build flexible, scalable layouts. I’m proud of the collaborative effort that brought DBF’s vibrant vision to life and inspired me to continue designing thoughtful, research-driven interfaces.