OVERVIEW
In 2020 following the death of George Floyd in police custody, the community in Erie, Colorado saw an increase in local participation in the racial justice space.
That year, Being Better Neighbors, a non-profit organization, was established to embrace Erie’s growing diversity and ensure people can live in a welcoming and inclusive town. The Boulder chapter of the NAACP’s Education Committee formed the DEI Collaborative, a group of parent volunteers that served as DEI representatives in their children’s Parent Teacher Organizations in local schools.
?
These local diversity nonprofits were seeking diverse book recommendations to share with schools and the larger local community. Volunteers often had to comb through multiple sites and blogs to find a well rounded selection representing a variety of cultures and identities. This was tedious and it still did not let people know where they could get a copy of the recommended title.
I thought, “What if people could utilize the existing functionality of the local library’s website and library district’s network to access recommendations and diverse books more effectively?”
With familiarity in the problem space and after extensive research, I designed a solution called the Diversity Corner, a concept for an added feature to the High Plains Library District’s website.
RESEARCH
THE WHAT
Objectives
Explore how people find books that interest them.
Understand what prompts people to search for diverse books.
Find out how people currently find diverse book recommendations.
Discover what frustrations people have to accessing titles.
THE HOW
Methodologies
In order to get a clearer picture of how people in the Erie community were accessing titles, I interviewed 5 people that interacted with the High Plains Library District in a variety of ways.
THE WHO
Participants
Occasional library users
Super library users
Librarians
Actively seeking diverse books
Curious about diverse books
Looking for themselves
Looking for their children or students
INTERVIEWS
In speaking with interview participants, some of their needs and goals related to accessing titles featuring diversity and inclusion began to emerge.
ANDREW SAYS
“Even people who are interested, like myself, when I'm trying to look for diverse books, they are hard to find sometimes.”
HE NEEDS
To get recommendations or receive guidance to effectively search for books that highlight diversity & inclusion.
JAYLIN SAYS
“If there isn't a diversity of backgrounds, opinions, experiences, for example, the area we live in is pretty homogenous, then books, movies, documentaries are a way to start to understand other experiences.”
SHE NEEDS
Community awareness and access to books that feature perspectives outside of their own.
SEAN SAYS
“I think it's a big deal, kids need to see themselves in books, You know, if you can see it, you can be it.”
HE NEEDS
To see himself, his children, and his students reflected in reading material.
I consolidated my findings into a representative persona.
PROBLEM
People like Josephine have a hard time finding diverse book recommendations in a central location and understanding where they can get the book.
The overall problem surfaced…
My project goal was to design a feature to increase the accessibility of books that highlight diversity and inclusion for people in the community.
And gave clarity to the project’s focus…
This supports both non-profit volunteers in efficiently curating diverse book recommendations as well as individuals seeking representation in reading or personal education and interest.
IDEATION
Josephine gave grounding and direction to move forward into ideation.
She needs to find books where she and her children see themselves reflected
She wants to independently search for books that feature diversity and inclusion
She needs to have information to help her decide if books have age appropriate content
She finds it frustrating to scour multiple websites and library branches to find books that feature diversity and inclusion
IF
Put her in touch with book recommendations that have diverse characters or perspectives
Help her access the tools to search for titles effectively
Help her clearly filter books by age category
Help her find and access books featuring diversity in a central location
HOW COULD THE LIBRARY
The first step was finding where the feature would live on the HPLD site and then how to present different areas of support to Josephine.
The most logical place for the Diversity feature to live was under “Services” where HPLD listed different programs and resources.
This sketch represented the current way content was presented under other categories on the Services page.
Providing short summaries of the four main areas of focus for the feature gave a quick at-a-glance overview.
An alternate way to display the Advanced Search Tutorial, Diversity Booklists, Diversity Groups, and Diversity Programs.
Finding age appropriate content was a high priority for Josephine when seeking recommendations.
Icons here could direct users to select an age group to explore the booklist best matched for them.
Alternately a pop-up could lead users to make an age selection before viewing the desired booklist.
Breaking the content into categories also gave a quick visual summary of what users could explore.
Josephine wanted to receive more communication about diversity offerings and support in searching for diverse titles independently.
Options for users to stay connected and find out about HPLD diversity programs.
When joining the email list, users can customize their notification preferences.
A first glance at the Advanced Search Tutorial based on the current HPLD design.
My feature would help people like Josephine get recommendations for diverse books and search effectively for them in a central location on the HPLD’s website through the following elements:
DIVERSITY CORNER PAGE
Provides a central location to explore diversity and inclusion offerings at HPLD
ADVANCED SEARCH TUTORIAL
Helps users search effectively for diverse books with multiple criteria
DIVERSITY BOOKLISTS
Makes recommendations available and sorted by age group
CALENDAR OR LISTING
Features diversity programs and events hosted at HPLD
TASK FLOW
This task flow helped users access age appropriate book recommendations.
UI CONSIDERATIONS
I modeled the Diversity Corner page after design patterns on the HPLD site.
I made some adjustments to categorize content that I believed would benefit the mental models of people like Josephine. This was validated in early user testing as a majority preference.
Original HPLD design. Oversized text and content for multiple categories on a single page made an endless scroll experience for users.
Wireframe modeled to match the original HPLD design with clickable links and icons. I decreased the text size, but content remained on a single page.
Updated wireframe with short summaries of categorized content. Buttons replaced previous links or icons for better visibility and a more consistent user experience.
I noticed that the mobile site didn’t have the same functionality of the desktop Advanced Search.
Users were only able to apply limited filters to a Basic Search or the form didn’t fit on their screen. I prioritized this moving forward to redesign for mobile.
The full Advanced Search form for desktop.
Filters were available on the mobile site, but did not have the same functionality as the Advanced Search.
The Advanced Search form did not fit on mobile screens.
EARLY USER TESTING
User testing gave guidance on the format for the Advanced Search Tutorial.
I presented a couple of different versions of the Advanced Search Tutorial in early user testing and settled on a cartoon conversation with a real life example of walking through the Advanced Search feature.
This version highlighted key areas through information icons that opened a pop-up with relevant information.
This version utilized arrows and outlines to lead you through the tutorial.
This version was a majority preference in user testing because it gave context to the tutorial while taking the user through the steps.
In testing, I found that the heading “Diversity Groups” wasn’t descriptive language to users. People could select what type of notifications they wished to receive, however this could be easily integrated into HPLD’s existing newsletter sign up and links could be grouped in the footer.
The “Diversity Groups” category was incorporated into the existing functionality of the HPLD site.
Original placement as a category on the Diversity Corner page
Clicking “Join Group” would lead to a Diversity Groups page.
Here the user could specify what types of information and notifications they would like to receive.
Diversity Groups was removed and instead utilizes the existing site avenues for Email, Socials and Contact.
HI-FIDELITY DESIGN
With a strong handle on user needs and pathways to the Diversity Corner, I moved on to high fidelity design for the desktop screens.
I utilized the existing HPLD design for a seamless integration of the new feature while making a few updates like decreasing the size of font headings to increase access to content on each screen. I also incorporated the category groupings for content that were validated in early user testing.
PROTOTYPE
Finally, I built a mobile prototype which has full functionality of all the feature aspects.
I tested the following tasks to see how people would interact with the Diversity Corner:
You are looking for a diverse book recommendation for your 10 year old child.
You are looking for a Chinese fantasy fiction novel for an adult audience.
The Diversity Corner serves as a one-stop shop for book recommendations, tools to effectively search diverse titles, communication and promotion of diversity events.
Diversity Corner’s first category was Diversity Booklists to provide recommendations of titles by age group.
Scrolling down to the categories: Advanced Search, with a tutorial option, and Diversity Events & Programs.
Scrolling down again users can receive communications through the HPLD email list and socials channels.
Booklists were grouped by age and category giving Josephine valuable information for a friction free experience.
Dividing the booklists by age gave users access to the most relevant content.
New titles were listed as the first category in each booklist.
Scrolling down, users would find categories highlighting diverse characters and seasonal diversity titles.
Scrolling down, finally users would have access to archived lists.
Lists feature cover images, summary, and available formats for each title.
The redesign of the Advanced Search feature for HPLD’s mobile site gave access to the full functionality of the desktop version.
The Basic Search has a link to the Advanced Search and helpful tips.
The Advanced Search Feature also has a link to the associated tutorial.
And finally, the Advanced Search Tutorial, grounded in a real life example, would give Josephine the confidence to search for diverse titles independently with higher success.
Right away users have information on how to exit the tutorial at any time.
A real life example gives context to the tutorial and makes it relatable.
A friendly library staff guides answers questions through the process.
Bold circles and underlines give visual direction to the steps.
TESTING & REVISIONS
Diversity Corner was well received in usability testing with a few minor suggestions to improve discoverability and user support.
Diversity Corner Feature was hard to find under existing navigation
REMEDY
Homepage highlight in the hero section carousel
Renaming “Services” to “Resources & Services” to be more representative of content included
Highlighted in the hero section
Change in navigation language
Users benefited from an extra nudge to navigate the search features when they needed additional support to access titles.
REMEDY
A link to advanced search feature was recommended if user couldn’t find what they were looking for with the basic search
A link to the advanced search tutorial from the advanced search feature as an additional layer of support
Link to Advanced Search
Link to Advanced Search Tutorial
LOOKING BACK
The Diversity Corner was a successful feature addition that helped users like Josephine access diverse books through:
DIVERSITY CORNER PAGE
Central location for users to gain access and awareness of books highlighting diversity and inclusion, publicly available on the local library’s website.
ADVANCED SEARCH TUTORIAL
Redesign of the Advanced Search feature is now available on the mobile website and with a tutorial for an extra layer of support in finding diverse titles.
DIVERSITY BOOKLISTS
Organized by age to help readers of all levels to get recommendations to see themselves reflected in reading or gain a new perspective.
LOOKING FORWARD
The Diversity Corner still has opportunities for growth.
Programs & Events: Developing the “Programs & Events” category on the Diversity Corner page
Expanding Booklists: Adding “Booklists” to HPLD navigation to include genres like “Diversity”
MORE PROJECTS
Redesigning the Arvada Adventist Church’s website to address issues of church engagement and retention especially in youth and young adult populations.
A mobile app concept for moms that streamlines the process of finding and planning hiking meetups with family and friends to support their health & wellness.