Inspiration

Branding a visual asset manager for teams

4 min read
Kimi Lewis
  •  Jul 31, 2016
Link copied to clipboard

Crafting a brand is one of the biggest challenges teams face when launching a new product. It involves so much more than just designing a logo—you’ve got to determine the brand’s voice and personality in order to inform your design choices.

Even more complicated: What if the new brand is part of an existing brand or company?

That’s exactly what our team at Noun Project had to work through when we launched Lingo, a visual asset manager for teams. We’d like to share the process we used in hopes you can find value in it.

Human rights on Noun Project.

Noun Project is a crowdsourced visual dictionary of over 400,000 icons that anyone can download and use. We’re driven by our mission of “creating, sharing, and celebrating the world’s visual language.” But visual language is much broader than just iconography. It consists of colors, patterns, GIFs, photos, and many other types of visual content we interact with on a daily basis.

None of this content was on Noun Project, so for us to further pursue our mission we searched for a way to grow beyond the realm of iconography.               

“Crafting a brand involves so much more than designing a logo.”

Twitter Logo

Our curiosity and explorations lead us to do an internal hackathon based around a simple question: How can we offer new types of visual content outside of iconography to our customers?

Hackathons widen your perspective and allow you to find the next big opportunity.Twitter Logo The first step of our hackathon was for each team member to interview a cohort of customers. We learned that people loved Noun Project at the beginning of their workflow when they were rapidly prototyping, but when they transitioned into the later stages of their design workflow they started to use their own visual language instead.  

Noun Project Hackathon 2015

We also discovered people felt their own assets were cryptically organized on their desktops, hidden deep in folder systems, lost in emails, days away in a Slack channel, or living in a stale style guide.

This was an “aha” moment for us—we realized it was a chance to help our customers organize their own visual language in a meaningful, effective, and intuitive way.

Now that we had a vision and a customer problem to focus on, we started to prototype and work on the new product’s brand simultaneously. To avoid any confusion among our current userbase and differentiate its purpose from Noun Project, we decided it was imperative that this new product have an entirely new name and tone.

“Find out where your customers are getting stuck, and fix it.”

Twitter Logo

So one of the first things we worked on was figuring out a name for our new product. For our brainstorming session we enlisted the help of the entire team. We gathered in front of a whiteboard and wrote out a few different naming techniques on the wall:

  • Compound
  • Metaphor
  • Literal
  • Service
  • Abstract
  • Visual
  • Feature

These categories jumpstarted a discussion around naming and gave structure to the exercise. We asked that everyone contribute, no matter how silly they felt their ideas were. After all, a funny or random idea can often spark something amazing.Twitter Logo

Once we filled up the board, we narrowed the ideas down to just 2:

  1. Lingo
  2. Projects

To keep things transparent and involve the whole team in the decision, we used each name for a week internally. Before long, we realized that everyone hated saying “Projects” and found it to be not only boring, but confusing.

So that left us with Lingo, an idea originally presented by our CTO. It was the perfect catchall name that messaged our intentions and hopes for the project. We loved the association: Lingo as “your local dialect,” which is essentially what the product is.

Lingo naming exercise.

We had our name, so it was time to start branding. Before doing any sketching, we first had to examine our competitive landscape. This meant looking at the logos, colors, typography usage, and language of other similar products out there. It was important to us that Lingo stood out among our competition.

Working on Lingo’s visual language entailed creating 3 distinct visual directions to choose from. If you imagine Lingo’s concept as a full spectrum, on the far left is a brand most closely related to Noun Project, on the far right is an autonomous brand, and in the middle sits a brand between both worlds.

From here we had 3 directions to begin building stories off of. When developing concepts or directions for a brand, 3 seems to be the right number as it allows for the “safe” direction, the “middleground” direction, and the “unexpected” direction. Plus, it helps key stakeholders narrow down their favorite route, allowing for a balanced stakeholder/designer collaboration.

Evolution (the “safe” direction)

The basic shapes found in the original logo signify the building blocks of form. With these basic shapes, we can create anything. We can arrange these shapes to represent the elements of your lingo. Designers trust the Noun Project brand to be a leader in design tools, and this direction is a direct evolution of the existing brand.

Digital Craftsman (the “unexpected” direction)

Like a craftsman’s pegboard, Lingo presents your tools to be readily used. It’s informed by a strong grid with amazing creative potential. It adapts to how a team works to optimize functionality. When varied in size, the dots of a pegboard act as halftone and from afar, represent something much larger and complex than any single dot or any single element.

Dynamic Convergence (the “middleground” direction)

A team works best when it’s better than the sum of its parts. Seamless collaboration allows Lingo users to build off of each other’s work and efficiently create and maintain consistency. In this direction, the dynamic symbol represents movement and the collaboration between all teammates.

We broke the initial brand presentation into 3 directions. Each had a moodboard to help set the tone for the visual story being told, sketches to showcase the evolution of the symbols per direction, brandmarks, and typography. We decided not to include color in this initial presentation to eliminate any distraction from the symbols.

Early on, we felt that Lingo could function as an extension or evolution of Noun Project’s marketplace. But as the brand directions and conversations developed, we knew it would be better off as its own entity. This was because Noun Project was a great tool for creation, whereas Lingo was being developed to be a asset management system.

These 2 concepts couldn’t live together and had to be separated. Lingo was to become an entirely new product and needed to be treated as such, from the product’s tone of voice to its UI design. Knowing this helped us narrow down the directions until finally we happily landed on “Digital Craftsman.” We loved the metaphor of the craftsman organizing their essential tools on a pegboard above their workbench.

Revised Lingo logo and visual system.

We wanted the overall design aesthetic of the chosen direction to feel friendly, inclusive, and sophisticated. Our chosen colors are primaries, the building blocks for all color.

Early on, we were inspired by Bauhaus aesthetic for color and some of the decisions around type. We knew we wanted to find a sans-serif that was warmer than what Noun Project’s font employs. We ended up finding a great sans-serif inspired by popular 1920s-era fonts. Its rounded edges relayed a friendlier look and feel.

The symbol for Lingo was of course inspired by a craftsman’s pegboard. Because of this, we made some minor adjustments to the counter spaces and a dot over the “i” to match the circles found in the pegboard motif. The larger dots form an uppercase “L,” while the smaller circles balance the symbol while also evoking the pegboard pattern.

“A team works best when it’s better than the sum of its parts.”

Twitter Logo

The branding of Lingo was, and continues to be, an integral part of the product’s development and success.

We’re always fine-tuning our brand and shaping the tone of voice with social media, emails, and product screens. When you finish a brand’s style guide, you’re not actually done—you’ll always brand and craft your visual and written language.

It helped that we brought the entire team into the process—we definitely wouldn’t have had as successful of a launch without everyone’s input. Branding can be approached in so many different ways, whether you’re branding internally or with an agency. Hopefully you learned some new a approaches by hearing our perspective and journey.

Want to learn more about Lingo or give it a try? Check it out.

Collaborate in real time on a digital whiteboard