A Look Inside Design at Yammer

We’re tracking down InVision users inside the world’s most amazing companies to discover their favorite tools, books, methods, and the philosophy behind what makes them so awesome. This week we interviewed Jason Lang, a Visual Designer at Yammer in San Francisco, CA.

What do you do at Yammer?

Well, the short answer is that I make things. My daily job is bringing product concepts to life on screen: transforming them into something that fits into our product and is easily used. A designer is, in essence, a translator. It’s my job to take a spec or a wireframe and build a UI that our users ultimately interact with.

How did you get into design?

My parents were always really good about exposing me to the arts, and my dad was a programmer, so that helped. The classical music, drawing, painting, and being surrounded by my dad’s computers and programming talk around the dinner table bred the product designer in me. I was always drawn to building things that could be used. In 5th or 6th grade, I did a pretty cool project for a science fair: Instead of doing a PowerPoint presentation, I decided to make an HTML website. I lugged my tower case and CRT monitor to the science fair and showed my project on one of the original web publishing programs that came with Windows.

InVision is great because it actually cuts down the technical know how to [create prototypes] and then makes the process faster and easier to edit.

Through high school, I thought I might do biology or something, but towards the end an art teacher encouraged me to pursue graphic design. So I went to college for graphic and interactive design. I spent some time doing print work for a while, and when I graduated I got the opportunity to move out here and work for Posterous. That’s when I really dove head-first into doing product design and UI.

What are the top three essentials in your workspace?

1. Computer: You have to have a machine that is capable of doing the work. I notice as pixel densities get higher so does the amount of RAM I need.
2. Sketch Pad & Pen: I think so many designers start on a computer when starting on paper is really helpful.
3. Whiteboard: It’s really good to whiteboard things out, draw it out, get concepts solidified before you start building the pixels just because you learn so much and it’s low impact.

How important is your workspace to your creativity?

Pretty important. That’s the most incredible part about our new offices here – They’re set up to be creative in and there are places to escape if you need to escape.

There are hanging swings to let your feet float free and have a different way of sitting, thinking. We’ve got really comfortable desks that we can adjust on the fly to be standing or sitting depending what you’re doing and how you feel that day. So at work we have a really great workspace set up for that.

In my home life I’ve always taken a lot of time to create my office the way I wanted it to be. The first thing I did in my new house was build a 16-foot long desk at the end of the loft that both my wife and I use as our workspace.

What do you do when you hit a creative roadblock?

The first thing I do is revisit the goals of the project. A designer can get lost in the details but a really good way to refocus is to take a moment to pull back and look at what you are actually trying to execute, focus on what the real problem is behind the pixels on the screen.

If I’m still stuck and it doesn’t make any sense, I go back and sketch again, or open up a new document and start down a different path. It usually helps to inform the overall problem I’m working on. I don’t think that there is a single designer who doesn’t get stuck, which is why Yammer has ping-pong tables and other stuff around to give you a mental break.

It’s important for every designer to pull away from the screen & look for inspiration outside of their particular medium. Go to art galleries, spend time outside, spend time with friends, read. So much of that plays back into what we do because designing is ultimately about communication. If you look at different forms of communication it can really inform a design process.

Where does your inspiration come from?

• Outdoors: Being outside is a really big inspiration. It’s a good way to clear my head. We take our dog out and go hiking a lot.
• Street Art: I like street art, so I love walking through the Mission; I find it fascinating.
• Reading: I also do a lot of reading to keep up with what is happening in the industry.
• Print: I don’t know if it’s my background as a print designer or what, but I like to read magazines. It’s really important to draw inspiration from outside of technology and look back at the world of print. There’s hundreds of years of knowledge that go into communicating on paper. In the early days of the web, so much of that was lost immediately because we had this new technology. In the early days of the web, the technology overtook the content, but now I think we are moving back toward a place where content is king. That’s where we can learn a lot from print design. There’s a piece of paper with words and images that have to communicate something clearly, which is what we do daily on mobile devices and the web.

