Books for Keeps is a non-profit organization that focuses on investment in early childhood education. They work to end the “Summer Slide,” the learning loss suffered by many children when they are away from school. This disadvantage primarily affects children from low income families due to lack of access to books.
Worked alongside colleagues to conduct research, developed personas, facilitated interviews/testing, and created wireframes.
“When children were younger, they were given books over the summer to read. They would have tests or a report to do on them when they started school. 'If you read 100 books you get this prize'" - Erica (interviews)
Once our initial user interviews were completed, we could construct an affinity diagram from the results. This allowed us to process, sort, and identify critical insights into the information we gained from the users. From there, we generated and consolidated the data related to the product and the problems we wanted to solve.
We conducted heuristic evaluations on the BooksforKeeps website that our persona would need to address their information needs.
Though the site had positive usability ratings in several areas, most of the results came back either poor or inadequate. One of the biggest frustrations was that the current website isn’t mobile-friendly. It’s not necessarily easy to navigate because of the number of pages and content on those pages.
BooksforKeeps.org was created to communicate its mission to foster relationships and encourage volunteerism.
We have observed that the website isn’t mobile-friendly and suffers from a lack of solid organization.
How might we improve the information structure and layout to increase involvement from community stakeholders?
We believe that making the website mobile-friendly and reorganizing it will increase engagement from the community and potential sponsors.
It’s as simple as giving books to children who might otherwise have none. Books for Keeps is anon-profit organization that works to create equal opportunities for children who don’t access books.
Creating a storyboard helped our team communicate our mission for creating the app both internally and externally to shareholders. It helped us address: who was our redesign targeting?Why would a user want to go to our site? It also allowed us to understand the flow of interactions someone might have with the site.
Creating user scenarios creates a reliable narrative to use as a guide. To ideate towards an accurate picture of our user, their world, and how our solution might solve their problems best.
One of the very things observed with users was how overwhelmed they were when they tried to interact with the BooksforKeeps.org navigation. In fact, some tried to navigate the site without having to use the navigation menus.
Our goal was to zero in on how the navigation site was organized, including word selection for the titles, and to study what users’ pain points were. This resulted in reorganized navigation for the site.
The website is text-heavy with tiny fonts. This gives the user an overwhelming and disoriented feeling during navigation through the site. Some users mentioned they would have left the site within minutes due to the issues discussed earlier.
Removing duplicate and nonessential items and reorganizing critical ones will result in a minor clutter navigation system and, therefore, a better, more intuitive user experience.
Based on our stakeholder interview, their website's main objective is to share their mission, first & foremost, so we made sure to add that prominently on our homepage. We've combined what would be most important for a user and the critical insight from our stakeholder interview. The end goal is to obtain donations, volunteers, and sponsors, so we made our "Donation" button in a pop color and visible from every page. We've made it as easy as possible for a user to learn about the organization and get involved if they are inspired.
This step is extremely helpful. It allows one to see a visual layout/roadmap of the user flow, providing the opportunity to think through each step and eliminating the possibly of omitting a step.
To understand the competitive landscape, we conducted a deep-dive analysis of direct and in-direct challengers.
To our surprise, there was more competition than we thought. However, there were opportunities to improve the user’s experience in finding a place to donate and alleviating pain points that the competition missed
Now that we had our initial draft of the app, we needed to build it out to look cohesive. We used Adobe XD to construct our low-fidelity wireframes and a clickable prototype. This step was imperative as it allowed us to come together to brainstorm, design, analyze, and figure out the redesign of Books for Keeps.
Before diving too deep into the site's redesign, we wanted to be sure the direction we were going in would improve the user's experience. It was essential to keep the site professional but also to bring a refreshing left to it.
Many users noted the site’s old branding did not instill trust in the data as the website looked and felt outdated. As a team, we each came up with a mood-board.
The aesthetics of the original website were basic and outdated. At 50% of the interviewed users said they wouldhave opted out of using the site as it felt antiquated and questioned the information's reliability. Creating a new style and brand will breathe life back into thesite, provide better direction, and instill trust for the user again.
After some research into color psychology, we decided to use bright orange color for our buttons.Orange is found to be inviting, warm, and enthusiastic. Orange is an attention-grabbing color that may prompt users to click around the website more than they would if it were a less motivation color. The primary typeface we chose, the title "Fredoka One," is a huge and striking font that we felt depicted a bit of playfulness more closely related to children's books.
After wire-framing and initial usability testing was completed, we started styling the user interface.It was essential to keep it clean, simple, and fun and keep elements of the app similar to those of those popular apps that the users were familiar with. The intent was to eliminate any ample learning curves that come with navigating anew interface.
To my pleasant surprise, the experience was terrific. The group, comprised of highly creative and passionate individuals, was very spirited and opinionated. Instead of this being a negative, it allowed our creativity as a team to thrive.
Looking forward, if I had more time to commit to this project, I would have baked more into the visual design and usability tests—understanding how the color and typography make the website come together. Additionally, I would want to work on the items identified below:
