Date
Links
Role
UX Designer
Jan 22 - July 22
Prototype
Story Adventures is a website that help local children find books they might like at their local library. It lets them read ebooks online or check out physical books to pick up later.
The Problem
Getting children to read can be difficult.
Project Overview
The Goal
Design a website that helps children find books that they will be more interested in reading rather than having to read the book to see if they might like it.
Story Adventures
Desktop and Mobile app for young readers
User Research
Interviews
Assumptions and Research
I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research were school aged children who were familiar with using phone apps and their parents who will help them with the checkout process.
This user group confirmed initial assumptions for the need some children have with wanting to read more books.
Pain Points
Children, just like adults, can get overwhelmed by too many choices that are available to them at the locale library.
Children may not know what kind of stories they like to read yet. Giving them fun quizzes and reading quests can help gamify reading.
Children are more familiar with the online world more than ever. Giving them the option to read on their devices when they want helps them read the stories they want wherever and whenever they want. Books are also available for nighttime reading.
Too many choices
Unsure
Online & Offline Reading
Personas
User Journey Maps
Mapping Bill’s user journey revealed how it would be helpful for him to be able to easily recommend new books to his students that have a difficult time finding books they like. It also revealed that him creating a quiz to test that the students actually read their book is impractical if he is going to let his students choose their own books to read. It also revealed that there will need to be a way for him to monitor his students reading so he can give them grades and extra credit points based on their reading activity.
Mapping Casey’s user journey revealed how it would be helpful to provide ways for the user to filter out books he might like so its easier to find recommendations for books he’s actually interested in. It also revealed that he values his friend’s opinions even if they end up not working for him. Additionally, positive reinforcement of the task at hand might help him explore more reading possibilities.
Empathy Maps
Site Map
Positive reinforcement is done by allowing students earn achievement points from their reading and completing quests. They can use these points in the shop to customize their avatars. They can also share their favorite books and activity on their profile. They can also see their classmate’s achievements and they can both cheer each other on by giving each other congrats when that classmate earns achievements, badges, or completes quests or questlines.
Paper Wireframes & Storyboard
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized easy to access rewards and other forms of positive reinforcement like the reading streak.
Paper wireframe screen size variation(s)
I wanted to make sure that the three icons present in the desktop version of the site was still easily accessible as well as show achievements and access to quests on the main screen.
Digital Wireframes
I made sure that the user’s reading streak was a the top of the page to encourage them to read something the day they login. The dashboard shows their current and next quests, a calendar showing the days they did some reading, and achievements from the user as well as their classmates.
Character profile is shown at the top to incentivize wanting to customize the avatar with achievement points gained from reading.
Character profile is shown at the top to incentivize wanting to customize the avatar with achievement points gained from reading.
The user’s reading streak is shown on a calendar. This visually reinforces the reading streak announcement at the top of the user’s dashboard
Digital wireframe screen size variation(s)
The goal of the mobile layout is that the same features would be easy to access regardless on if the user is on a mobile device.
Low-Fidelity Wireframes
Using the paper wireframes, I created a low-fidelity prototype. The primary user flow is viewing achievements, avatar customization, and reading e-books in the app so it could be used in a usability study.
View the Story Adventures low-fidelity prototype
Useability Study
Sharing
Sorting
Adding
Mockups & Changes
Added more general filters that might be more helpful with searches.
Added recommendations based on hearts.
High-fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for reviewing current and upcoming quests and shows the user’s current favorite book for their classmates
View the Story Adventures high-fidelity prototype
Accessibility Considerations
Make sure that all fonts are a readable style and size
Make sure there is enough color contrast for all parts of the site
Allow users to add alt text for any images they upload to the site.
Impact
What I Learned
The website helps reluctant young readers find new stories that they might like.
One quote from peer feedback:
“I like how this makes finding new stories an adventure.”
While designing Story Adventures, I learned that as a project is built out, the more features that you will think of, some essential to the function you are trying to achieve, some not as essential.