Mister Rogers’ Neighborhood

Fred Rogers changed the lives of Americans by using broadcasting as a way to help children learn social-emotional skills to deal with everyday challenges. Mister Rogers’ Neighborhood first aired in the United States in 1968 and ran more than 800 episodes over 30 stations. 2018 marked its 50th anniversary and PBS launched a new website and social media campaign to celebrate the impact that Mister Rogers’ Neighborhood had. 

I designed the Mister Rogers’ Neighborhood 50th anniversary website by working closely with content, product, marketing, design, and other teams to create this website and other materials within a matter of weeks.

To celebrate this show that first aired in the 60s and still has a significant impact today, we wanted to create a website experience that both reflected nostalgia and also looked to the future. PBS KIDS now airs Daniel Tigers’ Neighborhood, a kids show based on Mister Rogers’ Neighborhood that teaches many of the same concepts Mister Rogers taught. Working on a project for a hero who constantly asked “Won’t you be my neighbor?” was especially meaningful during a particularly divisive time in our country. People from all different backgrounds love Mister Rogers.

Discovery

Designing on a very short turnaround

This project had a very short turnaround. Because we had only a matter of weeks to design and develop the website, the entire process was expedited. We held interviews with stakeholders at both PBS and Fred Rogers Productions before quickly diving into the design process. This involved widespread collaboration to whiteboard rough wireframes for the website at launch. I put together a moodboard drawing inspiration from other retro and nostalgic designs. Paralleling this moodboard process, I sketched wireframes and user interface ideas for us to take into the digital design process.

I created several mockups of visual directions we could take. We then shared mockups from myself, our design director, and our creative director with stakeholders.

UI and UX Designs

Running with One Visual Design Direction

After reviewing, stakeholders at PBS and Fred Rogers Productions decided to move forward with my design direction. This meant I could dive into a design sprint of finalizing my designs and getting them dev-ready. The final website was one main page with navigation links to shareable content and then secondary pages for articles celebrating Mister Rogers and some of his teachings.

In addition to designing for a platform and campaign promoting user-generated content, I also designed shareable articles and images to inspire others. These were featured both on social media and also on the website with easy-to-share options for facebook, twitter, and pinterest.

A big part of this project was not only creating the website, but also creating ways to engage people from all over the country. In order to do this, we created a platform and campaign to allow people to share videos, photographs, and stories about how Mister Rogers has changed their lives.

The Mister Rogers’ Neighborhood landing page nearly doubled in number of pageviews and time spent on page in 2018 compared to the previous year. More importantly, it encouraged Americans to share their stories and what they learned from one of the most beloved characters on television.