Hearatale's Read-A-Story

Hearatale, a company founded by Dr. Walter Evans, has a notable mission to help young children develop critical reading skills. Hearatale currently distributes DVDs and offers literacy apps, which has significantly improved these children’s vocabulary and literary skills. A group of 5 of us were tasked to create a web application for one of Hearatale’s apps, Read-A-Story.

Team
  • Selena Do (UX & Frontend)
  • Sungeun Bae (UX & Frontend)
  • Kush Dabhi (Backend)
  • Robinson McCormick (Backend)
  • Calvin Owens (PM)
Client

Hearatale

Date

Jan 2021 – Ongoing

Role

UX Research, UX/UI Design, 

border-img-hearatale

Understanding The Problem

A significant part of the American population fails to meet basic literacy levels. This problem is rooted in a person’s early education. Today, children have opportunities to learn from interactive technologies that can further their education. Intervening sooner in a child’s development is essential to their future success.

One of the primary user groups for this application is children in Kindergarten and first grade; children in the age range from 5 to 7. One of the key aspects of a child’s development comes from oral communication. We can foster this growth through storytelling. Studies have shown that these experiences for young children help facilitate growth in acquiring language and literacy skills. In fact, it has been noted that one predictor of a child’s reading success in school is related to the number of hours that they have been read to as a child.

Important Reading Statistics
1 %
4th Grade Students at a Proficient reading level
1 %
Students eligible for school lunch program at a basic reading level
Key Findings

eye-icon

Young kids need fun features, like stimulating interactions, sound effects, and animations.

 

repeat-iconChildren can learn words by repeatedly reading stories, which improves speed and confidence.

 

money-iconReward systems excite children by incentivizing progress. It creates a sense of accomplishment.

Research Synthesis

We conducted user research to better understand our target audience. We chose to create a 2.5d sketch to more effectively design for them by: anticipating their needs, desires, goals, expectations, limitations, and ways they will use your product. We mapped out the minimum viable product to determine user stories and ensure that our product converges. Lastly, we came up with user stories and acceptance criteria, which helps us visualize user interaction.

App Ideation & Solution

Because we were short for time, my teammates and I decided to jump into a high-fidelity prototype, which we will later perform evaluations on. Each screen was carefully designed with two groups of people in mind:

1. Our primary target users, Kindergarten and 1st Graders

Our team’s priority lies in the developing the best experience for our target users. We considered the best design choices that are supported by user research.

2. Our client, Dr. Walter Evans.

We wanted to ensure that our client was satisfied with our product. Our team gathered his wishes, and implemented them if they were in our intended audience’s best interest. 

High-Fidelity Prototype Iteration 1
Welcome_Screen-2
Select Story-Sidebar
Quiz
Login copy 2
Login
Story-Sidebar copy
Quiz copy
Teacher's View
Login copy
Story-Unknown-Modal copy
Quiz copy 2
Student
Usability Testing

We conducted a heuristic evaluation on the high-fidelity prototype to discover usability issues. We gathered students and conducted an online session, where we could observe their interaction with our prototype.

Our goals during the evaluation sessions were:

  1. Identify concerns in the user’s experience based on heuristics.
  2. Learn about which features needed change or adaptation to improve usability.
Iterations & Design Decisions
Welcome_Screen-2
Welcome-2
Key Finding #1: Inconsistent Match Between System and Real World

Our evaluators had difficulty finding how to access the starting point of our web app – in this iteration, the start button. They were unable to move forward without the help of our team. We realize that this is a critical problem that needed immediate revision. We had to better clarify how to login, especially since this application is intended for young students who may not have much technical experience.

In the real world, our users, the students, will be given a login code by their teacher. We needed to match our prototype to represent their literal tasks.

Solution

We changed two components in order to minimize confusion. We first revised the text to explicitly state the function of pressing the button. By labeling the button, “Student Login”, students are able to connect their student login code with a student login button. Our second change was a UI change. We decided to make it a primary button style that is more prominent and distinct on the application’s welcome page.

Key Finding #2: Lacking User Control and Freedom &  Flexibility and Efficiency of Use

Our evaluators found the story page to be non-user friendly. Evaluators had a task to return back to the main list of different stories from this screen. They found it difficult to navigate back. They failed to use neither the Bookshelf icon in the navigation bar nor the X icon to return back. This is a serious problem that would prevent users from easily tailoring frequent actions, such as reading different stories. Our evaluators were also unsure about how to navigate within each story.

Solution

We opted to be consistent with typical locations for back buttons. We used a more standard arrow to illustrate the return to bookshelf function. Likewise, we thought that next and previous page buttons were more intuitive for students than our original automatic scroll design since it is a similar action to flipping a real book. 

Additionally, we decided to minimize the appearance of less important features that are not necessary to navigate to from the story screen. We hid this in a hamburger menu. We also decided to better label all buttons, so that students can more confidently and freely move around from screen to screen.

Story-Sidebar copy
Revised-Story1

Final Design

Hearatale’s Read-A-Story is a web application that encourages students to read and develop critical reading skills. The design considers the needs of young children with an engaging interface and rewarding them for each small success they achieve.

 

finaldesign
Figma Prototype

Reflections & Key Takeaways

This project was my first experience that involved working in a team as a UX Designer. It was also my first experience working directly with a client on a real world project. I learned how valuable trust and communication can go long ways in the success of a project. I worked together with my partners to discuss outcomes and possibilities of each design decision. Prior to past projects, I learned to balance business and user needs, all of which are important lessons that I plan to carry into my future projects.

Next Steps

My team and I plan to implement this solution August 2021. We are taking the prototype and developing a working product that Hearatale can use starting January 2022. I will contribute to the frontend designs of our web application using HTML and CSS.

Next Project >
Study Spaces