Process

How AB Tasty created a visual identity for a B2B trade show

4 min read
Copied To Clipboard

When my two teammates (Iana Peiu and Josephine Frank) and I were asked to create the visual identity of the biggest event our company would host to date, it was a tall order for a few reasons:

  1. Our company sells website optimization software to other businesses, and this was a business-focused event. Yet the brief was explicit: Don’t make this look like yet another stale trade show.
  2. The event had two main themes: the future of digital consumer experience, and man vs machine. We needed to translate these lofty ideas into graphic elements that would speak to a diverse audience.
  3. We had to sell the visual identity internally
  4. There was an ambitious deadline, and the clock was ticking
  5. The event was being held at the Cité de la Mode et du Design, a visually stunning building on the banks of the Seine in Paris. Basically, the standards were high.

So, how did we rise to the challenge?

Here’s the process we used to define the visual elements, hit the right note between “modern art expo” and “fancy business trade show,” and sell the project internally—all in record time. We think anyone else in the same position could use a similar approach.

Step 1: Establish the main message

First things first: Get your bearings.

There were a lot of ideas swirling around this event, and a brief that left the door wide open. We needed a concrete place to start.

Looking at all of the relevant material—basically, haphazard notes and emails from our CEO and events manager—we distilled a main message: human intelligence + artificial intelligence = better creativity & performance.

We also identified a series of secondary keywords: future, digital, interaction, automation, behavior, user experience, creativity, and performance.

We would use these as anchors, concrete places to start our visual exploration. Using keywords to focus design efforts is a great way to move forward in a fast-paced environment.

Step 2: Start visually exploring in a discovery phase

So we had a lot of keywords to work with and a main message. What next?

To make our future visual identity relatable, we needed to simplify our main idea even further. We boiled down, “human intelligence + artificial intelligence = better creativity & performance,” to simply “digital and human interaction.”

“Using keywords to focus design efforts helps you move forward in a fast-paced environment.”
Twitter Logo

Now, “digital and human interaction” is indeed a simple concept that all of us encounter every day—I’m doing so right now by typing on my computer. It wouldn’t be too difficult for us to get visual and start playing around with these ideas ASAP.

So we dug up a video projector (read: machine, digital) and just started playing around by projecting images, text snippets, and collages we had createdonto the office wall.

Then, one of us had a bit of a eureka moment when she decided to put her hand in front of the projected images.

This “digital-human interaction” instantly disrupted the image’s projection, creating texture and movement that wasn’t there before. A human hand also symbolizes agency, artistry, and intention—or human intelligence and creativity, one of the pillars of the event’s visual identity we had distilled earlier.

Related: How to consistently produce great creative work

It looked like we had hit on something. The human hand that brought to life a digitized image through movement would be the central motif of the event’s visual identity.

Step 3: Create your visual alphabet

Going off of this main motif, we identified a series of elements that would visually explore the boundary between people and digital representation:

  • The window: How people view, manipulate, and interact with the digital world
  • The cursor: The instrument people use to interact digitally
  • Pixel: The primary material for any digital representation; the singular atom of the computer world
  • The mouse: Again, the limit between the human and the digital; the machine that translates physical movement into digital movement
  • The hand: The human instrument of instruments; another boundary between human intention and digital reaction

Essentially, we’d created a visual alphabet that we would use as building blocks to start in on the design phase.

Step 4: Build out your ideas and start delivering

I won’t bore you with the details of this step. We used the design alphabet explained above to get down to designing our deliverables (a website, social network creative, and the design of the physical space at the Cité de la Mode et du Design).

We kept the website simple (one page) and used a video background of the moving hands motif we talked about earlier to make it more dynamic and bring the event’s themes to life.

Our biggest challenge was coming up with a design scheme for the physical space at the Cité de la Mode et du Design. As mentioned above, we needed to hit the right note between “modern art expo” and “fancy business trade show.” We decided to hone in on the window motif, and create a “white box” art expo feel—without going crossing the line into “overly artsy.”

Step 5: Sell it

This was a big event for our company, and all of our employees were involved in making it happen. Once we’d completed our deliverables, we could have just gotten validation on our work from the primary stakeholders and left it at that.

But we decided not to go that route. We all felt it was important to explain the reasoning behind the event’s design firsthand and to the entire business. So, we booked a slot in the company calendar and gave a presentation that resembles this post.

“Presenting your work and the rationale behind it helps show the business value of design.”
Twitter Logo

Explaining the visual identity of a company-wide event can help designers avoid comments like, “I just don’t like it,” or “I don’t get it.” We also wanted to create unity around the event itself.

Finally, presenting our work and the rationale behind it can help designers show the value graphic design brings to all areas of a business.

Step 6: Use your company’s own tech to get feedback

The advantage of working for a tech company is that they have a few tricks up their sleeve that can help the creative process.

Our CIO had been working on a new eye-tracking tech that would help UX designers discover how users viewed a web page. We tried out the tech on the event page we made. Right away, we noticed a major flaw: the event logo we designed was being completely overlooked!

We hastily modified the logo to be more prominent, and ran the test again with much better results:

We managed to pull off the design of the event, under a fair amount of pressure and to nearly universal approval, thanks to solid teamwork and collaboration.

And the event itself? It was a total blast, and we were so proud to be a part of it.

Photo from this year’s Conversion Summit

Is your design team working on something amazing?

We’d love for you to share a behind-the-scenes look at your process here on the InVision Blog, just like the AB Tasty design team did above. Get in touch: @InVisionApp.