Friends of Hackett Case Study

Branding

Brand Strategy

Social Media

Web Design

Illustration

Elements

Year

2022

Instructor

Abby Guido

Friends of Hackett is a non-for-profit, community group that supports Horatio B. Hackett Elementary School. I had the opportunity to be apart of their rebranding, alongside my group members who I collaborated with. We developed a logo, brand guide, website, and designed social media templates to create a professional, yet playful identity.

GETTING STARTED

Philadelphia is an ever-growing city full of people trying to build their community one step at a time, just like Friends of Hackett. Friends of Hackett is a community group that organizes family friendly events and fundraisers for Horatio B. Hackett Elementary School. My group and I were given the opportunity to construct a complete rebrand for Friends of Hackett, as well as design the branding for their annual block party fundraising event.

Our main goals were to create a branding strategy that aligned with their mission and provide them with structured design guidelines for their overall brand and their event. We wanted to establish vital, designed, tools to sustain their business and achieve a visually pleasing, youthful aesthetic that conveys their professionalism.

This created an environment where we were able to lean on each other for support as well as hold each other accountable for our commitments.

My team members were Sean Delmore; Production Manager, Sophia Mazza; Project Manager, Anthony Sanchez-Rojas; Lead Strategist, Olivia Schroeder; Client Manager, and I was the Design Manager.

The Team

The design team for Friends of Hackett is a group made up of five students from the Tyler School of Art and Architecture Graphic and Interactive Design program, at Temple University. We applied for our ideal roles on the team, and we were interviewed in order to be assigned into a role that fit us best. Our instructor Abby Guido assigned us to each position where we would be able to utilize our strengths and improve our skills. Our respective roles came with a set of responsibilities we were in charge of for our team.

I oversaw all of the design for the event, set up the structure of brainstorming sessions, decided how many concepts each designer will present, and put together the design presentations for review. I was responsible for making sure every concept was fully explored, assisting with the decision making process for individual team members.

I was also in charge of design deliverables, and working closely with the Project Manager to ensure the work is being divided up appropriately. I worked with the Client Manager and Lead Strategist on client meeting preparation, and the creative brief for the branding.

My Role

After being assigned our individual roles in our team, we took time in class to have our first client meeting with some members of the Friends of Hackett board. In this meeting, we established the goals and expectations for our project as well as what deliverables they wanted by the end of our time working together. We learned a lot about Friends of Hackett and how other ‘friends of’ organizations work. Their main goals as an organization were to overall improve the outcome and support of Hackett for the students, staff, leadership, and community.

They also expressed wanting to have the ability to expand the demographics of people who support and donate to FOH. Their main fundraising focus is the Block Party since it will be the first block party since the pandemic, so it is crucial they are able to get good attendance and support. By the end of the meeting we were able to establish a list of deliverables for the Block Party and Friends of Hackett branding as well. This list included a modernized panda logo, low maintenance website, social media templates, wearables, event poster and signage for the block party, and an updated newsletter template.

Our First Steps

RESEARCH PROCESS

When it came to researching Hackett we wanted to find key imagery and words that would help us further define what the school was and what Friends of Hackett was meant to embody. Some of those key words or ideas were a Panda (the school’s mascot), friendship, community, education, acceptance, and growth. The Client Manager and I worked together to create user personas for possible community members, to get a better grasp on our audience and issues we would need to address.

After having the more technical side of things established we moved onto the research phase which includes, sketches, moodboarding, logo research, school and website research, and the creative brief. For the research heavy part we divided ourselves up. Four of us, Sean, Olivia, Sophia, and I were tasked with researching Horatio B. Hackett and the surrounding schools or similar groups.

User Personas

FOH LOGO COLLABORATION

A few more rounds of passing around each other’s logos and slightly tweaking them each time, we eventually came to the conclusion of four different logos to present to the Friends Of Hackett board members. The logos were put in four different categories named Community, Growth, Support and Friendship. For each word there was a main logo, responsive logo, and a FOH logo.

Keeping with these ideas we each collected grids of logos that represented each word, along with logos from other schools or ‘friends of’ organizations into a presentation. From there we began developing new logo ideas and moodboarding to try and find a style inspiration that would merge professionalism and fun. After presenting our first logo ideas we narrowed down the ones that were working and each took responsibility for a few.

First/Second Round

Third Round

Final Logo Meeting

As a team we took a great deal of time sketching out many ideas, emotions, and styles that could evoke the feeling of Hackett. We all naturally were drawn to the school’s mascot: a panda. We knew one must be included in our logo.

