Allen Institute for AI

Allen Institute for AI

Allen Institute
for AI

Allen Institute for AI

Allen Institute for AI

AI2 conducts high-impact AI research and engineering in service of the common good.

AI2 conducts high-impact AI research and engineering in service of the common good.

AI2 conducts high-impact AI research and engineering in service of the common good.

AI2 conducts high-impact AI research and engineering in service of the common good.

AI2 conducts high-impact AI research and engineering in service of the common good.

My Role

My Role

My Role

My Role

My Role

I was brought on as a lead designer with the team that creates all the internal tools the organization uses to build demos and visualizations for its research. 


I also worked with the Director of Communications in creating the visuals we used to market AI2 to the outside world which included our website and any promotional material.

I was brought on as a lead designer with the team that creates all the internal tools the organization uses to build demos and visualizations for its research.

I also worked with the Director of Communications in creating the visuals we used to market AI2 to the outside world which included our website and any promotional material.

I was brought on as a lead designer with the team that creates all the internal tools the organization uses to build demos and visualizations for its research. 


I also worked with the Director of Communications in creating the visuals we used to market AI2 to the outside world which included our website and any promotional material.

I was brought on as a lead designer with the team that creates all the internal tools the organization uses to build demos and visualizations for its research.

I also worked with the Director of Communications in creating the visuals we used to market AI2 to the outside world which included our website and any promotional material.

I was brought on as a lead designer with the team that creates all the internal tools the organization uses to build demos and visualizations for its research.

I also worked with the Director of Communications in creating the visuals we used to market AI2 to the outside world which included our website and any promotional material.

hero-image
logo-stacked

My first task at AI2 was to take stock of all their various graphics and design assets and start to build a cohesive design system out of it. I had asked if this included designing a new logo, I was told more than likely no. Which I took to mean YES.

As I became familiar with the company and the identity I started mocking up some ideas for a possible new logo.

original-logo-ideas

Green Light.

After designing a couple rough concepts, my boss (the Director of Communications) was able to successfully pitch the idea of a new logo to our CEO. And with the project now officially sanctioned, I kicked off the redesign as I typically do, filling page after page of my notebook with rough sketches. 

logo-sketch-layout

You have to get all the bad ideas out so you can hopefully find the good ones.

Formalizing.

After I have around ten unique ideas I start designing them in Illustrator. Typically, I start the design process in black and white, only moving to color after a few rounds. However, with this project, we needed to present a complete vision to the CEO so...colors it is.   

logo-review-with-matt

A helpful coworker critiques my work letting me know everything I have designed is garbage. :)

illustrator-concepting-grey-lighter

Typical view of one of my logo projects in Illustrator.

Presentation Time.

As I mentioned before, I typically only present black and white logo ideas on the initial round. However, I would be presenting directly to the CEO this time, and I needed to spend a lot more time up front so I could sell the vision for a new logo. This meant full color, lockups, variants, and usage on both digital and physical. If I cannot make an impression here, this chance will definitely slip away.

Concept 1

Geometric Patterns. With this concept I wanted to find a way to create a design pattern that would scale down to all the team and demo logos. It's less emphasis on the main logo and more on the organization as a whole.

c1-logo
c1-one-color
c1-slide
c1-pattern
c1-keypass
c1-shirt

Team Logos.

Keeping with the basic shapes, I applied the same theory to some of the team logos. Here are a few examples from this exploration.

c1-sub-brands-set
c1-leaderboard-logos

Concept 2

Building Blocks. The goal here was to create a shape that is iconic enough to be reimagined in many different ways without losing its identity. It focuses on the foundations we are creating with regards to artificial intelligence.

c2-logo
c2-logo-horizontal
c2-access-card
c2-shirt-designs
c2-logo-set-colors
c2-logo-set-patterns
c2-desktop

Team Logos.

Following the same principles, I took to reimagining the team logos with basic shapes and forms.

c2-sub-brand-set
c2-leaderboard-site
c2-leaderboard-logos-2_3
AI2-Rebrand-C2-1
AI2-Rebrand-C2-1_3
AI2-Rebrand-C2-1_4
AI2-Rebrand-C2-1_1
c2-leaderboard-logos-2_3-1

Concept 3

Diode. This is my playing it safe logo. The previous two logos were farther out in the creative field. So I wanted to include something that was a bit more conservative as far as logo designs go.

c3-logo
c3-colors-1
c3-logo-description
c3-slide-example
c3-diode-colors
c3-keypass-1
c3-jacket
c3-website-example

Concept 4

3D. This logo was interesting. When I first designed it, I liked it. However, the more I worked through the process, the less I liked it. I originally wasn't going to include it in the presentation, but there was enough interest from others that I decided to include it after all.

I've removed all the repetitive assets from this concept to try to keep things short.

c4-logo
c4-breakdown

Presentation Outcome.

The logo presentation to the CEO was very well received. He informed me going into the meeting he was very skeptical. However, after seeing the presentation he was excited to move forward with the process!

As for next steps, he wanted to get input from the rest of the company. With us being a research institute, he wanted to get some numbers to help make a decision.

This was the first time I had been part of a logo design process where the greater community influences the decision over those of a few shareholders.

The results were mixed, no clear winner came from the poll. What was certain was that people felt very passionately about the logo. Both for it, and against it. However, one prominent trend that emerged was that people felt the logo should be closer aligned to an academic research facility.

With this new information in hand, I went back to the drawing board and attempted to see if could make something that better aligned with these beliefs. And just to make sure, I also looked to see if there was a more incremental step in the logo evolution that would be strongly received by my coworkers.

