The Ruff Ruffman Show Website

An innovative website for a new PBSKIDS brand. The goal is for the website to be more of an immersive educational app than a typical website. It is home to all the content which includes 5 games, 24 videos, 8 hands-on activities, and unlock-able prizes. I was the primary designer on this project. I led the ideation, designed the IA, UX, and UI, and supervised the production work.

Concept Sketches
At the beginning of this project I spent a couple days doing landscape research and sketching. My goal was to come up with many very different ideas. Ideas that were different from each other and from the other websites kids were used to. 

As an internal team we narrowed my many sketches down to three strong concepts. From there, I put together site maps and concept comps to present to the executive producer of the show and the PBS team. 

Site Map
We worked with our stakeholders to decide on on final direction and I honed the site map. 
Homepage / Main Menu - Comp
A super simple menu to let kids jump in to one of four content topics. We wanted this first impression to be bold and fun. The characters here will be animated, interacting with each other and talking to the user. 
Content Index - Comps 
This shows some of the many iterations I went through to reach a final signed-off comp. I worked with my internal team, my designer peers, and our clients to keep improving the comp. Some of the additions include a system of icons and a more clear locked prize treatment. 

Content Index - Final Comp
The site is organized by four educational topics (materials, structures) rather than type (games, video). This is the index page for one of the topics. Each topic has it's own background color, pattern and signature thumbnail color.
The tabs on the left allow the user to quickly switch between topic indexes.
To encourage kids to log in, the main character is the log in button and he's wearing a fun Call to Action shirt!

More Projects

First Days Story Project for American Experience
Ruff Ruffman: Humble Media Genius
Ruff Ruffman - Ready to Learn
Plum's Photo Hunt App
Outdoor Family Fun with Plum App
Can You Dig It - Endless Runner Bilby Game
Design Squad Redesign
Nature Changer