Banner image of UI/UX Community of Practice Branding
Overview
Role
Project Lead
UX Designer
UX Researcher
Duration
6 months
Team
2 UX Designers
Tools
Figma
Github
Google Suite
Hack for LA is a volunteer based organization that works to build digital products, programs, and services to address issues in the LA region. Other than allowing civic-minded volunteers gain hands-on experience on projects, the organization also manages multiple Community of Practices for people with similar career interests to connect, share information, and gain new skills.
Problem
How might we create a unique branding that is representative of the UI/UX Community of Practice, so that we can implement it in all of our templates?
Due to the nature of Hack for LA, every member is unique and warmly accepted, ranging from students going through a traditional path to the UX field to even members across the globe looking to break into tech from academia. When the Community of Practice meets weekly, it is an open space where members are encouraged to connect and share their diverse experiences with one another.
Outside of weekly meetings, the UI/UX Community of Practice also manages multiple projects that require branding and templates for standardization purposes, therefore this project will benefit 20+ members currently working on an internal project, and has a potential to benefit 900+ more members in the community.
Process
We started off by brainstorming and sketching logo ideas, drawing from inspiration based on UX concepts such as empathy and the double diamond.
Our challenge was to seamlessly incorporate the official Hack for LA logo into our logo.
sketches done for UI/UX Community of Practice logo
Survey Form
We let members of the Community vote on the logo idea they liked the most, and had a total of 15 submissions.
google form response with 7 votes for #2, 4 votes for #4, 3 votes for #1, and 1 vote for #3
Focus Group Interviews
In order to get a better sense of the “personality” of the Community, we had a focus group interview with 3 volunteers.
Affinity Mapping
After conducting the focus group interview, we did an affinity mapping of all the answers. This helped us group similar responses and find key opinions that were representative of the UI/UX Community of Practice.
affinity mapping
Research Takeaways
There were 2 main takeaways we discovered:
1. The branding should be vibrant and colorful, to reflect the Community’s collaborative environment with its diverse members.
2. The branding should be professional, to reflect the Community’s mission to empower individuals in their career professions and to be a proud representation of the larger organization (Hack for LA).
COLOR & TYPOGRAPHY ITERATIONS
Over the course of 1 month, the team experimented different color palettes and typography systems until deciding on the final product.
color and typography iterations
Final Products
With the final color palette and typography system, we began creating all the different templates the Community needed.
Logo
Our logo will be showcased on our Github Wiki as well as our Youtube Channel where we post recordings of our guest speaker events.
logo for UI/UX Community of Practice
Brand Book
The Brand book showcases our color palette and typography while detailing the Community of Practice’s mission and values.
brand book for UI/UX Community of Practice
Slide Deck
A versatile and functional slide deck template for all of the Community of Practice’s presentation needs.
branded slide deck for UI/UX Community of Practice
Documents
A standardized document template for any documents created within a UI/UX CoP project (ie research plans).
branded documents for UI/UX Community of Practice
Form header
Brand all google forms (ie guest speaker consent forms, user surveys) created by the UI/UX Community of Practice.
branded google form header for UI/UX Community of Practice
Email Signature
A professionally branded signature to be used when emailing external organizations and guest speakers.
email signature for UI/UX Community of Practice
Component Library
A library of branded design components for current and future Community members to use.
component library for UI/UX Community of Practice
Documentation
Utilizing Github to document the design process for current and future members.
At Hack for LA, documentation is highly emphasized since volunteers often come and go. As the project lead, a responsibility of mine was to ensure documentation for the project was completed. 

I crafted a project roadmap, as well as a smaller research plan roadmap.
documentation done for hack for la project
Reflections
Things I learned as lead on a project:
1. Having a good grasp of the project plan and timeline is SO important. The other co-leads and I felt that the UI/UX CoP needed a design system and branding, and since I wasn’t on another project, I decided to take up the challenge. I had to figure out the project plan and timeline from scratch as I simultaneously recruited members for the team. At each team meeting, it was necessary for me to understand what stage we were at, and what things we needed to get done so that I could translate them into actionable tasks assigned to my designers. This was beneficial as my designers could focus on the tasks at hand, rather than worry about the project details.

2. If time permits, spend more time to improve the quality of the product. At the beginning, I thought the project would be more straightforward, from iterations to final designs in 3-4 months. However, as I worked with my team, I realized that it was important to take a step back and conduct some user research, in which I decided to go with a focus group interview and a logo voting survey. This research made the project about 1-2 months longer, however it was so worth being able to have the Community’s input on the design system.