Before taking on this challenging initiative of establishing these design systems from scratch, I first wanted to have a solid understanding of why there was a need to take on this large initiative and communicate why there was a need to invest resources into this. Being on the UW PM team for 8 months prior to taking on the VP Design role, I observed 3 major issues in our design team.

Closely related to inconsistency, there was a lack of brand identity. Graphic designers would create designs and have now way to validate whether it was ‘on brand’ as there was no reference or standard that was representative of what that meant. A lack of brand identity also meant that there was no unifying theme that united the team which gives off the impression to our audience of disorganization and unprofessionalism. There is a need to establish design elements to maintain UW PM’s brand identity.

Upon starting at UW PM, I quickly realized that the designs are incredibly inconsistent from term to term. With new designers being onboarded almost every term, it was inevitable that designs would shift based on the designer, especially if they had no assets to reference from previous terms. Essentially, new designers were building everything from scratch which took incredibly long to do so and compromised quality.

From the marketing point of view, designs to promote events were evidently different from term to term. There is no baseline for the designs or the brand.

As the team grew, gained a larger audience, and as UW PM began running more and more events at a faster rate, it was evident that designs began to stray drastically. Designers needed to create designs on shorter deadlines which compromised consistency and quality. There is a need to develop a design system that defines the components, layouts, and templates to be used in marketing efforts to maintain consistency from term to term.

After being on the UW PM team for over a year working on designs on the marketing and product side, I realized that because there was no maintenance of designs or assets, it was inevitable that designers (like myself) would slowly stray from conventional designs to experiment and try new things. There was no definition of what standards were. There is a need to maintain design assets and themes for the UW PM design team.

At this stage, the design team had to strictly rely on word of mouth and poorly organized and inconsistent legacy assets. Without a foundation that set the stage for design at UW PM other than observation, we were starting from scratch; nothing at this scale had ever been done before for UW PM’s design team.

Along with this challenge, the design team also had to juggle multiple responsibilities, many of which were time sensitive including:

As such, these limitations needed to be considered and there was a need to define to most valuable actionable items that could be executed for each term.

I launched an initiative for the UW PM design team to develop an organizational system whose goals were to:

To meet these goals, I discussed with the team that we needed to establish 3 core components, which form the set of objectives that we needed to meet:

To create these systems and guidelines, the team decided to leverage the design library features on Figma to build components and variants so that they can be edited with ease from term to term.

The UW PM graphic design system was created to guide graphic designers and provide a library of commonly used assets and layouts to maintain consistency across graphic design initiatives. The library developed kept in mind the posts that would be seen throughout social media platforms and was created to form the foundation for what these posts should look like.

To initiate this design system, the team first made a list of all the potential layouts of designs that would be needed across marketing efforts.

The list gave the starting point for the layouts we would need to create. The team then went through previous designs while doing research into commonly used layouts across marketing initiatives seen in larger corporations.

From experimentation, the layouts were created based on a column system with gutters and margins.

The team created this guideline as a starting point for designers but understand that this is flexible to change. The purpose was to have some sort of layout that new designers could start from to create a level of consistency across designs.

The layouts were integrated into the UW PM’s Figma design library to be used across all design files.

The design team at UW PM also wanted to create a greater sense of identity for the club and as such, efforts were made into creating custom assets.

The purpose was to create UW PM’s own library of designs assets so that when there was a need for designs to be created, designers could reference a consistent library of UW PM designs to use with ease. This effort was a long term and ongoing process that took place over the course of the 2 terms. We wanted to encapsulate assets that were versatile yet spoke to the UW PM brand. As such, graphics such as computer mice, the UW PM hexagon pattern, little monster creatures, files, and other assets were made.

This graphic design library was created and integrated with Figma’s features such as using variants and aligning these variants with our colour scheme.

The team also identified a need for templates, posts that were used commonly from term to term. Creating templates for these posts would allow for designs to be created quickly while still being consistent. We started by creating a template for the Instagram takeovers. Having this collection started here means that future terms can simply copy and paste and replace the necessary information on these templates for posts to be created in minutes compared to before, where designers were recreating assets from scratch each time a request came in.

There were also times when requests came in from the marketing team where we realized that the creation of the custom assets could not be created to keep up with the demand. We needed designs completed quickly so we turned to third-party resources like unDraw. The team came up with the idea to have a library of undraw illustrations that could be used for when custom assets did not meet the needs of the marketing requests and as such, a library of unDraw illustrations were created based on our colour scheme.

