BKIND
Volunteer Design Project Focused On Building a Cohesive Brand Identity
Introduction
My work with benefit.design began in May 2021. I found this organization when looking for volunteer opportunities to help build my design skills. Through benefit.design, I joined a team working with a nonprofit called BKind, who offers free food and essential supplies weekly to homeless people living in Glen Burnie, Maryland. Throughout the course of this project, I took on significantly more responsibility as the scope of my work grew from social media marketing to brand design, UI design, and finally website implementation in WordPress.
Social Media Marketing
Our project began with an introductory meeting with Bkind's leadership team, Monica and Fred. During this meeting we discussed BKind's mission and their intended goals for this project. By The end of this meeting we finalized the social media team's expected deliverables: we were to research other nonprofits with the goal of creating templates for social media posts, as well as a monthly posting schedule for Instagram and Facebook.
Research
To start off, I conducted a competitive analysis looking at ten other nonprofit websites, specifically what social media accounts they updated regularly, their social media following on each of those platforms, and how often they posted in the last two weeks. As someone who has never done social media for a nonprofit before, familiarizing myself with the space was vital understanding what a "normal" posting schedule would even look like. The websites linked in this competitive analysis also proved useful down the road as a reference point when I built BKind's own visual branding.
Deliverables
Working off of this information, my teammate Karina put together a posting schedule for BKind's management to more closely match the schedules of other similarly sized nonprofits. This plan was intended to be made up of identical posts on Facebook and Instagram, using pictures taken at events and templates I put together in Canva. I made these in Canva rather than Figma or Adobe Illustrator so BKind's staff could quickly and easily edit and export them.
Shifting Focus - Branding Design
With my deliverables completed, I offered to help put together cohesive branding guidelines to help the UX team to flesh out their website mockup. While built out and visually coherent, it was in serious need of a coherent visual identity.
As a jumping off point for building my own branding guidelines, I took a look at BKind's preexisting website and logo. I took note of aspects I liked and aspects I wanted to change and got to work. I wanted to create a visual brand that was in conversation with BKind's original logo, but that had a more contemporary look and feel.
Initial Ideation
My initial ideation revolved around the landing page. This page was the longest of the whole website, and was by far the most challenging to make cohesive with a simple, limited color palette. While the colors are rooted in BKind's original logo, shifting the logo's red to purple and using cooler green tones allowed me to build a brand identity that is efficient, clean, and welcoming. Throughout this iterative process, I met with my team members and project manager to get input as I worked my way to my final design, pictured on the far right.
Addressing Accessibility Concerns
Partway through my design process, I began to worry about the accessibility of my color palette. Using the A11y color contrast checker for Figma, I was able to find a color that I found visually appealing and that suited my needs to build a AA WCAG compliant website design.
Deliverables
I met with my teammates and project manager throughout the process of building and implementing the site's visual branding, highlighting its visual appeal, simplicity, and WCAG accessibility. Alongside my completed website design, I put together a cohesive branding style guide complete with fonts, colors & color variations, logos, icons, and buttons.
Implementation in WebFlow
Once the website prototype was complete in Figma, I was asked to help with the implementation of the website in WordPress. Having never used WordPress before, I was daunted by the prospect, but after spending some time working on building pages I picked up the workflow quickly! All told, I put together the site's navigation bar and footer, as well as the "About Us" and "Get Involved" pages.
Looking Back
Now that I've concluded this project, I've had the opportunity to reflect on my role and changes I would make if I could go back and do it all over again. I think the weakest factor early on was communication, particularly between the social media and UX teams. Our individual teams were told to schedule our own meetings when possible, and met infrequently as a whole with our project manager. Towards the second half of our project I took over more branding design work and needed to make time for face to face meetings with the members of the UX team in order to coordinate our efforts. I found that collaborating more frequently with the UX team helped helped me stay in the loop of their own design work and allowed for a freer flow of collaboration. If I were to do this project again, I would probably push for more face to face meeting time early on, and if that proved to be impossible, for weekly check-ins where people could leave comments on Figma and over Google Drive so our team could stay on the same page and contributing to the design system as a whole.
Overall, this project provided amazing experience working on a remote design team and communicating design decisions with project managers and clients. It was also a fantastic vehicle to grow my skills in both Figma and WordPress. It was really exciting to bring my visual design skills into the realm of design systems and to create pieces that work as part of a cohesive whole.