Sketches
Wireframes
Visual Designs
Design Systems
Social Media Assets
Design Tools
Sketch
Invision
Pivotal Tracker
Adobe Suite
Background
In 2018, PBS honored the 50th anniversary of Mister Rogers’ Neighborhood, the groundbreaking children’s program that helped generations of Americans develop emotional intelligence, empathy, and resilience. First airing in 1968, the show ran for over 800 episodes and left an indelible mark on public broadcasting and early childhood education.
I led the design of the Mister Rogers’ Neighborhood 50th Anniversary website and supported marketing efforts across PBS to commemorate this cultural milestone. With a tight timeline, I collaborated closely with content, product, marketing, and design teams to bring the celebratory experience to life—launching a fully realized website and campaign within just a few weeks. The site served as a central hub for fans, parents, and educators to rediscover the show's legacy and explore its continued relevance.
The Challenge
Celebrating the past and looking to the future
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.
Design Process
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.
Visual Mockups
Sharing Different Visual Directions
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 to shareable content and then secondary pages for articles celebrating Mister Rogers and some of his teachings.
Shareable Content
Sharing Different Visual Directions
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.
User-Generated Content
Creating a place to share stories
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.
Engagement
Multiplying the number of visitors
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.