The purpose for establishing a branding guideline for the UW PM design team was to create a sense of unity and brand identity for UW PM. Having a branding guideline would provide a foundation for designers to reference for consistency and establish what it means for a design to be on brand.

First, the team brainstormed what are the required elements of the branding guidelines as:

To start this off, we needed to establish UW PM’s brand values. Several discussions were organized with the UW PM core team and the following were established.

The team established 5 standardized sizes for the UW PM logo to maintain consistency for designers.

These sizes were selected based on the current logo usage throughout current designs. The variation in sizes would give designers enough flexibility to select the appropriate size for their designs while still aligning with the definition of pre-defined sizes in the branding guideline.

The team also defined 3 colours for the logo to be used. The selection of using the main UW PM colour was for establishing the brand identity as that is the core colour of the UW PM brand. The selections of black and white were made for versatility and flexibility as black and white easily compliment a variety of colour and designs. The hope is that by establishing these foundational variations of the logo, this will maintain consistency and flexibility for future designers to base their designs with these assets in our library.

Establishing UW PM’s font styles was an interesting problem to tackle as there was no standard to use from before documented or preserved. The team needed to do research into font styles and how they would be leveraged to communicate the UW PM brand identity.

We started the process off with experimentation, taking a look at other brands and companies to see what sorts of font styles they implemented. The team was assigned to come up with some variations and report their findings and thoughts on them; trying out font choices on previous designs and assessing which resonated with our brand. We formulated some requirements of our font selection from this experimentation. The selected font should:

A critical question brought up during this process was whether we should select a serif or sans serif font. From our discussion, the following key points were mentioned regarding this idea:

To address these key ideas, the team did some research and had the idea to use a combination of serif AND a sans-serif font for UW PM designs. The idea here is that this would give flexibility for the font choices to fit the needs of both marketing and product needs, depending where the designer see fit. We also observed that the Sen font used in our logo only had 3 styles.

As such, this limitation meant that our second font choice should introduce some more variability so that we can create visual hierarchy in our designs. Given that Sen is a sans-serif font, the team did some experimentation and settled on the Bitter font, a serif typeface under the Open Font License agreement with over 10+ font styles.

Settling on the Sen and Bitter fonts, we wanted to create a guideline that defined the sizing and usage of the fonts.
‍
For sizing, we wanted to leverage popular frameworks that have already been established. As such, our starting point was to leverage the Material Design Type System that does a wonderful job of laying out the hierarchy of fonts and how they should be styled. Sizes and usage was defined based on this system and this set the styles seen in the branding guidelines.

Another consideration made was that since the Sen font has less font variation than that of the Bitter font, large headlines should utilize the Bitter font to create visual hierarchy. As such, the semi-bold style was selected as the default for Bitter headlines. Knowing that there are more variations for this font, setting a standard is still a good idea to establish the boundaries of the brand, while still allowing for designers to go in and update variations as needed and continue to be creative.

To implement and document styles, Figma’s design library features were used to create styles that could easily be accessed throughout designs to optimize design efficiencies.

Establishing a colour palette for the UW PM brand was another core branding component that was important to create. Based on previous branding work, we knew that we needed to keep the original UW PM colour along with black and white. However, we needed some other colours to compliment the core colours and give the brand some more life and variation. Since this was the first variation, we started with selecting a few at a time to ensure that the brand is not too diluted, but as the term progressed, we slowly introduced more and more colours so that future designers were not limited by the small number of brand colours and could be given creative freedom.

Primary colours were selected to resemble tones of the main UW PM colour to give some more depth into the selections.Secondary colours were selected to compliment the warmer tone of the main UW PM colours, including a blue and some yellow tones.

These were experimented on within marketing posts and as such, we observed reoccurring colours that the team liked to use and continued to develop the palette for the UW PM design team. The ongoing process of adding colours would slowly create a palette that could maintain consistency between designers while still allowing for creative freedom.

The team also developed a separate product design system, filled with assets that would be used primarily to build the website and its functionalities.

With the small team we had and the high demand for designs to be pushed out to the development team, the product design system was developed concurrently with the website design. By determining what assets and components needed to be standardized, they were categorized and made into Figma components to be used throughout the website.

Please view the product design system for more details!