The Free Book Buggie
UX Case Study:

The Story:

The Free Book Buggie is a local non-profit organization that works to promote childhood literacy by being a mobile provider of free books to those who might not otherwise have access to them. In order for TFBB to be awarded sponsorships from local foundations, demonstration of impact is necessary. My team and I proposed a full redesign of their website to showcase their invaluable work to help them gain more partners, increase donations, and continue to engage their volunteers.

 Goals:

  • Strengthen the organization’s ability to reach new users and gain new partnerships

  • Demonstrate TFBB's positive impact on children and families, the community, and the environment in order to achieve grants and increase donations

  • Further engage their volunteers and improve volunteer retention rates

The Process:

Deep Dive:
​My team and I started our design process with a deep information dive of secondary research to gain a more extensive understanding of the non profit space in addition to TFBB's primary users' needs.

Content Audit:
My team and I took in all existing TFBB content in order to see what materials we could leverage in this project.
 

Cognitive Walkthrough:
We conducted a cognitive walkthrough to test the key functions of TFBB's current website. My team and I wanted to gain a deeper understanding of the website's current state.

Competitive Audit:
To obtain comprehension on other relevant offerings in this space, we created an in-depth competitive audit.
 

Contextual Inquiry:
My team and I completed a contextual inquiry to learn what could be improved regarding TFBB's current website's internal tools/processes.

Survey:
My team created a survey to gain insight on why people choose to volunteer and/or donate to inform our design decisions.

Volunteer Event Observation:
My team participated in a volunteer event with TFBB to observe and evaluate their event setup and takedown; volunteer responsibilities; tools in use; and interaction with event attendees.

Test Script:
After achieving a broader understanding of TFBB and their opportunity areas, a test script was carefully crafted in preperation for my team's in-person usability interviews. 
 

In-Person Usability Interviews:
Using our test script, we conducted four in-person usability interviews in order to best understand TFBB's current website, common pain points and opportunity areas from the perspective of potential partners, donors, and volunteers.

image1-7.jpeg

Card Sort:
My teammate and I conducted a card sorting activity with sourced participants to help determine TFBB's new information architecture. 


Synthesis:
Once the research phase of our project was completed and all of our research was well documented, my team and I synthesized our data using an affinity diagram method to detect and group patterns and tie together themes and commonalities. 
The entire research phase of this project informed, validated, and supported our redesign decisions.

Image from iOS (5).jpg

Stakeholder Interview:
After my team completed our raw data synthesis, we did a stakeholder interview to make sure our design goals aligned with that of TFBB's founder.
 

Style Guide:
We produced a style guide to showcase an overview of the recommended color scheme, typography, iconography, and interactive elements we would be using to encapsulate the playful yet professional design of their new website and other outreach materials.
 

Screenflow:
My team and I planned the information architecture of TFBB's new website by creating a simplified screen flow that reduced the original website’s menu options without compromising any of the content.

Screen Shot 2020-02-14 at 12.23.48 PM.pn

Sketched Wireframes:
Considering information hierarchy, key tasks, and expected elements, we began to sketch out some low fidelity wireframes.

Digital Wireframes:
Using our sketched wireframes for reference, my team and I started to build out our high fidelity digital wireframes using Sketch. We focused on content strategy to refine the copy voice, increased scannability, and highlighted key information and call to action.

Interactive Prototype:
Using our digital wireframes and InVision, my team and I began to create our interactive prototype.

A/B testing:
Using the existing TFBB website and our interactive prototype, my team conducted A/B tests to compare the two sites and add refinements as necessary.

Branded Communication E-mail Mockups:
In addition to the website redesign, there was an opportunity to extend the new content and incorporate communication to TFBB’s primary users.

We provided email mockups for branded communications to coincide with user’s engagement with the site and add automation to TFBB's workflow.

Outcome:

Redesign Recommendation Presentation:
Lastly, my team and I had the opportunity to present a walkthrough of this project to our stakeholders, community and colleagues. 
 

Overview:

Full Website Redesign Interactive Prototype:
The Free Book Buggie’s website redesign proves to better communicate TFBB's impact in order to reach their goals. The website redesign is fully interactive and you can view it in its entirety here. 

Design Methods Used:

  • Secondary Research

  • Content Audit

  • Cognitive Walkthrough

  • Competitive Audit

  • Contextual Inquiry

  • Survey

  • In-Person Usability Interviews

  • Card Sort

  • Synthesis

  • Stakeholder Interview

  • Wireframing

  • Prototyping

  • A/B Testing

Software Used:

  • Google Suite


  • Adobe Illustrator


  • Adobe XD


  • Sketch

  • Craft

  • InVision

  • Trello