Fred Rogers Institute
Custom Website Design & Development
Fred Rogers Institute (Formerly Fred Rogers Center) is a nonprofit organization dedicated to imparting a positive impact on the lives of children and their families. They came to Blue Archer to re-imagine the website as an online asset that would improve the brand’s online presence and provide resources for its constituents.
Challenge
The existing website was difficult to navigate and included outdated information. It did little to encourage donations, and lacked intuitive site content and information architecture. The redesigned website needed to increase overall understanding and involvement across several initiatives and programs. Most of all, the website needed to continue Fred Rogers’ legacy in an authentic, genuine way.
Solution
Our team built the new Fred Rogers Institute website using our rapid development, full-stack code framework that was made for the responsive web. Built on bootstrap, the website is highly secure and lightweight. After determining the exact needs for the site, our developers built several modules into the project including a calendar, resource center, archive, staff database, and more. These modules help to simplify ongoing website maintenance and create an intuitive front-end experience for users.
Strategy
After identifying site users’ objectives and the content goals of the Fred Rogers Institute team, our marketing staff created a brand new sitemap. The updated navigation and page categorization ensure that researchers, scholars, educators, college students, and other various groups working within childhood development can locate and engage with their unique content. After working through the site content for the new site, we created wire-frames for key pages and modules throughout the site. This step ensures that we prioritize content strategy before entering the design stage.
Design
During the strategy we uncovered that the existing homepage did not convey the true mission of the Fred Rogers Institute. Therefore, we needed to rework the visual direction and homepage content in order to properly communicate the mission and vision of the institute. Our designers worked to find a balance between youthful, whimsical design elements and professional resource content. While the black and white hero image of Fred, hand-drawn button styles, and background shapes are nostalgic nods to Fred Rogers’ playful legacy, the straightforward layout and clear CTAs ensure the design puts site visitors first.
From Fred Rogers Institute
"I am so grateful to Blue Archer for what you’ve done for the Fred Rogers Institute. The website is fantastic and exactly what we hoped it would be. It isn’t easy to find the space between childlike and childish – with all the whimsy and intensity that made Fred, Fred. I appreciate the care Blue Archer brought to our work."
Functionality
The Fred Rogers Institute website now includes a blog that supports multiple authors, searching, tagging, and categorization. A complimentary resource module houses educational PDFs, newsletters, and articles for users looking to learn more about childhood development and support. The calendar of events module enables users to filter by date and category. In order to highlight the staff, we built a team module that includes a listing page as well as detailed bio pages for the staff, fellows, and advisory council members. Finally, we built a robust module to showcase highlighted Fred Rogers archives. The Fred Rogers team can manage and edit archive names, topics, images, descriptions, sources, and more. On the front-end, users can browse by topic, theme or item type.
Conclusion
The Fred Rogers Institute is thrilled with their new site that not only continues the legacy of Fred Rogers but also clearly communicates the programs and initiatives that make up the institute. We're excited to continue to support the team as they maintain the website for years to come.
Questions?
We're always happy to hear from you. Use our contact form, or just give us a call: 412-353-1050
Start a Project
If you have a project in mind and would like a proposal, we'll need a few specific details. Head over to our project inquiry form.
Request a ProposalHow to Choose a Web Design Company
How do you know you’re selecting the right web design vendor? This guide will help you navigate the vendor selection process, ask the right questions, and select a strong partner for your digital marketing efforts.