Reading to Kids
OVERVIEW
Reading to Kids is a grassroots organization dedicated to inspiring underserved children with a love of reading, thereby enriching their lives and opportunities for future success.
There are eight Participating schools in underserved areas. The Reading to Kids events happens every 2nd Saturday of each month. Volunteers read to approximately five to seven kids and work on crafts with them.
Team
Maryam Habibi, Adrian Arriola, Patrick Lin
Role
UX Designer, UI Lead, Research,
Digital Wireframing, Interviews
Project Focus
Designing an app for Reading to Kids website
Platform
Mobile
The Challenge
The stakeholders need more volunteers to sign up, yet they had not updated their website design in 20 years. According to our users, the website is overloaded with information which can make it confusing and discouraging for users who could have been potential volunteers.
Duration
Two Weeks
The Solution
Tools
Miro, Sketch, InVision, Adobe Illustrator, Whiteboard
Design an app to increase community involvement and participation in the Reading to Kids by making it easier to find info and sign up to volunteer.
PROCESS
Research
Synthesis
Ideation
Iterative Design
RESEARCH
Talked to Our Client
We talked to our client to better understand their main goal and pain points for this project. The goal was to get more volunteers to sign up and create an app for parents to have access to information regarding upcoming children’s events.
C&C Analysis
The first step for this project was a comparative and competitive analysis of features that the potential competitive website has. C&C analysis is to understand opportunities and standards.
-
Highlights/Achievements was something that other places are using
-
Large call to action so volunteer can sign up easily
-
Pizza tracker in forms are very common way to break up the form page
-
Using icons instead of writing the information so it’s easier to understand
Task Analysis
As part of the UX research team we completed nine task analyses. We asked our users to go to Reading to Kids website and look for some information regarding their events and signing up to volunteer. Our users had hard time to navigating through the website and complete the signup from.
“There is a lot of duplicate information on the forms, I've found it really confusing to be honest”
Website Screens
Here are sign up to volunteer and form screens from Reading to Kids website.
SYNTHESIS
Affinity Mapping
After our interviews we applied affinity mapping method to the large amount of data that we gathered. We started by writing key insights on sticky notes to identify overarching trends and patterns. We grouped similar comments and insights in order to make sense from the data we got. By doing this we ended up with nine different categories. Here are some of our key findings.
-
Users were frustrated with the amount of information on the website
-
Users were not able to navigate through the website easily
-
Parents could not find the right information on the website
-
The sign up page was too long and discouraged volunteers to sign up
Persona
Based upon our affinity mapping and interviews we developed a persona, Gary Giver wants to get the app to sign up for volunteering and find some information regarding the upcoming event dates and list of books.
Problem Statement
These research findings lead to two major problems: Users who want to volunteer feel overwhelmed with the amount of information on the website and users who experience difficulty signing up.
How might we present information and simplify the sign-up process so that people can give back to the community?
IDEATION
Feature prioritization:
We prioritize our features based on our user’s goals. We mainly focused on features that are low effort and essential for our users such as Sign up to volunteer, Detailed school information, Schedule of books, Volunteer information.
User Flow
Our user flow is for users to sign up to volunteer in our app and and after they get approve, find the closest school to volunteer at.
Design Studio
We conducted design studios for all screens within the app that would alleviate frustrations that users felt during our user research. Below are a few samples of what we created together.
We simplified the App to five tabs to make it easier for the user to navigate: A home page, Map page with each school info, schedule of books for each events, notification and profile page after you sign up. We will have a clear call to action on the home page for volunteers to sign up.
Logo Redesign
Based on some of the feedback that we got from our users, their current logo was outdated and did not feel very inviting. I redesigned it to a cleaner and simpler logo. Using different blue shades helped to give the logo more user-friendly look.
Low Fidelity Wireframing
We started digitizing our sketches from Design Studio to low fidelity wireframing.
ITERATIVE DESIGN
Paper Prototype
We conducted three paper prototyping with target users. They did the testing and gave us some valuable feedback. Here are some of our changes based off of
their feedbacks.
-
Users didn’t wanted to sign up with email before entering the app
-
Reading to Kids mission statement should be on top of the page
We started to design our medium to high fidelity wireframes. We tested our prototype with five more users and made changes after each usability test based on the feedback we got. Here are some of the key findings from our usability test.
-
The icon for the book schedule was not clear for our users
-
The idea of monthly milestone was great to get inspire and volunteer more but users preferred to see it in their profile
-
The last page of our form screen was to review information but it wasn’t clear to our users on how to open each section
-
User’s current location wasn’t clear on the map screen
Hi Fidelity Wireframing
After all the changes we made on our wireframes, we finalized our high fidelity wireframes. Here are some of our high fidelity wireframes for Reading to Kids app.
Here is our clickable prototype
Usability Testing
NEXT STEPS
-
Testing and reiterating the language options
-
Exploring social features within the app such as chat
-
Developing the donation features for other users
-
Additional focus on integrating cross-media content