marayam_edited.jpg

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-1.png
Ideation-1.png

Research

Synthesis

Synthesis-1.png
Design-1.png

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.

 
Website-Screens2.jpg
Website-Screens.jpg

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.

Meet Gary.jpg

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.

FeaturePrioritization.jpg

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.

User Flow.jpg

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.

Design-Studio.jpg

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.

logo redesign.jpg

Low Fidelity Wireframing

We started digitizing our sketches from Design Studio to low fidelity wireframing.

 
Early-wireframing.jpg

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

Paper prototyping.jpg

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.

Mockup-R2K-Form.png
Mockup-R2K-Location.png
Mockup-R2K.png
Mockup-R2K-Account.png
Mockup-R2K-BookPage.png
Mockup-R2K-Notification.png

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