Visual Explorations — Shopify

Visual Explorations — Shopify

Every brand has a unique visual language that is used to construct its identity. Here at Lingo, where our product helps teams manage their visual assets, we’re fascinated by the stories behind these visual languages. That's why we’re interviewing some of the amazing brands in our community so that we can share their inspiring visual voices with you! The next customer we’re profiling today is Shopify, an e-commerce platform of good-looking templates that make it easy for anyone to build a flourishing commerce business online. We spoke to Ryan Coleman, illustrator at Shopify, about styleguides, what inspires Shopify illustration team, and what's on the horizon.

We loved the Medium article that was recently published about how your team redesigned the illustration style for Shopify. Tell us what the catalyst for change was?

It was always on our minds. At the time (late 2015) there were only 2 of us on the illustration team, and we were busy! While we had an illustration style in place, it wasn't working the way we wanted it to. It was big and blocky, and the tone didn’t match where the content team was taking the voice of Shopify. It was safe. It was comfortably inoffensive, but it didn’t have an opinion or a voice. Moving forward we set out to change that: to have a stronger influence and guide our merchants to use our product as efficiently as possible.

 
Illustration Moodboard

Illustration Moodboard

Defining Illustration Style

Defining Illustration Style

 

When you started to develop a brand new visual voice, what was your team’s inspiration and the basis for visual language?

Adapting some of the strategies we learned from the GV sprint model we instructed everyone involved to gather inspiration. We took everything we loved, liked, and didn’t like so much, to create a massive moodboard. Once a wall was filled, and our brains exhausted, we discussed and dot voted.

 
 

The next step was connecting with our very own content team, who provided us with some amazing resources. Their voice and tone guides helped us convert our core values into the voice and tone of Shopify illustration. It gave us something to measure our suggestions against, and helped us ensure we were making the right decisions for Shopify, instead of following our own personal tastes or trends.

Btw, how many people are on the illustration team?

We currently have four full-time illustrators on the illustration team as well as another two illustrators embedded on different teams within Shopify. (buuuuut thinking about adding another, y’know, if they’ve got some animation chops, hint hint nudge nudge)

 
Screen Shot 2017-01-30 at 9.54.49 AM.png
 

We love your illustration guidelines, how long did it take your team to develop this document?


Didn’t take long at all. Really, probably a couple hours of work. But, it took us a little while before we realized we needed it. This guide is evidence of a big lesson we learned on the illustration team. There are a lot of assumptions that happen when so many people are working in parallel; we assumed that everyone would have the same vision for our illustrations as we did when the added them to their respective projects. Of course, not everyone is a professional illustrator. It was our responsibility to teach the people around us how to execute our work properly. Our guidelines came to be after stumbling upon some unfortunate uses (usually a kind soul trying to lighten our workload): an empty state illustration re-used elsewhere; blending modes or opacities added to fit their design; or a spot illustration that’s stretched by 400%. Once we made the guide, just based on common mistakes, we stopped needing to check everyone’s work—they were all happy to learn, and eager to use illustration in the best way possible.

 
Shopify's Illustration Guidelines

Shopify's Illustration Guidelines

 

How do you use this in tandem with Lingo app?

We try to always provide the usage guidelines when we add another member to our Lingo library. It gives us peace of mind. When we grant access to the work we’re doing, we also want to make sure that we’re doing our best to educate people on how to use it. Whether someone is looking for a placeholder, a header for a blog article, maybe they want to experiment with animating, we want them to easily access our illustration without wasting time (and the added bonus of keeping accidental clicks out of our original files). Big shout out to copying and pasting something from Lingo, sooooo much more convenient than sending someone to our, sometimes scary, art boards (or lack thereof).

 
Shopify's Lingo

Shopify's Lingo

 


How has Lingo been incorporated into your team’s design workflow?


Every illustration we create goes into Lingo. Empty states, announcements, tacos… etc. Even all of the stuff that’s awesome but in the end doesn’t make the final cut—doesn’t mean we can’t use it for something else, right? Then we go crazy with tagging everything. Making our illustrations easily searchable adds at least 15 years to everyone’s life.

What interests you personally about illustrating? What do you geek out about?

This is tough, there’s so much about illustrating that interests me. I love test driving new styles. It’s like I get to look under the hood and figure out what elements—color, line, gradient—make an illustration so awesome. I geek out on the extra details of an illustration, too. Adding all the little delightful moments that basically no one sees, are totally worth it for that one guy who catches it.

 
 

Who is on your watchlist right now for illustrators killing the game?

Patswerk, Greg Christman, Vic Bell, Caseyillustrates, Meredith Schomburg, Noah Jacobus, Shauna Lynn Panczyszyn…  the list goes on and on. Apologies to the hundreds of people I didn’t mention.

How do you guys see your visual language evolving over the next five years? 


For all I know, in five years we’ll be replaced by robots that do our job more “efficiently”.
We’re currently working on a new illustration style that we hope will evolve and grow along with Shopify.

 
 

What are your must-read design books / blogs / podcasts and why?

I reached out to the team for some ideas on this and here’s a few:
 

Design books

The Illusion of Life — Frank Thomas and Ollie Johnston

Design is a job — Mike Monterio

How to think like a graphic designer — Debbie Millman

Creativity Inc — Ed Catmull

Design Thinking — Paul Rand
 

Design Podcasts

Design Matters

Design Details

Creative Pep talk

Thought Process
 

Design Blogs

Marvel Blog

InVision Blog

Designer News (Not really a blog, but close enough)

Dribbble Stories


An additional special thanks to Shopify’s mega talented illustration team: Ryan, Meg, Holly, and Erin.

Lingo Team Talks: Erika Kim, Content Manager

Lingo Team Talks: Erika Kim, Content Manager

Kerning, Serif, Glyph, Oh My: A Glossary of Typographic Lingo

Kerning, Serif, Glyph, Oh My: A Glossary of Typographic Lingo