How We Use Design Workshops to Facilitate Great Design

"Design is a muscle that needs to be exercised throughout the organization." - Andréa Mallard, CMO

I heard this quote while listening to the High Resolution podcast and it really struck me. Bridging the gap between designers and developers (and other departments in the company) is one of the most common struggles when it comes to design.

In our Design Studio we have motion designer Caio, graphic designer and illustrator Rita and two product designers - Petter and me. Petter is responsible for the design of our Yieldr Ads platform, while I design the Yieldr Air platform. Next to these two products, we have a website that describes our offering. The website has a team of three developers – Yero, Jolissa and Mo.

When we first started working together, we designers often had to instruct the developers to make minor adjustments, such as moving an element 10 pixels here and there. We quickly realized that a lot of our time went to reviewing these nitpicks.

Instead of continuing with this ping-pong way of small styling improvements - which took a LOT of our time - we decided to achieve shared understanding by giving design lectures. The view was to make the web team a bit more independent. We also wanted them to like design and see its value, so we did our best to make it fun.

The First Design Workshop

To be completely honest, we had no idea where to start. How do you make an overview of design decisions you make every day, when you’re not even aware of some of them anymore? I’ve realized that decisions based on contrast or proximity start to become natural very quickly and as designers, we don’t actively think about them that much anymore.

After reviewing a couple of design courses, we decided to get back to the basics of visual design - and CRAP principles.

Not crap, CRAP: Contrast, repetition, alignment and proximity. It's a philosophy followed by the design department at Pivot, a customer engagement agency.

In retrospect, it might have been good to start by explaining what design does and what it contains. But even without giving this introduction, we saw improvements pretty quickly.

At the end of the first lecture, there was a task where the developers had to go through the website and find principles that weren’t taken care of. Soon we had a list of possible improvements that were discussed, turned into tickets and fixed within the sprint! We were already so happy with the results.

The other part of the task was to take an element from the Ling's Cars website and redo it. We looked at it together in a week and saw some truly impressive results. The developers were actively applying principles they learned just a week ago!

What made me even happier was that I could see their excitement about it and the effort they invested. :)

The Following Workshops

After the first lecture and task, we saw that typography issues on our website had gone unnoticed. Soon we had a direction - with every workshop, we realized pain points. And eventually we made a short curriculum:

1. What is Design?

The difference between design and art; the different disciplines in design (with an emphasis on web design).

The value and importance of design.

Showing how design is not just a pretty picture; how it works.

The importance of interactions with the user.

2. Visual Design Basics

"CRAP" principles - contrast, repetition, alignment and proximity.

Explaining each principle and showing examples.

3. Typography

What is typography; the difference between fonts and typefaces.

How to choose typography, line-height and font-size in different scenarios.

4. Grid

What is a grid; its purpose and its components.

Different variations in the number of columns.

Horizontal and vertical grids; how to choose one; how we chose ours.

How grids relate to frameworks and scales on different screen sizes.

When it's okay to break the rules and why.

5. Feedback

The importance of feedback; how to receive and give feedback.

Main part: Workshop where the team comes up with the principles of effective and ineffective feedback.

How to ensure these principles are always kept in mind.

6. Color

The psychology of colors; the methods of picking colors; how to avoid the most common mistakes.

How the color wheel relates to decision making when it comes to colors.

7. Whitespace

The importance of whitespace; why we use it; what it achieves.

Macro and micro whitespace.

Spacing, margins and padding (box-model); which principles to follow (e.g. being consistent with padding on all sides of the box).

Results

We've completed 5 design workshops so far, and already we have:

Achieved shared understanding - Now it's clear to the developers why we come up with certain solutions and styling. Therefore they notice it and implement it. The time it takes for review is drastically reduced!

Raised design awareness - The developers have become quite excited about designing. With every lesson, they've started to think about the bigger story and flow within the website.

Made the developers more involved - When we talk about the future of the website, we discuss it together. This brings more ideas to the table and results in a better product. They often suggest improvements, which we discuss and implement!

Learned from them - As designers, we learned a lot about how our website is made and what the technical limitations are.

I’d recommend doing workshops in any company that struggles with bridging the gap between teams. We learned quite a lot from it. It was also nice to refresh some basics that are always present in the back of our minds during our everyday work.

The biggest achievements for me were to see other people get excited about design tasks and to bring fresh design energy within the team!