Building Community at IBM

Studio culture is built by everyone. Here are a few ways I've contributed at IBM Design.

Project Details

Done for

IBM Design Studios

Time

Summer 2014 – Ongoing

Main Collaborators

  • Too many to count

ibmradio-jukebox-brand_spec-feb_26_2016-05

A brand specimen for IBM Community Radio, our internal-only radio platform

I work at IBM Design, primarily as a visual designer for software. And yes, IBM Design is indeed part of International Business Machines, the Fortune 100 company that you, your parents, and your grandparents know from typewriters and Jeopardy-winning computers. Though IBM is over 100 years old, IBM Design as an organization within the larger company is just a few years old. IBM Design is the center for design excellence in IBM, acting as something between a product consulting firm and a digital agency for IBM’s most important software products.

What is studio culture? Why does it matter?

The design and strategy firm Cooper defines culture as “living organisms … brought to life and shaped by the values, behaviors, and practices of people.” Studio culture is the sum of the interactions of the community within any design organization, and it can be either good or bad. An uplifting, inspiring studio culture is a highly sought-after aspect of any design shop, because it fosters creativity, promotes workplace satisfaction, and just generally makes somewhere an awesome place to work.

The great part of a good culture is also the hard part: it takes active effort from everyone in the studio. I’ve now been with IBM Design for just over a year. I wanted to start recording the highlights of what I’ve contributed to the culture so far, and the following is exactly that:

Some of my contributions to our studio

IBM Radio

IBM Radio is an IBM intranet platform for sharing good music, conversation, and critical thought. It started as a passion project that came from the IBM Design studio in Austin, and continues to spread throughout the other global IBM Studios.

As soon as I started seeing photos of it from Austin and one of its founding members, Édouard Urcades, I wanted to be involved. Music has been a huge part of my life, and playing in bands growing up has shaped me as a designer and as a person. As I write on my blog, I love podcasts. Beyond that, it was just a really cool, slightly-subversive, unexpected idea.

I started by sketching a simple badge when listening to a radio show while staying a little late one day late in 2015, and when that got an enthusiastic response from the other designers listening at that point, it started me on a path of gathering visual inspiration, creating badges and artwork for IBM Radio at large, and making ad-hoc GIFs to promote my own weekly radio show, Impeccable Beats Mania. Eventually, this artwork expanded into creating a custom UI and physical request jukebox for IBM Design’s 2016 SXSW event.

ibm_radio-badge_sketch-nov_10_2015

A simple sketch that launched me into many more designs for IBM Radio.

ibmradio-bunnyibm_radio-synthy-500x500
ibmradio-weirdibm_radio-yeezy-500x500

GIFs to promote my weekly radio show, Impeccable Beats Mania, in addition to IBM Radio as a whole.

ibmradio-jukebox-enclosure_sketch-feb_21_2015

For SXSW, we wanted a way for IBM Design party goers to request songs. I sketched designs for a jukebox to give them that opportunity.

ibmradio-makearequest-vector_process

Layers in the vectoring process

ibmradio-jukebox-design_palette-feb_26_2016-05

A brand specimen for the IBM Radio Jukebox

ibmradio-jukebox-screen_recording-short

I collaborated with two IBM developers to create two interfaces for the jukebox: one to allow visitors to make a request from our library, and another for DJs to see request votes come in, and update the listener UI with what they were playing. Above is the listener UI.

Hand Lettering Happy Hour

Even though IBM Design has had close to 200 designers in Austin for several years now, the NYC studio has been a little slower to get larger numbers of designers. For about a year, I hardly got the chance to interact with designers outside the other 4 on my direct team. Our workplace was full of IBMers of all stripes, from marketing to data scientists to executives. The upside was that this allowed me to interact with and learn from a unique mix of colleagues, but it wasn’t especially conducive to a tight-knit culture. Everyone had such a totally diverse set of business objectives and personal interests, we didn’t have as much of a way to connect.

Luckily, near the end of 2015, we started getting more designers coming up from the Austin studio. This has enabled connections and community to a degree that I had been missing from my brief time in the Austin studio. To do my part to strengthen these connections, I wanted to hold a special event to get everyone creating in a way that we don’t normally get to, as software designers and developers.

To do this, I teamed up with Krissi Xenakis, a design lead from another group in the IBM NYC studio, to put on an event we called the Hand Lettering Happy Hour. To promote this event, I hand lettered a series of three pencil compositions, inspired by the neon and hand-painted signs of older, possibly-used-to-be-fancy bars and lounges. To add some extra visual interest and to show that the event was also about calligraphy, I used a wide-tip marker to write the date in two compressed calligraphic styles. I used these variations of base posters and dates to create 6 distinct posters, and 1 eye-catching GIF.

handletteringhappyhour-animation-march_28_2016

At the event itself, Krissi and I both brought all sorts of tools for lettering and calligraphy, set up tables, and provided paper and beer to get people started on making. I gave a presentation to get everyone up to speed on useful type terminology and explain a few important techniques for effective lettering composition and craft.

handletteringhappyhour-audience

