The Imagination Library website is designed to provide users with free high-quality books to young children regardless of family’s income.
Users are unable to learn about and register for the program due to its confusing navigation and a lack of clear purpose and guidance.
We started our website redesign with taking a look at the website. We collected our initial thoughts and conducted a heuristic evaluation of the entire website.
We want to understand how the Imagination Library targets their audience and we want to formulate a proper user research plan to tackle the redesign.
We also want to explore what the competitor market is like for Imagination Library. There are manny national nonprofits that are dedicated to delivering books to children and youth in the US. We want to know their organization's process in approaching families, registering for books, and whether if they provide additional resources to families.
It is clear to us that the Imagination Library should have these following features to be considered a great resource that users would seek out and use as opposed to their competitors:
Initially, our team developed our proto persona, Katie Matthews, a working single mom. She wants to do more bonding activities with her young son, Joe Lee, that will also be enriching to his development. Katie thinks that reading together would be a great activity they can do together, and is actively looking for organizations out there that can provide her with children-friendly and educational books. Katie's personal goals and needs are the qualities we used to initiate our user research.
To tackle our redesign, we decided to do a usability test with a couple of peers with a few tasks in mind. We wanted to see what their initial reaction to the website was and find out what frustrated them.
From our usability test, we found the following insightful findings:
We took our overwhelming data we received in our in person usability test and interview and categorized them into an affinity diagram just to identify exactly what users liked, disliked, and what they wished the website had. This method really jumpstarted our ideation process after collecting our data.
It is clear within our diagram that users want more clarity throughout the website by revamping the information architecture and adding relevant, exciting graphics and images that reflect the audience the organization serves: children.
After assessing our data, we developed our user persona, Katie, to fully understand her pain points and address her needs through our redesign. We still kept Katie has a busy, working mom, looking to enrich her child's early development in reading. Therefore, she is seeking out an organization that can deliver books to her home for her son.
To organize the overwhelming data that we got, we decided to go with the I Like, I Wish, What If method. We all agreed that Imagination Library needed a new UI style guide, as well as a complete reorganization of their information architecture. The team met a stop in the beginning with the registration process. Imagination Library is only available at certain areas in the US, and we had to rethink our method in how we can have a follow-up action to users who are not qualified to register for a book program.
After a 45 minutes brainstorm, we came up with the following impactful features:
The current website has 4 primary navigation buttons, however, information placed underneath each navigation is confusing, excessive, and not user friendly. All of our user interviewers had issues navigating the primary navigation bar. Therefore, we decided to reorganize the IA and show the before and after information architecture.
We simplified the primary navigation bar. As opposed to having excessive tabs, we decided to reorganize information into the secondary navigation under each primary tab and took away the Log-In button, Register button, and Donate button.
Our goal was to redesign the primary navigation with two levels of hierarchy to separate the primary navigation bar and the Call To Action button for Donation in our redesign.
Our next step is to create a user storyboard for Katie. As you can see, Katie Matthews is a busy mother of a young son, whose priority is wanting to spend quality time with him, despite her being a busy working mother-on-the-go. She wants to do a fun activity with her son, but also wants it to be an educational experience that helps with his brain development. Therefore, she wants to read at night with him. Upon researching for resources online, she found Dolly's Read A Long on Youtube and found her foundation, the Imagination Library. Katie wants to register her son to receive free children's books since she does not have the time of the day to research and find children books for him. In the outcome, Katie is able to register her son for books, receive the books, and use Imagination Library as a great resource for her son's literacy skills.
In our initial stage of creating a user flow, we were met with a problem. What flow do we give to users who do not qualify for the book delivery program? The Imagination Library has some serious limitations to the eligibility for the program that affects the user flow.
To be eligible, a person must have:
Since we cannot be sure whether if users will be living in an area close to an Imaginational Library chapter, therefore, we have to keep in mind this limitation and find a simple solution to address this.
Referring back to our user research, we know that our competitors struggle in providing additional digital resources to their audience aside from providing books, and we want to tie in this feature with our users who are ineligible to register for book.
Therefore, our user flow allows users who do not qualify for books to explore digital options, such as downloading a free ebook and to check out Dolly's Read A-long on Youtube.
We wanted to recreate the Style Guide to reflect a color scheme that fits the audience better. The original style guide had darker somber colors, particularly in mahogany red and royal blue. We wanted to emphasize a different feel to the color scheme. Taking inspiration from vintage toys, we want the website to have brighter primary colors and more cartoon sketches to catch the eyes of children and show to older users that this website is meant for children.
Following our UI Style Guide, we want to make sure to redesign the website with a storytelling narrative. After our brainstorm, we decided that we want to incorporate hand drawn graphics into the design to keep up with the vintage toy themes.
Our team want to take our graphics to the next level and use that as literal story book chapters to explain the steps of the registration process in an attractive and appealing way.
We created our low-fidelity prototype with a mobile first approach and went through a round of usability testing to find out what worked and what did not. Our emphasis was to create a story-telling narrative throughout the design. In order to do this, we included the following features:
Following our first usability test, we worked on several rounds of iterations with 2 more sets of usability tests, transforming our low-fidelity wireframe to mid-fidelity and the high-fidelity wireframes.
We fix up the registration process according to our feedbacks. We know that our users are interested in having the registration process be a seamless and easy function. Below are what we concentrated on:
From our mid-fidelity wireframe, we did another round of iteration, this time adding all elements of our Style Guide. Our high-fidelity wireframe was constructed with the following objectives in mind:
With having a responsive design in mind, the Desktop Version was built with a few differences between the desktop version and the mobile version.
We want to showcase the difference between the original Imagination Library and our website redesign. We believe that our redesign makes the website more efficient, functional, and fully identifies to users the purpose of the Imagination Library: a library for children.
Our goal for this project was to improve functionality of the Imagination Library's website. We want it to be as user-friendly as possible for people of any demographics to explore the website and register their family members to get access to free children's books.
For Katie, she was able to look up eligibility to see if her son qualifies for the program, and was able to register him through the website's system to receive books.
The UI direction and style guide that aligns with a “brand” were key to bringing the design together into a cohesive user experience.
Adaptive, or desktop-first, design had its benefits of greater creativity in navigation. However, the on-going process of prototyping & testing reveal the best approach is to do a mobile first design.
Informational Architecture is a key player in transforming the website into a user-friendly website with easy-to-understand navigation that will ensure client retention on the website and increase website traffic.
Besides meeting Dolly, the team would like to:
