ReadingBuddy Original

My Role

Design Lead

Duration

6 months, Feb. 2022 - Jul. 2022

Team Member

Yudi Jia (Product Manager), Yinmiao Li (Researcher), Rachel Pehrsson (Developer)

Advisor

Ken Koedinger, Bruce McLaren, Paulo Carvalho, Timmy Burkhart, Matt Wilcox, Dan Shindell, Wook Jin Jung, Elizabeth Ward

PROJECT OVERVIEW

Scholastic is one of the largest children’s publishers in the world. They challenged us to create a new intervention product extended from the ACTION and SCOPE magazine to support out-of-class learning for striving readers.
‍
As the Design Lead of this project, I ‍guided the team through sessions of ideation, prototyping, usability tests, and iterations and produced high-fidelity prototypes. I also contributed to competitive audits, the design and analysis of interviews and surveys, and insight synthesis during the research.

Our Project Timeline

DESIGN GOAL

From Striving Reader to Thriving Reader

Our product Reading Buddy a tablet-based mobile app that alleviates middle schoolers' reading comprehension problems in independent reading and focuses on their psychological needs.

Virtuous Circle of Our Solution

Key Interfaces

Text Matching

Article Reading

Embeded Check-ins

FEEDBACK & IMPACT

Inspiring prototype wins future internal investment

We presented our final design to the Scholastic team. They are now internalizing it with a potential $5 million business value.

Jump to Design >

BACKGROUND

STARTING WITH "WHY"

It’s ‘Alarming’: Children Are Severely Behind in Reading

In the United States, 1 in 5 students have reading comprehension issues (Forward Together, 2018). This becomes even worse for kids who are transitioning to middle school after experiencing the learning disruptions at home because of the pandemic. Meanwhile, Scholastic is seeking to extend the impact of ACTION and SCOPE magazines. We decided to focus on independent reading scenario to expand the influence of Scholastic magazines.

CHALLENGE

How Might We design an intervention product with content from ACTION and SCOPE to support independent reading for middle school striving readers?

RESEARCH

SUMMARY

Understanding the needs of striving readers from multiple perspectives

We first collaborated with Scholastic in creating a stakeholder map to explore every demographic that plays a role in a striving reader's development. Based on the map, we collected information through primary and secondary resources. The details of our research process and findings can be found here in our

Spring Report.

Data Collection based on Stakeholder Map

RESEARCH FINDINGS

Causes are Complex, Difficulties are Various.

Combining 23 literature review insights, survey results, and interview findings, we found an overwhelming majority of students with learning disabilities, from low-income family, and with difficulty acquiring English are more like perform at the lowest reading levels. Meanwhile, they suffer from various reading difficulties.

(Click to see the detailed descriptions for each learner)

PERSONA

Who are striving readers?

Based on the posts in middle school ELA teachers' group on Reddit and Facebook, 12 in-depth interviews with teachers, I concluded our striving reader features based on their behaviors.

AFFINITY DIAGRAM

Kids share 3 main similar challenges across different reading stages.

We used affinity diagrams to build a collective understanding of users' needs. We employed the strategies of initial coding, clustering, and selective coding to organize our data. For insights generation, we adopted comparative analysis and thematic analysis.

And they are likely to fall into a vicious circle.

Problem 01

Striving readers have little interest to start

Because they do not see the value in reading and cannot find the article that sparks their interests, striving readers lack the motivation to start.

Problem 02

Striving readers tend to lose focus during reading

Behaviorally, they share characteristics of less self-control, proclivity for distraction, and desire to avoid challenges throughout reading tasks.

Problem 03

Striving readers feel psychologically frustrated

Aside from technical problems, they are likely to doubt themselves when encountering challenges after having spent several years reading at grade levels below their peers.

DESIGN IMPLICATION

HMW reframe the current vicious reading experience?

Tying back to design goals and integrating findings from literature review, we envisioned this new interactive and engaging journey:

DESIGN

IDEATION & PRIORITY

Nail down our design ideas

After ideating and generating storyboards, we pivoted our ideas by surveying and interviewing teachers and conducting stakeholder workshops to engage different parties in the evaluation.

After collecting their feedback, we evaluated through an effectiveness-practicability matrix to decide the priority of our features.

Strategy 01

Interest Ignitor: Text Matching with Social Media Features

Strategy 02

Focus Catcher: Embedded Check-in with Targeted Feedback

Strategy 03

Support Provider: Reading Buddy Accompany the Reading Journey

STRATEGY 1

Interest Igniter: Text Matching with Social Media Features

Design Principle

Boost user motivation and lower the difficulty threshold

According to Fogg Behavior Model, core motivators and simplicity drive a behavior. In our case, striving readers are reluctant to start reading as they are lack of certain motivation and ability. To increase their possibility of start reading, we would like to cater to their preferences and make reading actionable.

Version 0

Layout: no action indications

Interactions: understandable but not helpful enough

Iterations

Incorporate social media features and activate interactions

Final Design

Guided Article Choosing

System recommends articles that are likely to interest users

Guide users towards content they like
Salient call-to-action indication
Multi-gesture Navigation

Interactive Components

Multiple social media features encourage users to explore articles before reading

Social features improve article-selecting
Voting components raise users' interest towards guiding question

STRATEGY 2

Focus Catcher: Embedded Check-in with Targeted Feedback

Version 0

