Allister Peabody

Responsive website design

Project overview

A full brand and website redesign for Allister Peabody, a foundation advocating for K-12 education reform. The client had strong attachment to their existing identity but recognized the site wasn't driving user engagement or motivating action. My goal was to modernize without alienating — bringing the brand into alignment with the foundation's mission while creating a web experience that could actually convert visitors into supporters.

Tools

Figma logo with multicolored shapes forming the letter 'F' on a black background.
Adobe Illustrator logo with a dark background and orange text
Google Gemini logo

Team

Independent

Role

Lead graphic designer

Duration

October 2024

Screenshot of a website titled Allister Peabody with a menu including Home, About, Support, Contact, and a red Subscribe button. The main section features a smiling young girl with headphones in a classroom or social setting, with the heading 'Support' and text about advocating for education.
Screenshot of a website homepage for Allister Peabody involving educational reimagining, featuring students working on computers in a classroom setting, with text promoting personalized learning experiences for children.
A smartphone displaying a quote by John F. Kennedy, 35th US President, with his black and white photograph at the top. The quote reads: "A child miseducated is a child lost."

The problem

Modernize without alienating a client protective of their existing brand.

The existing site was structurally and visually static: text-heavy pages with no visual hierarchy, a logo and palette that felt dated, and no clear call to action guiding users toward involvement. The foundation needed a design partner who could push the work forward strategically while respecting the boundaries they'd set around their existing brand — a tension that shaped every decision in the project.

Before

Screenshot of a website on a MacBook Pro displaying Allister Peabody's educational organization, featuring a blue header with the website URL, a yellow oval logo with blue wave-like designs and the red text "Allister Peabody Redesigning Education," and red, blue, and gray text sections conveying a message about education and freedom.
A graphic showing five colored squares with hex color codes: red (#FF0000), blue (#0000FF), light blue (#2E69FF), yellow (#FCFF00), and gray (#ECECEC). Below, a table displays font styles for headers and body text, including font names and weights.

My role

Lead graphic designer

I was responsible for conducting visual research and developing a brand identity that aligns with the Allister Peabody mission and vision statements. This included designing a user-friendly, responsive website layout with strong visual hierarchy. And creating compelling visuals to showcase the impact of education reform, while not distracting from the information being presented.

After

A classroom with rows of blue chairs and white desks, with a red carpeted floor. The image is part of an educational website about reforming education.
A color palette illustrating five color swatches with their hex codes: red (#CC160B), dark blue (#0B3364), bright blue (#2375FF), yellow (#FFD042), and black (#000000). Below the palette, there is a chart showing font styles with headers labeled 'Header 1', 'Header 2', 'Header 3', and 'Body'. The fonts used are 'Sofia Sans Extra Bold' for headers and 'Poppins Regular' for body text, with colors matching the palette above.

Process

Every stage filtered through one question: how do we build a system around the existing brand that makes it feel intentional?

The design process began with getting a basic understanding of what the current website was trying to advocate for. From there I conducted research on the reform goals and the current state of the K-12 education system. Based on this analysis I decided the messaging and visual direction needed a refresh. A brand identity was developed, including a logo, color palette, and typography. The design aimed to convey a sense of trust, innovation, and optimism for the future of education. The next step was reorganizing the website structure to prioritize key information and make the website more user friendly. This included data visualizations, photographs of students engaged in learning, and inspiring quotes. And finally the website prototype was tested with potential users to gather feedback on clarity, user experience, and call to action effectiveness.

A graphic with a blue background, a yellow oval shape with blue wave-like designs around it, and red text inside the oval that reads 'Allister Peabody'. Below it, in smaller red text, it says 'Redesigning Education'. A small black silhouette of a bus is at the bottom of the image.
Handwritten sign with black ink on lined paper reading "Allister Peabody Redesigning Education" with decorative black brushstrokes surrounding the text.
Logo of Twitter with a blue bird icon and the text 'Twitter' in blue.
Four quadrants, two with the Allister Peabody logo and tagline, two with the AP logo, in a blue and white color scheme.
A presentation slide with a layout divided into three sections. The left section has blue background with a list of qualities in dark blue text: Approachable, Innovative, Optimistic, Trustworthy, Empowering, Inclusive, Hopeful. The middle section has four large headers reading Header 1, Header 2, Header 3, and Header 4 in bold black text. The right section is light grey with small black text including subheadings: Subhead, Body 1, Body 1 Bold, and Body 2.
A website sitemap diagram with a blue home button at the top, leading to various sections such as About, Support, and Contact. The About section includes Mission, Quotes, Insights, Media, Sponsor, and Contact. Support contains Advocacy, Sponsor, Subscribe, Contact, and Social Media. Contact has a Contact Form.
A desktop computer showing a website wireframe with the logo 'Allister Peabody Redesigning Education' in the top left corner, placeholder header text, a subscription form, and navigation menu with links to Home, About Us, Support, Contact, and a black subscribe button.
View LoFi Prototype

The solution

The redesigned website presents a modern and engaging platform that conveys the mission of the foundation and encourages users to take action and support their efforts.

The consistent brand identity creates a sense of professionalism and trust. The navigation is clear and intuitive, allowing users to easily find the information they need. Engaging visuals draw users in and effectively communicate the impact of Allister Peabody. A prominent call to action encourages users to get involved and support education reform.

Contact page on a website for Allister Peabody with a form to enter name, email, subject, and message, and contact information including phone number and email, along with social media icons for Facebook, Instagram, YouTube, TikTok, and X, on a dark blue background.
Mobile phone screen displaying a subscription form for Allister Peabody educational organization with a blue overlay, text fields for name, email, referral code, a circular checkbox, and a red 'Subscribe' button.
A collection of website design layouts focused on education, featuring headers, navigation menus, content sections with images of children, text about educational reform, support, subscription, and contact forms.

The most meaningful breakthrough on this project came from reframing "we can't change the logo" as "how do we build a system around it that makes it feel intentional?" That shift unlocked the entire visual direction. It also reinforced that usability testing isn't just for validation — early feedback from potential users revealed that the original call-to-action copy wasn't motivating anyone, which led to a complete rewrite of the messaging before final delivery.

Working within a client's constraints isn't a limitation — it's a design problem.

What I learned