Matt Griffin on the joy of doing meaningful work

Bearded is one of five shortlisted nominees for the Agency of the Year award in the 2014 net Awards. We spoke to Matt Griffin about the adventures of the last year, including making a documentary about the multi-device web, writing an A List Apart column and hiring content strategists.

Tell us about some work you're proud of.

Just as Bearded was launching our first-ever responsive client project - a HOW Interactive Design Award-winning redesign of the Children's Museum of Pittsburgh - we had the opportunity to create a responsive site for the Pittsburgh Glass Center. Like many of Bearded's sites, pittsburghglasscenter.org is actually a custom Rails application that performs a host of tailor-made tasks to help the Glass Center accomplish its goals. The site serves as a wherever-they-go resource for artists, educators, hobbyists, and community members whose collaboration brings to life the Center's philosophy of egalitarian, hands-on art-making.

Aside from the massive back-end functionality - which includes a custom, highly granular management system for the Center's facilities and classes – the bit I'm most proud of is the calendar view. It's a refinement of the approach we developed on the Children's Museum site, where we tossed the traditional table-based calendar markup, and re-wrote everything as semantic HTML5 (articles and sections). We styled the smallest viewport width as a list view of events, hiding any event-less days or other markup that didn't make sense for that presentation. Once we hit viewport sizes that were wide enough, we laid out the same content as a monthly calendar. This calendar view seems so simple to me now, but at the time it was kind of a breakthrough that a 'calendar' is simply one way to organize the content, which is really just a series of events. This is a great example of a new responsive design pattern that we continue to use today when developing events calendars.

I'm also a huge fan of Matt Braun's studio rental icon designs near the bottom of the Glass Center homepage. They're vibrant and exciting, abstracted into highly geometric forms. Yet when the Glass Center staff saw them, they immediately knew what they represented, and were thrilled at how he'd captured the essence of each stage of glass-working so well.

In addition to being web nerds, Matt Braun and I are both antique letterpress printers. We're especially fond of wood type. Matt had the great idea of creating a Kickstarter to raise money so we could scour the globe for lost historic typefaces that existed only as wood type - and faithfully convert them into digital fonts. The idea caught on and ultimately led to us to creating woodtyperevival.com to distribute the rewards. We've set the font prices super low because, really, this project is just about returning lost old typefaces to the modern visual vocabulary.

Bearded had a lot of fun with the site design - using scanned original wood type prints that we created, and commissioning illustrations from some of our favorite designers. Some day we're looking forward to a responsive redesign. Just gotta find the time!

Bearded spent a good part of last year designing and building Zoobean, a responsive web application that connects kids with the best books for them. The original problem Zoobean's founders posed to Bearded was that it can difficult to find books that depict children of different cultural and racial backgrounds. So we created a system by which kids can be matched up with books not only by qualities such as character ethnicity or religion, but also by the child's gender, age, reading level, and a host of other options, including the book's genres and themes. Parents can customize their kid's preferences using a fun, illustrative interface, and the app - using a system of requirements and algorithms - picks a new book each month to send from Zoobean's catalog. The app then communicates with a shipping center's API to get those books physically delivered to the child's home.

This project was the first time Bearded used a process we're doing more often now - on-boarding the client's internal team so we can hand the project off to them for future development. We brought Zoobean's two-person design and development team in-house at Bearded for more than a month, trained them on our code and approaches, and paired with them on the project's final features. After that, Zoobean's team knew everything we did about the project, and they've been iterating on the designs and features ever since.

Tell us your story. How did you get started?

When Bearded started in 2008 we were just two guys working out of our attics. I had been at a more traditional graphic design agency here in Pittsburgh, and in general I wasn't happy with the work I was making, or the impact some of those clients were having on the world. It was clear to me the riskiest option was to stay where I was and keep doing what I was doing, where I'd certainly continue a life of dissatisfaction. As it turns out, there's nothing like certain despair to help you overcome the fear of uncertain disaster! So I took the leap to start Bearded and test my theories about what would make a good design practice out in the real world.