What are some of your favorite books or magazines?

One of the street art magazines I love is called is called Juxtapoz. It has a lot of neat, highly graphic design elements in it, and they feature a lot of really interesting people. You wouldn’t know it by my design aesthetic but it always excites me and gets me moving in a new direction.

I also spend a lot of time looking at fashion. It’s a really interesting place to get design inspiration from because of the revisionist process that fashion designers go through. The way that people remove elements and add elements back in to change something that is still the same. I mean pants have been pants since they were ever pants, right? But they look different because of design: they way they are cut, how they are tailored, how they are colored.

InVision is neat because it has a dual purpose: you can do some longer, bigger projects with it and see how something works, but you can also dive in and do a quick little one or two screen thing to see if your concept makes it in practice.

I draw a lot of inspiration from architecture too. I’m always interested to see how architects use light and shadow to their advantage when they build spaces. I think that idea goes back to the high contrast and low contrast paintings in fine art. So many times web sites delve into a hundred shades of blue or yellow or green, or whatever their brand color is, when you can really choose a limited palette of high contrast colors to create a great design that pops.

Do you do any sketching on paper?

Yeah I like to sketch on paper. I am always carrying around a notebook and a pen to quickly put ideas down; I think many designers see things in their head before they can say them, and sometimes it is easier to draw it out and show someone an idea than try to explain it. It’s good to have all your ideas in one place that you can easily go back to. I have stacks and stacks of notebooks at home that I can easily reference. It’s interesting to look back and see how much you’ve grown or changed as a designer, as well as the trends that have come and gone in the industry.

What’s your favorite part of the design process?

That’s a tough question. I think it’s hard to pick just one part because at Yammer the process never stops. The design process is iterative; design is fine tuning an idea and making it better every time you touch it. That is the really exciting part of it. We are able to have an idea, try it out, realize it’s working or not working and come back and retry it. That goes back to the ideation phase of designing because every time you realize something is either working or not, you generates ideas. As a designer you’ve got to be full of ideas, even if they’re wrong. You’ve got to try them out, make sure they’re wrong, and then move on to something that is right.

What is the most frustrating part of the design process?

It could be the exact same answer honestly. I mean design is this beast – Sometimes it’s awesome and sometimes it’s terrible. Some days the ideas come quickly and you find something new, some days you bang your head on the wall and you can’t solve the problem. That’s when you need to go play a game of ping-pong and come back to it when your brain is fresh. I think one of the less fun parts of design is figuring out the trade-offs to getting something built. Sometimes there’s a tendency to be tied to a concept that is really important in your head but is actually less important in the grand scheme of things. As a designer, you have to be able to let a concept go and move on.

How you are using InVision here at Yammer?

This is the interesting part, I had actually found InVision several months ago, just looking for tools to help us prototype out some products that we were working on. So if I’m working on a design and we want to test a flow, and make sure that something makes sense, our user research team will bring people in for end-user testing. I can save out a few screens and they can set up a flow in InVision and write their own testing script to walk users through the design.

More recently we have a team of people using InVision to test our designs, and it’s really great. I’ve used it on several occasions to prove out an idea that I’ve mocked quickly to see if it makes sense. It’s neat because it has a dual purpose: you can do some longer, bigger projects with it and see how something works, but you can also dive in and do a quick little one or two screen thing to see if your concept makes it in practice. Tools like that are really helpful. It makes our research team really happy to have a quick way to test a design without bugging our prototyper or us too much. They can open up a Photoshop file, save out some screens and do what they need to do. That is why we started using it.

Before we discovered InVision, we weren’t doing enough with click-through screens. Sometimes we’d have the prototyper build stuff quickly in HTML & CSS, but I think InVision is great because it actually cuts down the technical know how and makes the process faster and easier to edit.

How do you “get in the zone” when you’re working on a project?