Additional Concepts

Here are a couple of the more prominent ideas I had during my several rounds of internal revisions.

Seed of AI.

This concept comes from the idea that we are creating and growing AI for the common good. The imagery is an open seed with the AI growing from out of it. It's also very Charley Harper inspired, which is why I like it.

cx1-logo
cx1-seed-set

Eureka.

Taking a look at the current logo, some of the feedback was that people liked the lightbulb. So for this concept I dropped the word mark and went more into the lightbulb. Also you will notice there is an A inside of the imagery. Sneaky sneaky.

cx2-logo-1
cx2-colors
cx2-stickers

Evolution.

There were a lot more concepts that are not shown here. However, it felt like one thing was for certain. If we were going to go with a new logo, it would need to be an evolution of the current one. So with that in mind, I went to work trying to evolve what we had into something a bit more modern and iconic.

Also, important to note, I was not allowed to use a lowercase i in AI2. But at the same time, I needed to make a design that did not look like 12. So no Ai2 or A12. Got it.

cx4-logo-set

Final Resolution.

After many back and forths with the CEO we ended up with a single solid concept. And with that, we sent out one last poll to the entire company. The options in the poll were: 1. keep the current logo, or 2. go with the modernized version.

With roughly 84% of the vote, the company chose to move forward with the modernized logo!

ai2-logo-finla-vertical
final-logo-colors
logo-slider-old logo-slider-new

Stage two.

Now that the logo had been decided, it was time to make everything else that comes with it. This meant continue my work on the style guide, develop a motif to encompass the identity, set some illustrative standards, and redesign our website utilizing all these new things.

Style Guide

We utilized the power of Ant Design's component system to be the backbone of our style guide, which we called "Varnish". It was my task to go in and restyle it to my new specifications. You should be able to see Varnish in its entirety here.

brand-color-pallete

Colors.

Ant's system uses a ten-step for each color in the pallet. It was my job to go in and provide new colors for each and every step. Which is actually something I love doing.

varnish-colors
varnish-fonts-small

Typography.

When it comes to type ramps, I always end up making my own. The algorithmic ones never seem to feel right. It's an iterative process of defining a ramp, using it in designs, and adjusting the ramp to better fit the designs. 

Iconography.

If you've seen any of my other projects you know I make a lot of icons. And thankfully working in Varnish was no different. Most of these are used in the sidebar of demos. But some are also used in the demos themselves. I think I am most proud of the mouse icon.

ai2-system-icons

Motif

A good motif either makes or breaks an identity. I came up with the idea for ours based on the fact that as a research institute we are constantly running experiments. And each time we re-run them, we are changing little variables here and there. The motif represents this with little lines that are constantly changing and following one another. Each line can be thought of as a datapoint making up the greater whole.

motif-examples-1
featured-member-lucy
featured-member-chandra
social-card-rover
social-card-cve
business-cards-back
business-cards-front
illustration-diversity

Illustrations.

The styling of the illustrations takes its cue from the motif. Thin blue lines represent a blueprint. And the off-register fills further an idea that our work is fast and always in progress.

illustration-plaques
illustration-values

Interactive

Completely redesigning our website was a monumental task for the entire team. One of the things that made it so difficult were all of the layers within. Teams have their own sub pages and sometimes those pages have demos of their own. In addition to that the site houses a ton of research material. You can check out the site here.

website-set-1
website-responsive

Responsive.

When you love designing a page so much you get to design it at different sizes again and again and again.

In the Wild!

I'll be honest. This is my favorite part about being a designer. Getting to see your creations out in the world and branded on other peoples clothing.

photo-set-2
photo-set-1
photo-set-3

The end of a long journey.

I am extremely grateful for my time working at AI2. When they hired me I had no idea of the journey I was about to embark upon. Looking back and creating this portfolio piece shocks me with how much my team was able to accomplish in such a short period of time.

As I reflect upon it, I would say without a doubt, navigating the logo redesign was the most challenging aspect of it all. High stakes presentations to the CEO, wrangling feedback from almost 100 people, and scaling it out to a complete system within months. It was a daunting task and I am thankful to have been a part of it.

And if you are curious, I've included below a snapshot of the 40 logo concepts I ended up creating for this project. Hopefully I've gotten a little better from all this so the next time it won't take as many tries to get right.

All-logo-ideas

View More Projects

Select Projects

Select Projects

Select Projects

Select Projects

Gaia GPS: iOS Redesign

Gaia GPS iOS Mobile App

Gaia GPS iOS Mobile App

Gaia GPS iOS Mobile App

Complete redesign of both UX and UI for Gaia's flagship prodcut.

Complete redesign of both UX and UI for Gaia's flagship prodcut.

Complete redesign of both UX and UI for Gaia's flagship prodcut.

Shark Tracker Redesign

Shark Tracker App

Shark Tracker App

Case study on redesigning OSEARCH’s (at the time) outdated shark tracker app for iOS.

Case study on redesigning OSEARCH’s (at the time) outdated shark tracker app for iOS.

Case study on redesigning OSEARCH’s (at the time) outdated shark tracker app for iOS.

Case study on redesigning OSEARCH’s (at the time) outdated shark tracker app for iOS.

Google Cloud Visual Design

Google Cloud

Google Cloud

Google Cloud

Collection of work from my time as a Lead Sr. Visual Designer for Google Cloud.

Collection of work from my time as a Lead Sr. Visual Designer for Google Cloud.

Collection of work from my time as a Lead Sr. Visual Designer for Google Cloud.