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 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.
The jukebox lives! Tonight in Austin, IBM Design had their SXSW party. I wasn’t able to be there in person, but I was able to contribute the design of this jukebox structure, visual system, and UI. Even better, I also got to work with some fellow builders to make it happen, including the amazing developers @unakravets and @alexhadik. (Photo by @mudshock).
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.
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.
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.
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.”
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.
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.
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
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 fun it is to develop with Gulp Watch, to achieve near-instant gratification from code changes
- Using SSH keys to more quickly push to my remote Git repository
- Using the “Checkbox Hack,”
- Animating with CSS Transforms and Keyframes
How to Host on Bluemix, tutorial
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.
A few things I learned from it:
- The basics of Git.
- How to properly nest items within multiple levels of HTML lists
What is the best font smoothing for Bluemix, and when?
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?
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.
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.
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).
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.”