• Music: I’m a big music person. I listen to almost everything and anything under the sun honestly. I listen to a lot of electronic music when I’m trying to focus. That is kind of my wheelhouse for focus music.
• Coffee: I am a big coffee nerd. You’ve got to have the coffee when you come to work in the morning.

What are your favorite tools for the creative process?

• Photoshop: I design in Photoshop most often. I’ve been doing a lot of work with mobile recently and I have some Photoshop plugins that make my life a lot easier which is why I’ve kind of stuck with Photoshop. Fireworks is great for a lot of things but some of the add ons to Photoshop have made my work flow easier.
• Skala View: I use Skala View for working in tandem on my laptop and my device screens when I’m working on mobile things so that there is no question of whether a button is too big or too small or looks right. You can look at it right there from Photoshop, which is wonderful on your device screen.
• Illustrator: I work a lot in Illustrator for icon work and different fine-grained things. Probably carryover from my print background but I prefer making icons in Illustrator.
• DevRocket: I use DevRocket for iOS design. A twitter friend makes this plugin, and it really speeds up my design process.
• Yammer: Yammer is the biggest one I use every day. All my work exists around groups on Yammer. I go there, I see the spec, I have conversations with people, and I am able to get my work done that way.
• I’m kind of like a barebones designer though. I have my design tools; I have a pad and paper and that’s what I roll with.

Do you have a beverage of choice?

Sparkling water, c’mon. Our team is known for sparkling water. We moved in the office and we had no sparkling water for two days and we were like “Where’s the water!?”

Who do you look up to as a designer?

I tend to gravitate toward products more than designers. I aspire to things that are designed well, look good, and are easy to use. I am an unabashed fan of Apple hardware from a design standpoint. I am excited to see the pushback from Microsoft now; the really cool devices that they are putting out that are looking better than anything else on the market right now in terms of colors and things like that. I think Bodum makes a beautiful coffee maker. I like beautiful things that are simple to use.

How do you define great design?

That’s a hard question. I think there are so many levels of great design. On the base level you can say, “Great design is something that works properly.” But that isn’t all of what design is, because if something works properly but doesn’t give you any delight when you use it, is that truly a good design? And that’s where the philosophy of designing comes back in. Great design, for me personally, is a balance of all of our needs, where you have something that is very functional and that makes me happy to use it.

If I’m working on a design and we want to test a flow… I can save out a few screens and [the user research team] can set up a flow in InVision and write their own testing script to walk users through the design.

For example, when I open up an iPhone app, while a simple loading spinner might be sufficient, it’s a flourish that makes me excited. If there’s something different about it that makes me want to come back and use it again or see it again, that’s good design. I think for me it’s is a balance between things that really work well and are really pleasant and enjoyable to use. If I have two equal things in front of me and one of them is less fun to use or is not a pretty color; I will probably choose the one with the pretty color that is more fun to use. If there are two coffee pots at home, one has a frustrating dial on the front and one has a simple number pad that I can punch in what I am doing? I’ll probably go with the one that is simpler and more elegant to use.

What makes a great designer?

A good designer is somebody who can easily make trade-offs. You want to make a design that is like the Picasso of design, but you have a week to do it and it doesn’t work like that. So you have to know how to make something that is great. A good designer learns to work within their limits – take the goals and translate those into the work you’re doing. A designer is ultimately someone who knows how to make trade-offs and do it elegantly.

Yammer Photo Gallery

[nggallery id=12]

About Jason

Jason, a Visual Designer at Yammer in San Francisco, CA. Follow him on Twitter and connect with him on LinkedIn.

About Yammer

Yammer is the leading provider of Enterprise Social Networks. Yammer is a secure, private social network for your company. Yammer empowers employees to be more productive and successful by enabling them to collaborate easily, make smarter decisions faster, and self-organize into teams to take on any business challenge. It is a new way of working that naturally drives business alignment and agility, reduces cycle times, engages employees and improves relationships with customers and partners.