From the get-go, we threw every ounce of our designerly beings into making dirt-cheap work (when you have no reputation, being inexpensive is all you've got!) for small nonprofits that we believed in. We built a quality portfolio of work that was based on thoughtful designer-developer collaboration, and a reputation for being nice folks that seriously nerded out on the internet. Pretty soon we grew to our current team size of six people, and that's where we've stayed.

I've never wanted to be a big agency - even though that seems like a more profitable route. There's just something really attractive to me about having a single, close-knit, crackerjack team of web nerds with a wide range of skills and experiences. I feel like we really have that at Bearded now. We can tackle any project we want to, and come out victorious and better at what we do on the other side. I trust my team implicitly - they're some of the smartest people I know, and quite frankly they're my best friends. What more can you ask for?

What has happened over the last year?

Oh man, what a year it's been! For efficiency I may have to resort to the dreaded bulleted list! Here goes:

• This year has brought incredible (and humbling) speaking opportunities to me and the Bearded crew. We spoke at great industry events like Artifact, Breaking Development, Converge, Web Design Day, and more. Getting to share our ideas with our peers face-to-face - and getting their feedback - has been fantastic. Not only that, but I’ve been able to meet many of my web heroes in the process - talented, generous people who I now have the privilege of calling my friends.
• I started writing for A List Apart in 2012, and in 2013 I began writing my own column there, called Matt Griffin on How We Work. Flattered? Yes. In disbelief? Also that, too, yes. Like many of us, I’ve been reading ALA since I don’t even know when. Having those folks encourage my writing and welcome me into the fold has been unexpected, thrilling, and honestly a bit surreal.
• We’re working on a documentary about the multi-device web called What Comes Next Is the Future. So far we’ve interviewed super-smart people like Ethan Marcotte, Luke Wroblewski, Stephen Hay, Sara Wachter-Boettcher, Josh Clark, Jenn Lukas, Greg Hoy, Jennifer Robbins, Val and Jason Head, Jason Grigsby, Stephanie Hay, Kevin Hoffman, Ben Callahan, and more. We're now editing together a trailer to help promote a Kickstarter project to raise funds so we can expand the scope and do it up right.
• At Bearded, we're web people before business people. So for much of our history, we were just scraping by financially. In 2013 we made a conscious decision to change that. We started applying the same iterative creative thinking we use with our web processes to our business processes, too. We looked at people’s motivations, at our values, and of course at the data. Then we made (sometimes difficult) changes to how we structure our estimates and invoicing, our contracts, how we manage client relationships - anything that seemed like it could benefit from our attention. Thanks to those efforts, Bearded is now on solid financial footing for the first time ever, and we did it without compromising our values or mistreating anyone. Feels good, man.
• A few months ago we hired our first full-time content strategist. I've (perhaps slowly) come to understand that designing content is at least as important as any other work we do on a project. The clarity it brings to our design and development work is invaluable. In my opinion it's already started raising the bar on every project we do.

Do you have any special philosophies that drive your working practices and company culture?

When we began Bearded we decided on some key principles: That making great web things requires constant collaboration between the many disciplines involved. That quality of work is more important than making boatloads of money. That open communication and honesty are essential to quality relationships. And that we want to spend our days helping people and organizations that are doing positive things in the world. Those initial ideas have guided our decisions consistently over the past five and a half years.

We run our office transparently. Our books are kept on a Dropbox folder that all Beardeds have access to. Everyone knows how much money is in the bank, where it came from, and helps decide where it goes. We all know each other's salaries, and things are open to talk about that, if it ever seems imbalanced. We keep that kind of openness with our clients, too. We let them know exactly how we're spending their budget each week, and keep them informed of options they have for spending (or not spending) their money to meet their goals. Everything from a design change to a contract term can be a conversation. Clients aren't "clients," they're just people. And they're essential collaborators in our process, so we treat them that way.

What sets you apart from the rest?

At Bearded, we heart the internet like crazy. And the internet's always changing, so our processes do, too, to keep up. Whenever we figure out something out that's useful to us, and might be useful to someone else, we share it right away - on our blog, on my column at A List Apart, or on GitHub. The web community is so open with their knowledge, and the internet has given us all so much over the years - there's no way we can ever repay that debt. So we do our best to balance the scales just a little bit whenever we can by sharing whatever we've learned.

We care deeply about the quality of work we produce and the positive effect that has on our clients. It's also important that we have a limited amount of time to spend in our lives, so we'd better be doing things that matter to us. That's why we focus on working for organizations that we feel good about at the end of the day.

Right now we're working on projects for the Carnegie Museum of Art and The Leukemia & Lymphoma Society. Our project with the Museum is to build a custom web application that helps foster conversations between the public and art professionals about the nature of photography. For LLS we're helping them reimagine a suite of web tools that people all over North America use for fundraising. If we're successful at that redesign, then we'll literally be raising more money to help cure cancer. I can't imagine a better challenge to be tasked with, or a better example of why we started this whole thing in the first place.