At Credera, I gained a valuable lesson in establishing creative alignment with clients and brands who are missing or unclear about their brand's visual identity. Finding creative alignment between the design team and the client's design direction is crucial before any visual designs are worked on.
Here's a simple exercise to help find that creative alignment.
Creative alignment is a crucial when collaborating with a client on a creative project. Every so often, you’ll engage with clients who don’t have an established brand identity or message. They’ll use vague words to describe the visual design direction they desire from the final deliverable.
Here’s an example: Words like “electric”, “energetic”, and “gritty”. Internally, everybody has an idea of what those words mean. However, when asked to share something that is creatively or visually "energetic", it's common for people to share very different ideas.
For creatives, this is a problem. Clients pay us a lot of money to design experiences and it's not uncommon for us to receive ambiguous design direction. That's a problem!
There’s no room for this uncertainty or misalignment on expensive projects with tight timelines. It can cost everybody precious time - the most valuable resource to us all.
This workshop should be done immediately after the scope of work is completed. The sooner the team can develop a unified frame of mind and language for the creative work being done, the more confident designers can feel about the work they deliver.
Design is a collaborative process and the goal of this exercise is to start the collaboration early and avoid any miscommunication or misalignment in the future.
This exercise is best accomplished as in in-person workshop facilitated by the creative team working on the project. Here are the following requirements to make this a success:
~2 hours
ALL the stakeholders and designers present (Ideally less than 8 people)
A casual in-person atmosphere. The more casual, the better.
A big screen to connect your device to so everybody can literally be on the same page
This workshop is split into 2 parts:
Let's pretend a large corporate gym is your client and they want to redesign their website. While there’s a general understanding of the functional requirements of the site, the design direction is still unclear.
A client might give you poor design direction and aspirations with comments like this:
(Reminder: These are not the functional requirements.)
A site that looks and feels like a natural extension of the inside of their gym
The new design should communicate the energy in the gym
A ton of imagery to showcase the equipment in the gym
A site that communicates their brand identity of being “an affordable gym for everyone.”
A site that communicates were not for you average gym goers, we’re a gym where serious training takes place
The site should feel gritty and the tone should feel familiar or irreverent. We are the cool kids.
The vague descriptions and direction give no actionable design direction for a creative team to work with.
What does energy in the gym look like? Sounds like you want motion and animations.
You’re a gym for everyone but you’re also a gym for serious fitness? Everyone does not like serious fitness.
Gritty feels dark, dirty, and worn down to me. Is that the visual direction you want?
Fortunately, the workshop forces stakeholders to expand on their vague descriptions. Here’s how to make it happen.
Grab 4 to 6 key words that communicate the visual design direction the client wants to go in. We’ll call these key brand attributes.
Any adjectives spoken 3 or more times, especially if it comes from more than 1 stakeholder should be added to the list.
If you don’t think you don’t have enough attributes, ask for more via a google or form or email. You can never have too many.
For this example, I’ll use the following attributes:
Ask your client to share visual examples of the brand attributes.
Let’s use the term “Energy” for this example. Ask the client for other website examples that visually communicate “energy”
(Ask the client for visual examples in the shape of the medium you are designing for. In this case, we’re designing a website so I’m asking for website examples.)
Ideally, every stakeholder participates in this but if you have a 50%+ participation rate, consider this a success. If you don’t have a direct line of communication with the stakeholders, request examples via email or a google form.
Your team should look for website examples that visually reflect the selected attributes.
Find 2-3 sites per attribute. From the examples you choose, identify specific visual elements that communicate each attribute. It could be things like colors and gradients, hover interactions, animations, or photography. Everyone on your team should be aligned with the chosen examples because that indicates you’re team is finding creative alignment - and that’s half the battle!
Once completed, lay your examples out in Miro. Make life easy for yourself and write the reasons why each site is worthy of communicating the given attribute. Attach full page screenshots of the desktop and mobile sites so you can see how the experience translates across different screen sizes.
You’re Miro board should look something like this:
Add their examples alongside your team’s examples. The Miro board should look something like this:
Take time to study all the examples provided. Write down what is similar and what is different. Different does not mean bad! Differences will add to the conversation so it’s important to identify them and discuss them during the workshop. Part 1 of the workshop is all about understanding the differences between your team’s examples and the client’s examples.
Workshops are not formal presentations. They are periods of collaboration. Crack open a can of Coke, bring some donuts, and talk about what you did this past weekend to build some rapport.
Consider starting with some fun warm up questions. This can live in Miro next to the brand attributes. Here are few examples:
If your gym had a spokesperson, who would it be?
What is your gym’s walk out song or anthem?
Is there a headline that captures your brand best?
Starting with the first attribute, walk through each example on the Miro board starting with the client's examples and ending with yours.
Before jumping into the first example, start with a simple straightforward question: What does "Energy" mean to you?
Write everything down. Sticky notes in Miro are great for this.
This is what you’ll typically hear.
More vague responses. Don't worry, this is what we expected. Now, we have a chance to connect these descriptions with actual online experiences and let’s see how they translate (if at all).
Again, start with the client’s examples from the left and move down the line until you’ve covered all the examples. Reviewing the client’s examples first allows them to speak freely without hearing what your team's opinions are first.
Q1: [Client], tell me about the first site you guys chose. Why did you choose this as a good example for “Energy”?
Listen. Record their responses. Ask questions.
Once they’ve gone through their examples, your team can walk through your examples. Record what does and does not connect with others in the room. Record answers on the Miro so everybody can see and is aware of the words and definitions being considered.
Identify visual design elements that everybody is aligned on. Additionally, consider it a blessing if people disagree on something because that indicates progress in finding creative alignment.
Once you’ve covered all the examples, take a moment at the end to review what connected with everybody in the room.
To reiterate, the goal is to have a shared definition for how “energy” visually presents itself in an online experience.
Below is an example of what you can typically start and end with after this exercise.
If you're able, share the takeaways in the room so everybody can be aligned with the results. Don’t hesitate to cut things from the previously agreed upon list if there’s hesitation from several participants.
Continue this process with each attribute. It can be tempting to move fast but take the time to identify the right design elements for each attribute.
The purpose of step 2 is to collectively describe key brand elements for specific use cases.
Let's use photography as an example. Photography in a gym can mean many different things. To be specific, that could consist of the following:
- Group Training
- Group Classes
- Personal Training
- Amenities
- Physical space in the gym
- Staff
Each category of photography deserves it's own conversation and attention to details. Part 2 is about going into the details. Explore each variation of a given brand element and defining expectations as a collective group.
As you can probably anticipate, the process is quite similar to step 1. If you're interested in learning more, please reach out and I'd be happy to share my experience facilitating these workshops.
At this point, we’ve aligned on the definition of brand attributes and how they present themselves creatively. Part 2 is about going one layer deeper and defining the concrete ways brand elements are reflected. In a perfect world, the client has this figured out but that’s often not the case.
The goal: Outline a strategy for each brand element.
The brand elements will vary based on your project needs but here are examples for a website redesign.
Photography
Video
Color
Typography
Copy
Tone
Let’s use brand photography for this example. Photography applies to many different use cases, especially for a retail gym. What do people want to see?
What’s in the gym > Amenities
Who’s in the gym > Staff, Personal Trainers, Members
What type of classes are there? > Group Classes
While photography is one brand element, its appears in various scenarios and shoul dbe Each of these use cases should be mapped out and strategized.Here’s another way of looking at it.