Redesigning the Diverse BookFinder Website
The Diverse BookFinder (DBF), is a comprehensive collection of children's picture books featuring Black and Indigenous people and People of Color. DBF's searchable database is designed for educators, parents, and readers.
As one of the two UI/UX designers rehired for this project, I worked with five Diverse BookFinder stakeholders to implement our previous team's rebranding, as well as redesign several pages of their website. They asked to continue shifting the scope of their research tool to be more in line with their new audience of K-12.
We were asked to create seven responsive pages for desktop, tablet, and mobile viewports as well as update the website navigation over the course of 12 weeks.
Responsibilities
UI/UX Design
Leadership & Design Collaboration
Prototyping
Developer Hand-off
User Research & Journey Mapping
Wireframing
Information Architecture
Client
Collaborators
Timeline
April 2023 - August 2023
Tools
Figma, FigJam, Adobe Creative Cloud
Final Deliverables
The Mega-navigation
The new navigation includes the typeface and branding assets outlined in our branding package, as well as extending into a full-width mega-nav. The navigation has a focus on friendly and inviting vocabulary to invite users to explore the different features. (See "The Process" section below to see our process for designing the user experience of this navigation system.)
DBF's orginal navigation
Screenshot of Mega-navigation Menu
The Homepage
The homepage needed to be condensed and reflect the support and inclusion in DBF's messaging and branding. We created a call-to-action section to add structure as well as adding additional context to some features.
The logo motion graphic (which can be seen by viewing their website) and card resources add much-needed color and imagery to the homepage, which previously had no images.
Side-by-side analysis of the original homepage (left), and new homepage (right)
The Data Page
DBF collects an extensive amount of data regarding their library database, however, the presentation of this data was limited to the homepage. Together with the DBF team we decided to present this crucial data on its own dedicated page.
This section showcases two infographics that update to reflect the collection every time a book is added.
Screenshot of the new data page
The Team Page
DBF's original teams page did not have much hierarchy and was mostly text based. Additionally it was not able to accommodate new team members and volunteers.
The new teams page utilizes a modular side-navigation menu that allows users to quickly sort through the hundreds of team members and quickly open their biographies to learn about them.
Side-by-side analysis of the original teams page (left), and new teams page (right)
The Process & Developer Handoff
Our Timeline
Graphic of Project Timeline
Redesigning The Navigation With Users In Mind
By using pre-existing visitor analytics in combination with input from the DBF stakeholders and web specialist, we were able to determine a navigational layout that is both accessible and visually appealing.
Through six collaborative iterations, (shown below), we determined that a navigation with the primary website features on the top-level navigation with an extending mega-nav would be most efficient for users and allow for the dynamic addition of new features.
We reimagined the vocabulary used in the navigation by replacing unknown words. Technical labels such as "Highlight" and "CAT" were substituted with action words such as "Discover" and "Research" to encourage users to feel invited to explore the website, regardless of their current age or reading level. This also makes the site more digestible for younger audiences.
Click through the slides to see our navigation user flow drafts created in FigJam.
Handing our Figma Files Off To a Developer
Throughout the process, we annotated every minute aspect of our design. We organized our project in a standard dev hand-off format including user flows, button states, and breakpoints for mobile and tablet views. Throughout the 12 weeks, we checked in with DBF's web developer to share progress and collaborate on the optimal handoff technique. For this project, we chose to deliver the files to the developer all at once.
Screenshot of the developer handoff documentation. (Figma)
Designing for Accessibility
Throughout the process, we prioritized making the site accessible for everyone. Thoughtful language, minimal transitions, large text size, and permanent alt-text for images and diagrams were integrated into the design to make Diverse BookFinder easier for everyone that uses it. This effort was supervised by the DBF stakeholders and their expertise in accessible design.
Thank you!