User Flow: Text chunks and different levels of scaffoldings

During the process of reading, users will need to answer questions to proceed reading. In this case, users can focus on the given texts. They can click reading buddy for hints. If they answer right, the buddy will cheer users. If they answer wrong, buddy will provide further scaffoldings by asking users to highlight the evidence.

Key Iteration 01

Content Interaction: Chunk texts with continuity

According to literature review and our expert interviews, chunking is an effective scaffolding for striving readers to improve comprehension. To maintain the continuity of chunked texts, I decided to allow users to scroll through texts within the same context and swipe to switch between different parts.

All-scrolling: too much texts could overwhelm users

All-swiping: breaks the continuity

Scroll+Swipe to maintain continuity and chunking

Key Iteration 02

Appropriate navigation: Multi-level progress monitor system

According to expert advice, a clearly segmented progress bar could provide users with a tangible goal. The key is to make it perceptible but not distractive.

No enough info while draws too much attention

Progress bar at bottom is not noticed by users

Information matches the visual complexity & attention

Key Iteration 03

Learner Agency: Guided Highlighting

To employ learner agency, I decided to include a highlighting feature for users to proactively jot down the interesting information.

Users do not know where and what to highlight on without guidance

Users feel overwhelmed by the long instructions for highlighting

Right amount of tips pop up at the beginning according to users' needs

Final Design

Embedded Check-in

Enhance striving readers' reading comprehension and encourage personal reflection

Text Chunking
Check-in Questions
Hints & Feedback

Guided Highlighting

Guide striving readers and encourage closer reading of the content

At-hand Instructions
Multicolor Highlighting

STRATEGY 3

Support Provider: Reading Buddy Accompany the Reading Journey

Version 0

Interactions across all reading stages

Reading Buddy accompany users through all stages of reading by providing users both emotional and technical support to address their frustrations.

Key Iteration 01

The right image

The character design is always a tricky matter that can go either way: right image could bring users with engagement and a friendly environment, while wrong choice may cause an adverse effect. I created a set of characters by considering gender, age, and culture solutions and consulted several experts.

v1: Clifford

Clifford is too childish for middle schoolers, which makes them feel offended

v2: Pikachu

Pikachu becomes more of a decoration during the reading process and distracts users

v3: Brad

Age-appropriate appearance that caters to middle schoolers’ taste

Key Iteration 02

Successful Onboarding

To provide users with a smooth start, I designed 5 onboarding instructions. After 2 rounds of tests, I found the key for effective onboarding is to provide them with vivid and accessible options.

Users feel unengaged and tend to skip the step-by-step instruction

Lack of ways to re-access when they need instructions afterwards

Accessible and illustrative onboarding guidance from reading buddy

Key Iteration 03

Persuasive Language

In designing for education, it is important to use educational language that can encourage users to learn without evoking their reluctance. The key here is to adopt social proof theory and make sure the language is to the point.

Ambiguous questions confuse users

Social proof embedded in lucid language encourages users to share Their thoughts

Final Design

Reading Buddy

A virtual helper that accompanies users through the reading experience

Throughout reading: Constant Emotional Support
Before reading: Onboarding Guidance
During reading: In-time Assistance
After reading: Furthering Questions

LAST BUT NOT LEAST

Inclusive Design

"You can be in the same text but read it very differently. Struggling readers can hear it in audio and then spend time with a smaller passage of written work on the page." --MB, ELA Teacher with 20 years teaching experience

During our testing, we got in touch with some severely dyslexic kids who are struggling with reading without additional support. After interviewing their parents and seeking experts' advice, we found that"text-to-speech" and "customizable reading level & text size" functions would best accommodate these learners.

Final Design

Accessibility Customization

Allow users to adjust the reading level and text size throughout the reading

Easy access at hand
Different reading levels and text size suits users with different needs

Personalized Text-to-Speech

Empower users to start and adjust the speed/progress of reading

Focusing strategy
Controllable speed and progress of speech

KEY TAKEAWAYS

Consider both learners and educators when designing for education

Sometimes what fosters learning is not necessarily what learners necessarily “like”. With the purpose to alleviate reading comprehension problems for middle schoolers, we adopted the strategy of getting insights from educators and testing with kids. In this way, we are able to generate educational insights and avoid delivering eye candy to kids. Meanwhile, going back to kids constantly helps us eliminate our assumptions and tailor our design better to the target users’ tastes.

Engage vulnerable populations through careful research design

Designing for the vulnerable population requires a lot of care during the process. In our case, some kids with severe reading comprehension problems also have other mental issues, such as extreme introversion and lack of confidence. These kids usually do not talk to strangers. To better communicate them during the interviews, we invited people that the kids are familiar (usually their parents) to participate and facilitate us to ask questions. We designed the survey questions related to kids' personal experiences to engage them better. We also used self-disclosure to get familiar with these kids quickly.

As a team: Problem-solving with a joint effort from beginning to end

In this compact 4-people team with members of different skill sets, I learned how to effectively collaborate to achieve a "1+1>2"effect. In the ice-breaking meeting, my proposal to share each member’s working styles helped to find a collaboration mechanism that worked the best for us. By learning everyone’s capabilities and constraints, I aligned with the team on what the team expected from me and what I could assist the team. It also helped me to prioritize the most crucial tasks. Effective communication was also essential to understand the different perspectives and reach a reconciliation when a few disagreements occurred.