Enhancing the Digital Experience of Storyworks Magazine

Client

Scholastic

Role

Visual/UI Design
Product Design
Art Direction

Overview

Storyworks is a multi-genre magazine for grades 4-6 that supports ELA standards. Students learn language, writing, and reading skills through captivating stories, engaging videos, and fun activities. There are leveled articles for differentiation, vocabulary slideshows, and ELL support. It's a beautifully rich teaching package with powerful resources. 

See the logged out site: View project
Drawing of puzzle piece

The Problem

As part of a large overhaul into a more modern CMS system, Storyworks needed a revamp. There were no search capabilities, no HTML pages, and a lot of useful content was not discoverable. The design was outdated and not cohesive with the brand, and the sites were not responsive. With the product being print-centric, there was a need to really amplify the digital experience. With increasing competition of digital ed-tech products, we need to continually distinguish ourselves with new features and great content.

Research

Based on user research, we discovered some painpoints for teachers regarding planning and teaching. 
  • Slow wifi connection
  • Lack of funding for the classroom
  • Distracted or unengaged students
  • Lack of time to plan and teach
  • Information overload online
  • Not tech savvy
  • Communication difficulties with parents
  • Paper limits for printing

Goals

We had specific goals in mind to address many of these user painpoints.
  • Create robust HTML pages with new features and engaging multimedia
  • Improve the user experience for use in the classroom 
  • Help teachers save time with content that is easier to access, and flexible to use
  • Create a product more accessible for all
  • Add new features like text-to-speech, bookmarking, digital quizzes and activities 
Drawing of lightbulb

The Solution

My role on this project was to lead the visual design. Throughout the process I worked with editorial and print art directors to ensure that the brand was reflected online. The primary visual goal was an experience that was whimsical, and engaging with little surprises of delight along the way. 
Mood boards for visual design concept

Mood Boards

I started the project by presenting mood boards to the team. This helped to convey the style through imagery, color palette and illustrations. I showed what some of the UI elements might look like. The typography was shown with real content from the stories. 

Storyworks is: Delightful, hand-crafted, filled with wonder, inspirational, captivating, useful

Brand Voice: Whimsical and engaging, but informative
Wireframes for digital product

Prototype

The wireframes were completed offsite by a contractor, whom I worked with throughout the visual design process. The site was centered around the structure of story cards. Each story contained the whole teaching package. It included HTML articles, resources like videos and slideshows, and their lesson plan all within one place. The stories were accessible on each issue page, and within search and topic hubs. The story cards gave a sense of delight through the experience, since the magazine is centered around stories. 
Illustrations for children's magazine

Illustration

I collaborated with illustrator Sebastia Serra to help bring the digital brand to life. I provided art direction while also giving him creative freedom. He created several illustrations that added the delight we were aiming for. 
Note: There are parts of this project that can't be shown yet since it's currently in development

The Final Product

The completed design helped to solve many goals. Before launch, we tested the beta site on teachers and advisors that are current users of the product. These are some of the tasks we asked them to complete:
  • Site Login: Is the experience easy for them?
  • Logged in Homepage: Can they easily locate recent issues? What do they do first?
  • Search: Is it easy and intuitive? How do they use the filters?
  • Story Page: Are they able to quickly locate their resources? What features do they find most useful? What features would they like to see?
  • Topics: Do they browse by topic? Which topics would they most commonly use?
  • Overall: Is the site easy to use? Can they quickly find what they need? What do they think of the new design?

The Results

Overall the sites were a hit with the teachers! Here are the takeaways from the user tests:
  • Teachers were able to search easily and navigate
  • They loved the topics bar for quick access
  • The site was easy to use and they loved the new design
  • The story page toolbar was very useful and accessible
  • They were elated to see all their resources organized in one place
  • The touches of illustration brought a smile to their face
  • They were very excited to start using the sites for the new school year

What's Next?

This product is constantly evolving and we are continually working on enhancements. During this process we are doing the following:
  • Sending surveys out to teachers to learn more about their needs
  • Visiting classrooms to see their day to day and how the product is used
  • Always keeping in mind that time is precious for teachers
  • Finding ways to make their experience easy, nimble, and accessible