The logo concept I worked on centers around the idea of the panda and neighboring communities around the school. The heart in the center, which also doubles as the panda’s belly, symbolizes the friendship and love of Friends of Hackett. The style of this logo is influenced by the vintage street signs of Fishtown.

These four fully fleshed out logos were brought to the client for consideration. The Support direction was ultimately chosen by the client for further improvement.

Going through many typefaces, colors, and styles we had finally landed on the logo that we thought best suited the organization.

Final Logos

Friends of Hackett Identity

ONLINE PRESENCE

While the logo research and production was happening, Anthony was busy conducting detailed research into Hackett’s and other competitors' websites. He put together an in-depth presentation of the pros and cons of each website and what platform they were being run on. Using the pros from the groups’ sites and the cons from Hackett’s current website, Anthony was able to produce a list of the wants and needs for the new website. The site map ended up being simpler than the previous Friends of Hackett site with 6 tabs and no sub menus.

This allows the viewer to be able to see all of the tabs in front of them without having to hover over any menu items.The tabs we landed on are a Home page, About Us page, Get Involved page, Shop page, and Support Us page. The content on each page was important to organize properly for easy understanding by the viewer. On the home page, the content is limited to a large photo of the logo as well as the mission statement and instagram feed at the bottom. This level of simplicity on the homepage was important to the organization to not distract from the main goals and current events.

Old Site Map

New Site Map

Web Design

The brand identity was kept consistent throughout the website with the use of colored blocks, type, and imagery. We used the created icons across the pages in themed blocks to bring a sense of uniformity to the website from the brand.

The content on each page was important to organize properly for easy understanding by the viewer. On the home page, the content is limited to a large photo of the logo as well as the mission statement and instagram feed at the bottom. This level of simplicity on the homepage was important to the organization to not distract from the main goals and current events.

The new website was built using Squarespace and it allows for easy updates by members of the organization if updates are needed. A main goal we wanted to accomplish with the website was sustainability with little to no normal edits. With this in mind, we used an Instagram social media widget on the home page to allow for psyched updates of events and current news without having to make changes on the website. With the new site we are introducing new features that were not on the previous site, like the social media block. For example, adding a shop for Friends of Hackett merchandise was a new and useful tool for the organization to gain out of this experience.

Social Media

The social media design was one of the main aspects of the branding that I worked on for this project. I originally created the frame of boxes, that would eventually expand across the entire identity, for the social media templates. Due to the fact that their instagram would be one of the main ways they would communicate with their community. I wanted to create a playful, colorful style that still reflected the professionalism of the brand.

It was also important that I keep the templates as simple as possible while still conveying all of the necessary information. The main goal of creating these templates was to create a guide that the board members could use easily and quickly when needed. All of the elements were designed to be used in a drag and drop method, making the branding easy to combine and assemble no matter your level of design expertise.

Icon Library

A major component of the social media design was the use of icons. I created a clean, line drawing style that I transferred across the entire icon library. I began with creating flower icons due to the importance of Hackett's garden and continued from there. From there we decided on themed sets of icons that could be used in multiple settings and based on events that occurred frequently.

We created eleven different themes for the icons; flowers, garden, school, animals, science and music, food, weather, sports, numbers, environment, and events and holidays. Overall, I created over one hundred different icons that could be applied across the entire Friends of Hackett identity. This became a useful design element that could effortlessly be applied through the use of Canva. I organized and uploaded all of the icons and social media templates to Canva, as well as establishing their Canva brand kit.

FOH Newsletter

Another important piece of the brand was to design a seasonal newsletter that would be a direct communication between Friends of Hackett and their volunteers or community members. We utilized the icons created previously and turned them into a colorful pattern that would be used as headers for each newsletter, depending on the season. This adds a playful and illustrative design element to catch their member's eye as they scroll through their emails.

Clean and concise organization was also an essential aspect when creating the newsletter. Creating sections with a clear type hierarchy makes the chunks of dense text easier to read and it is less likely that the newsletter recipients will move past and ignore it. Including bigger images also allows the eye to take a break and move around the page easier, keeping the view engaged.

GARDEN EVENT

As a part of our rebranding of Friends of Hackett we organized an event at the Hackett Elementary School playground. This event's purpose was to show the community Friends of Hackett's new and improved logo, as well as provide fun and engaging activities for the children. While this event was going on volunteers and parents were also invited to lend a hand in the garden.

The garden party event was a great experience for our group and a joy to give back to the community. We produced pins with our new logo on it to give out to everyone, in addition to planned activities that included chalk drawing, panda sketching, panda mask-making, and face painting which I was in charge of. Everyone had an amazing time enjoying the crafts and helping out in the garden, including state representative, Mary Isaccson.

BLOCK PARTY BRANDING

< Previous

Next >