Selena DoUX Designer
Selena DoHearatale, 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.
Hearatale
Jan 2021 – Dec 2021
UX Research, UX/UI Design
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.
Young kids need fun features, like stimulating interactions, sound effects, and animations.
Children can learn words by repeatedly reading stories, which improves speed and confidence.
Reward systems excite children by incentivizing progress. It creates a sense of accomplishment.
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.
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:
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.
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.
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:
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.
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.
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.
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.
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.
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.