Work  >  UX / UI  >  Inside Books Project

Responsive Web Design of Local
Non-Profit: Inside Books Project

ROLE:
DURATION:
TOOLS:

UX Researcher, UX/UI Designer, Illustrator

2 and a half weeks (July 2020)

Figma, InVision, Miro, Flowmap, G Suite, Zoom, Photoshop, Trello, Otter.Ai

TEAM:

Team of 4 UX/UI Designers

P3_final.jpg
PROBLEM:

The website on both desktop and mobile for the local non-profit Inside Books Project is unappealing visually and isn’t meeting volunteer retention goals which is causing a lack of trained and available volunteers. We aren't reaching passionate potential users like our User Persona, Lauren.

SOLUTION:

Our solution was to improve the overall website design on desktop and mobile as well as prominently highlight the option to donate and encourage volunteering.

IMPACT:

We hope with the more clear and clean website on both desktop and mobile, users like Lauren are able to easily volunteer and donate books and money to a cause they are passionate about.

IBP.png

Challenge

PROBLEM STATEMENT:

Inside Books Project was designed to achieve literacy access to Texas prison inmates, who currently have limited resources within the prison. We have observed that our site isn’t meeting volunteer retention goals, which is causing a lack of trained and available volunteers. How might we improve both the overall website and the volunteer and donation page so that volunteers like our User Persona, Lauren, feel that they want to spend their time and money helping this organization?

Approach

P3_2.PNG

Heuristic Evaluation

USER RESEARCH:

Our research findings were incredibly informative and led to great iterations. Our interviewees were overwhelmingly mid-twenties to mid-thirties city dwellers who were somewhat involved in their local communities through volunteer participation. Their primary concern was making sure their time and money was not wasted, with almost half preferring to donate items, and a quarter preferring to donate money. When asked if they would consider volunteering on behalf of prison education and library exchanges, we were met with many positive responses!

DEFINITION & SYNTHESIS:

After a few days of interviews and research we were ready to define and synthesize our findings into an actionable plan towards rebuilding the website. We created an empathy map for our persona and began defining her Goals and Needs.

Empathy Map.PNG

Survey Results

Empathy Map

USER PERSONA: Lauren Smith

From our research, we developed a user persona around a woman named Lauren Smith. Lauren is a 27-year-old Pre-K teacher from Austin, TX. She is altruistic, friendly and passionate about volunteering and prison reform, and specifically wants to find an organization to volunteer with that advocates for inmates and supports prison education.

Goals:

  • ​Clear data on the site showing impact of volunteer work

  • Prominent donation button for when she doesn't have the time to donate books or volunteer

  • Easy application process for donation and volunteer opportunities

  • Efficient training for volunteers

Frustrations:

  • Doesn't have much time to volunteer

  • Wants to feel her time is not wasted and the organization is run efficiently

  • Wants transparency in the non-profit she volunteers with so she knows where her money and efforts are going

  • Feels frustrated trying to make an impact on an issue so big

STORYBOARD:

From here, we were able to map out a realistic scenario with Inside Books Project that Lauren would likely go through according to all of our findings and I illustrated the storyboard.  

Storyboard_1.jpg

Lauren wants to find an organization to
volunteer with that supports her passion of
prison education.

Storyboard_4.jpg

Using their simple and easy-to-use website,
Lauren is excited to read testimonials and
signs up for volunteer orientation.

Storyboard_2.jpg

Lauren hears about Inside Books Project
through one of her friends.

Storyboard_5.jpg

Excited to make a difference, she goes to
volunteer orientation and is impressed by how efficiently the organization is run and decides
to volunteer and donate regularly.

Storyboard_3.jpg

She navigates to their website to find more
information about their mission.

Storyboard_6.jpg

Success! Lauren is able to volunteer and loves
writing letters back to inmates with books they
request. She feels she’s making an impact!

ValueProposition.PNG

Value Proposition

IDEATION:

We based our competitor analysis off of similar nonprofit models that exist around the country. We wanted to understand how other nonprofits visually drew-in potential volunteers through how the information was laid out and the overall style of the website’s presentation. Using these findings, we were set to create our site map and plan for the redesign.

I Like, I Wish, What If Brainstorming

PROTOTYPING:

After we completed the definition and ideation stage of our project, we began the prototyping portion of our design process. We started with basic wireframe sketches, pulling the best layout options from each team member's assortment. These set the framework for what would eventually become our high-fidelity prototype.

Sketch.PNG

Mid- and High-Fidelity Prototypes

Low- Fidelity Sketches

style_3.jpg
VISUAL DESIGN:

From the data we gathered in our research phase, we felt confident that users would like to interact with a website that connected them to thematic characteristics of both literature, civic engagement and prison life. The website’s appeal is in its ability to humanize, after all. We chose a monochrome neutral palette with bold orange to highlight key elements.

style_5.jpg
style_4.jpg
style_2.jpg

Style Guide

Results

IBP.png

Mid- to High-Fidelity Prototypes

USER TESTING:

From our user testing we learned that many pages were still text heavy, and through efficient content-chunking we could break up the pages further and therefore make the content easier to digest and navigate for our busy users. From our A/B testing, users unamimously preferred putting the large "Donate" button at the top and center of the screen vs. blending it in with the rest of the navigation. This helps with drawing attention to the website's main goal which is to encourage book and monetary donations.

User Testing

P3_9.jpg

A/B Testing

ITERATIONS:

From past experience we knew that iterations would need to be made in order to successfully provide the best website we could prototype for our users. We began by working on the broad visuals narrowing our focus with each round. Our iterations took place on the most heavily trafficked pages, where users would be clicking on hotspots frequently. These iterations were on the homepages, the donation pages, and the resource guide page. After realizing that much of our mid-fidelity prototype was text-heavy with little room for white space, we sharpened and cleaned up the text to feature spaces with rotating text carousels and additional pages that could break-up the amount of text to two pages. Creating a theme that met the interests of potential volunteers and book lovers was paramount, especially because our site had fewer pages, which meant that we needed to appear visually stimulating in order for users to fully experience each page.

FINAL THOUGHTS:

Though the stakeholders in this redesign project declined to be involved, we felt their passion for the organization’s mission in their website. Once the idea of redesigning a website tailored toward prison education and civic engagement became evident, we spent a majority of our time defining, ideating and iterating our vision for the site’s overall redesign to humanize the work being done by volunteers and contributors. From this process, we gained valuable information as a team on the full design process from conceptualization to delivery.

html_button.gif
FUTURE OPPORTUNITIES:
  • More UI animations

  • Exciting graphics to draw the user in to the Donate and Volunteer options

  • Better ways to highlight and promote social media