Creating a Cohesive Design System: Strategies for Web and Graphic Designers

The AWeber marketing team opened registration for our second annual Email Marketing Master Class toward the end of 2016. We were inspired to create a more robust product this time around by our success in the first year.

We had the design opportunity to break away from our usual aesthetic and have some fun because this class was only offered for a limited time. The audience was a competent digital marketer looking to improve their email marketing skills in 2017.

We only had a short amount of time to complete this project. We used several methods to finish everything on time and produce the assets quickly and cohesively.

I created a movable block motif that could serve as the design vocabulary’s unifying element. The ability of the designer to flow the pieces in a random manner presents a significant obstacle when trying to make an ordinary pattern interesting. For this pattern to work, the color, negative space, and size of the blocks had to be random.

The following tenants also contributed to the vibrancy of the blocks:

• It was necessary for the edges of the blocks to have the appearance of organic growth rather than being uniformly zigzagged.
• The blocks were like windows that could open to reveal the layer underneath or hold images.
• Friendly, fun, and professional The project owner stated that she wanted to convey these three characteristics through the colors we used. It was difficult to select vibrant, yet professional, colors. If you go too crazy, it will all be MTV; if you play it safe, CSPAN will be playing in the background.

There were also rules for the colors we chose:

• Warm and cool colors shouldn’t touch (especially in the block motif) to create a more random appearance.
• One of the six lessons is connected to each color.
• The reason why all text should be Navy (#213547) is given below.
• We decided to shoot in black and white because the color scheme was so bold. While not overly formal, this gave the design a more polished appearance.

For the class, we staged a fun photo shoot in which each instructor stood in front of the camera while the others talked to them and made them laugh. Models became cozier as a result, creating more distinct personalities. I believe that the instructors’ humanization helped them better connect with the prospective audience.

We had to make this design system easy to replicate once the elements were established. However, a team of five or more people could not be kept aligned by the elements alone.

In the process of creating the website, Facebook ads, videos, emails, and slide decks, there was a good chance that we would lose the spirit. Documentation became our friend at that point.

Regarding the styles for this particular project, I created an internal wiki. Because it went far beyond hex values and spacing guidelines, it would be incorrect to simply refer to it as a style guide. It was the central source of information for instruction in sentiment-based design, rationale, and assets.

Anyone on the team could participate in the creation of an asset that looked and felt cohesive by creating this framework.

Building Lean This project was launched at a time when many of our web designers were working on other projects simultaneously. Therefore, I jumped in to create the registration website and the aesthetic.

We had been thinking about using a landing page builder to let other members of the marketing team make one-of-a-kind pages on their own. It seemed like a good opportunity to try out the builder Tilda. The design ultimately benefited from that builder’s constraints.

Our content and design teams were able to work on their respective assets simultaneously by building this way, our web designers were able to focus on other projects, and the team was able to test a new tool. We were able to work more efficiently and quickly thanks to this procedure.

We can’t say that this design strategy was the reason why one of AWeber’s properties got more signups than average. It did establish a good precedent for internal design systems in the future.

In the end, I believe that this style risk resulted in excellent outcomes because it was a departure from our usual corporate brand identity. Additionally, it provided us with an excellent framework for future style guidance.