For our first skill-sharing gathering, I was excited to have a great turnout! The event was a great opportunity to both learn my craft better by teaching it, and better yet, allowed me to meet designers and marketers throughout our NYC studio that I probably wouldn’t have run into otherwise.

Dribbble posts

IBM Design, not surprisingly, has a bunch of designers that are talented not just in creating UX and UI, but are also good at illustration and more-traditional image-making. One place these designers post work is on the IBM Design team page on Dribbble. This has fostered another little community, in IBM studios across state and country borders, and I’m grateful to been able to make a few shots to the team.

howdy_from-new_york-large_crop-may_26_2015-dribbble

New York, close crop. See it on Dribbble for more context.

This shot is a tight crop from a poster designed in response to a “Howdy from Austin, Texas” poster done by Patrick Chew and Matthew Paul. It takes inspiration from the lettering of Herb Lubalin/Tom Carnase done for The Cooper Union course catalog, 1982/1983.

Since posting this earlier in the summer, I gradually worked on refining and expanding it into a “New York, New York” T-shirt design. It was a long process, because I’m trying to make something that will properly reflect the quality of its inspiration. As a type-designer friend and mentor put it simply: “Well, Tom Carnase was good.”

new_york-print-dribbble-sep_23_2015

After we collaborated on a few more tweaks, Patrick Chew and Matthew Paul did a print run of these posters in Austin, and sent them up to NYC to greet a newly-hired batch of IBM designers. It was a hit!


The Letter ‘B’ in Cameron’s poster

I was lucky enough to be one of 26 IBM designers involved in the “chain letter” poster coordinated by Cameron Sandage: I crafted the letter B. There’s not much to say about this, other that it was fun to be a part of such a fun, playful, international project.

ibm_chain_letter

This dribbble shot was months in the making: it was designed by 26 designers, in 6 studios, across 4 countries. It was started and finished largely because of the coordinating efforts and persistence of Cameron Sandage.

ibm_chain_letter-b-edit

How I often make script letterforms, in a single photo: I draw them many times with a brush or brush marker, then redraw them in pencil to reproduce my favorite qualities in one form, before tracing them in ink or digital vectors.

10985987_1590616084487254_211105149_n

The letter B, made with bezier curves in Glyphs App

IBM_Chain_Letter

The final “chain letter” poster, a collaboration between 26 IBM Designers


Good Design is Good Business

Taking Thomas J. Watson’s famous quote and Paul Rand’s script lettering style, I made a “what if” animation of a neon sign for the IBM Studio at 51 Astor Place.

I also created a dead-simple, one-page website with this GIF, to make it easy for our studio to display this GIF on a flat-screen TV. This site was my first foray into hosting via GitHub pages, which added an extra element of fun to the project.

good_design-good_biz-animation-aug_19_2015

Well said, Thomas J. Watson, Jr.

Tutorials

At IBM, I’ve had to take a lot of time and effort to learn new things. When I face a new challenge and finally overcome it by learning a new skill, I feel a big surge of dopamine. The feeling of those moments makes me to want others to experience them, as well. So, at two of these points, I’ve spent some time during lunches and evenings creating tutorials in the form of mini-websites. What has made this especially productive for me is that by teaching, I learn more fully. By taking careful notes of how to do something complex and then articulating that knowledge for others, I have the chance to truly internalize concepts that I may have otherwise forgotten. In fact, there have been a few instances where I have personally needed the information again, and these tutorials have been a great reference to refresh my own understanding. On top of that, making mini-websites is really fun – it allows me to try new visual styles and development techniques while still delivering something useful to others.

How to Host on IBM Pages, tutorial

Visit the site.

howto-hostonibmpages

For this one-page tutorial, I had a little extra fun: stretching type, using a wacky red-white-and-blue color palette, adding light animations, and creating expanding/collapsing sections for the content.

Just like GitHub offers GitHub Pages, IBM has two internal products called GitLab and IBM Pages, with which IBMers can host web projects. The only drawback is that these aren’t possible to use without a few bits of semi-advanced knowledge. Once I collected the knowledge to host on IBM Pages, I wrote a tutorial explaining how. My particular target with this tutorial was other visual and UX designers who are non-technical, but also interested in learning and doing more with code.

A few things I learned from it:

How to Host on Bluemix, tutorial

Visit the site.

This was the precursor to my How to Host on Pages tutorial (see above). Before I learned how to host on pages, I had figured out how to host static sites (basic HTML/CSS) on Bluemix. I was similarly motivated to share this knowledge with others.

host_on_bluemix-screenshot

One-off websites are lots of fun to create, because they can be about as simple as a column of text and photos on a page.

A few things I learned from it:

  • The basics of Git.
  • How to properly nest items within multiple levels of HTML lists

Web experiments

What is the best font smoothing for Bluemix, and when?

Visit the site.

font_smoothing_on_bluemix-screenshot

One piece of testing font anti-aliasing options was to simply set type in the Bluemix typographic scale, on different common color combinations.

