Overview
Ready-to-Read is a system of literacy books for children. The books are organized into levels and offer a simple approach to parents and educators teaching children to read. The multi-brand series has been vetted by educational experts to adhere to current standards, and contains digital assets including activity pages, certificates and learning guides.
Role
While at Simon & Schuster, I led the redesign of the Ready-to-Read website. I created UI solutions, wireframes, and UI specs. As a result of my redesign, the S&S Children’s Marketing group ran a significant ad campaign that has driven a wave of traffic to the site and boosted book sales.
Users & Audience
The Ready-to-Read brand as a whole has an interesting set of target users because while the end product is intended for children, parents and educators make the ultimate decision to consider the system and buy the books. I needed to make the information on the site digestible for the busy adults who browse it, yet appealing to kids, who may be involved in the decision process. Overall, the site needed to feel fun. Learning to read could be a daunting prospect for kids and their caretakers alike, and Ready-to-Read’s purpose is to lend some levity to the process. It was crucial for the website to reflect that.
Discovery & Exploration
When I first joined Simon & Schuster, the Ready-to-Ready site existed as a static desktop page built in Adobe Muse. My job was to bring it up to current web standards and make it more competitive within the literacy education market. In the exploratory phase of this project, I concentrated on analyzing the previous website and resolving as many pain points as possible. The first site had been built about six years prior, and had been modeled after a sell sheet, rendering it obsolete. New content had been aggressively added over the course of its lifespan with little organization, creating an environment that was difficult to navigate, and rife with broken links and comprised with art that displayed poorly on high resolution screens.
I placed emphasis on competitive analysis to decide what features were necessary and how a website focused on children’s material should look in 2018. I focused at the sites of another publishing house’s literacy system, and high-traffic children’s websites like Nick Jr., Sesame Street and PBS Kids.
The imprint came to me with a clear vision of how the homepage to look and what they wanted it to accomplish. They had pared down the homepage content and navigation menu. This left me with some freedom in how I wanted to structure the outstanding information in the remaining pages.
In order to identify and move forward with the overall look of the website as quickly as possible, I iterated through many several fidelity mockups of the homepage, sticking stringently to the basic framework we had laid out in our initial sketch.
Once the imprint was happy with a direction for the homepage, I was given the green light to go ahead and design the rest of the pages. The biggest challenge was finding a way to reorganize the five different levels, ensuring they were always displayed with equal importance. They currently lived on a long, scrollable page, placing the most emphasis onLevel 1 while burying Level 5.
I experimented through sketching different ideas that would allow all information to live at the top of the page.
User Interface Design and Interactions
Using the insights I had gleaned from my competitive analysis, along with feedback the imprint had collected from end users of its old site, I designed an experience to fulfill the key requirements.
The popular childrens’ sites I had looked at relied heavily on bright colors and I wanted to do the same with Ready-to-Read. Focusing on the leveled branding colors (purple, blue, red, green and yellow), I updated that palette to modern hues and used them generously throughout the site. The imprint stressed the importance of some elements remaining consistent with the previous website, one of which being the star motif, which I incorporated as a lightweight vector background pattern, the main navigation, and icons for the levels. The font Futura was also an important asset to their initial branding, and its many weights and styles made it easy for me to use for all typographic needs.
A dedicated levels introduction on the homepage made a big improvement upon the same section on the previous website. Instead of a single graphic that didn’t seem immediately clickable, I used separate UI cards with clear calls to action to encourage click-through.
Employing some subtle rollovers on the homepage added a playfulness to the overall tone of the site without being distracting.
For the levels page, I ended up going with a tabbed menu that allowed all five levels to exist in on the same screen with minimal scrolling. Each level link on the homepage clicked through to each corresponding tab, creating a streamlined experience from one screen to the next. The imprint was particularly pleased with the efficiency of this flow.
The organization of activities on the previous website had spiraled into disarray as more activities were added over time with no clear structure of how to display them. In my iteration, I separated the activities into five clear categories, and organized each category into a pane of an elegantly animated accordion menu. I also made sure that each activity was clearly labeled with a thumbnail preview, making it perfectly clear what each user would be downloading.
In addition to the desktop view, which the imprint had stressed would serve most of its users, I made sure each page was fully responsive to comply with my personal mobile-first approach.
The Outcome
The imprint was very happy with the finished design and has felt comfortable enough to spend money revamping the marketing of the Ready-to-Read product line. I have also spoken to friends who are educators who have raved about the redesign (without knowing I was the designer)! It consistently ranks in the top 10 of Simon& Schuster’s most visited websites. As with all my digital products, I continued to try and improve it with each content update I made.