For over a decade, in 2,500 libraries and public schools around the country, Scholastic BookFlix has sought to instill a natural pleasure of reading in kids. Through narrative and nonfiction pairing, and compelling puzzles that encourage comprehension and fluency, BookFlix builds a lifelong foundation for learning.
As part of a recent effort to update their full suite of digital offerings, Scholastic engaged Type/Code to lead the redesign of BookFlix to improve the user experience, elevate the user interface, and embrace the opportunities of modern technologies and design patterns with a fully-responsive web application. Doing so had deep implications for the interface system. All assets were redesigned for high-resolution displays, and a responsive grid system was instituted. The once static navigation system was reimagined to work within the new responsive grid, and a contextually adaptable breadcrumb system was put into place to orient users when the navigation was tucked away on smaller screens. The resulting app gives children a well-functioning, breathable space to learn, read, and play.
Following the wider recommendations of many years of independent research in early childhood development, Scholastic has always maintained strict UX and accessibility guidelines for it’s digital products. While the core mechanics of the app provided a strong foundation, many new features in validation, orientation, and reward systems were designed — each of which were carefully considered against research into age-appropriate user limitations. Considerations were taken for dyslexic, colorblind, vision impaired, and hearing impaired users. The resulting typographic system features Castledown by Colophon—a typeface drawn with unique identifiers to combat dyslexia. The color palette, while wide ranging, is primarily used for theming, while important visual targets like buttons and navigation instead leverage contrast of value to stand off against the UI field. Under the hood, templates were carefully structured and labeled to be interpreted fluently by screen readers and other assistive technologies.
BookFlix’s original software contained a beloved mascot whose function was to guide users through the software, offer encouragement, and provide assistance when necessary. However, teacher surveys indicated that kids grew weary of his limited library of audio responses; soon, the mascot was more of a nuisance than a reward. In the new version, Type/Code created a larger family of forest creatures (in collaboration with illustrator Mercy Lomelin) to replace the mascot. These creatures were each given a subset of micro-behaviors to display based on the user’s actions within the software. The resulting experience is much more diverse — different animals may pop up in expected places, layering on delight and celebrating with readers throughout the experience.
BookFlix wasn’t only designed for young learners — a comprehensive resource zone provides educators, librarians, and parents with the tools to help select the right materials for any learning setting. In the new software, this resource zone was completely overhauled.
A wonderful product for this age group.— ComputED GAZETTE
Since its inception, BookFlix has had 300,000,000 stories read. Its robust frontend framework supports a carefully crafted interface that has proven successful in its abilities to keep young readers engaged—a year-long study in 2018 indicated 87 percent of BookFlix readers demonstrated increased reading motivation after using the product. BookFlix was recently awarded Computed Gazette's EDDIE for best reading skills ebook in 2018—and with new titles added every year, continues to inspire young readers across the country.