While I was working with Bluemix, a developer asked me: should we be setting font-smoothing to anti-aliasing, aliasing, or none? How do these CSS declarations even really affect the typography of a website? I didn’t know, so I set out to find the answers and make sure Bluemix was delivering the best-possible typography to our users. Through some cross-browser testing thanks to BrowserStack, I was able to learn that font smoothing could help refine instances of high-contrast, large text on Bluemix, but was otherwise best left alone.

What is the most performant CSS font stack?

Visit the site.

bluemix font stack test.mybluemix.net index.html

Is a shorter CSS font stack more performant? Not by much, as far as I could discover.

A few years ago, I was lucky enough to see a presentation about the design and development of gov.uk. One of the central topics of this particular talk was the typeface New Transport, created for specifically for the UK government site by Henrik Kubel of A2 Type. Along with this, a leader of the government’s technology office was there, explaining his side of using this custom typeface. At one point, this leader asserted that their font stack was simply “New Transport, sans-serif,” because as he justified it, providing more fallback fonts in CSS hurts performance. He said this performance hit is there because each additional font in the stack requires the computer to do a round trip of checking for that font, and if it’s not available on the user’s machine, moving on to the next font in the stack, repeating the process until it finds a font available to render.

Does the font-stack performance hit really exist? Try as I might, I couldn’t find much of anything about this topic by searching around Google and Stack Overflow. Spoiler alert: if a performance hit exists at all, it is super minimal. Computers are extremely fast at this kind of task, and I found no consistent page load difference between short and long font stacks.

Team Les Tigres

During IBM Designcamp, I was one of 73 designers starting at IBM with 12 weeks of intense onboarding and rapid project exploration. We were sorted into six teams, and I was lucky enough to get randomly sorted into what was by far the coolest group (in my humble opinion): Team Orange. To give one concrete example of how we were the coolest group: from the start, we opted to give ourselves a better team name. After some deliberation, we landed on “Team Les Tigres,” because tigers are orange and we were feeling adventurous. In Team Les Tigres, I learned that even within a serious, large tech company, creative lettering is a powerful community-building tool.

les_tigres-designcamp

Les Tigres: Ricardo, Amy, William, Lia, Lauren, Leigh, Jo, Myself, Robyn, Shelby, Brian, and Troy (From left to right)

Designcamp Graduation Posters for the Team

I first realized that my team really enjoyed my lettering by decorating some of the whiteboard in our team space. I used these whiteboards to create impromptu “Les Tigres” signs, and this signage helped establish our team as one of the most enthusiastic in our Designcamp. Pretty soon, teammates were commenting that I should go a step further, and make some posters for the team.

Luckily, the IBM Design space in Austin has a DIY screenprinting setup. In the final weeks of Designcamp, I realized that I it really would be cool to make some posters for my team. I knew that this project could help keep our team connected, even as the members were dispersed across IBM, post-Designcamp. While I worked on some lettering for this poster, my teammate Lauren Hartman illustrated portraits of each member of the team. I put these together in Photoshop to create a two-sided poster design, and got some printed transparencies at Kinkos.

With the help of Patrick Chew, I learned how to wash out old screens in a drive-thru carwash, and with the help ofMatthew Paul, I was able to burn screens using his at-home exposure kit (mostly, a heat lamp on a rope), in a darkened bathroom). Finally, I was able to set up in the studio at work, and work with my fellow Tigres to cut paper and pull ink. We ended up with some fun posters, and more importantly, we all came out of Designcamp with tangible reminders of the great people we got to meet and work with.

team_poster_making

We got almost the whole team to help pull ink for our Les Tigres posters.

lestigres-poster

One side of the team poster: “Stay Creasonable” (Crazy but reasonable, a term coined by our team lead, Alvaro)

Les_Tigres_Portraits

For the reverse side of the poster, the multi-talented Lauren Hartman illustrated portraits of each member of the team, and we combined these with another of my logos for the team.

Whiteboard Murals

“26.2”

Soon after starting his position as a design lead at IBM Design in New York City, Sean Lee took a trip up to Massachusetts to run in the 2015 Boston Marathon. Our design group wanted to give him a special welcome back, so we cleared off the whiteboard next to our team area and I created a large grid to write a message to greet Sean upon his return. As it turns out, Sean is a serious runner, and completed this marathon in 2:47:49. I included this fact to let everyone else in the office to know that us designers are a collective force to be reckoned with (or at least our design lead is).

11116664_1613537012216860_1587552739_n

Sean, my design lead, who did the really impressive part of this (running the marathon), was kind enough to pose with the final product.

“go big”

A “Congrats” message can’t be left up for very long, and I wanted to put up something on the office wall with a theme that could hold up for a little longer. I used a simple English-to-8-bit-binary translator to lightly abstract a message that, to me, describes a core goal in the projects I see around me at IBM: “go big.” It was a hit, insofar as a whiteboard mural in an office can be: developers in the office annotated it with binary mathematics, assuming deeper intellectual meaning than a simple motivational statement, while other onlookers looked more like subjects in stock photos for “people looking at art.”

binary-go_big

One of my many talents: standing next to things to provide the roughly average height of an American male, for comparative purposes.

Break the Twitch