HeroPress: Becoming a Better Designer Through WordPress
HeroPress: Becoming a Better Designer Through WordPress
The early years
I’ve always been an art kid. One of my first school memories is of drawing a clown and my art teacher being so enamored with it, she hung it up on her door for the whole year.
The first time in my educational life I didn’t take an art class was my first year of college. By the end of the year, my fingers were itching and I was ready to scream — I had to take art. It didn’t take long for me to declare a Studio Art minor, which eventually became an Arts and Technology minor my senior year.
I’ve also always been an internet kid. We received our first internet-connected Windows desktop in 1997. I’ll never forget the sound of dial-up as I signed into AOL, day after day for years to come. When my older brother started working for an ISP, we were able to go beyond just using AOL to connect, and I started spending more time exploring websites (rather than just AOL’s apps and chat rooms). I wanted to be like my older brother and learn how to make sites. I taught myself basic HTML by using View Source on existing sites — even back then, I was benefiting from the open web!
Angelfire was my earliest web canvas. A couple of my friends eventually got into making websites, but I was always a little disdainful of them for using Homestead’s GUI builder, while I was making my sites from scratch. I had a blast making image-rich personal and fan sites with tables and HTML styles. Landing a copy of Photoshop Elements in high school only intensified my enjoyment of web design. I kept that passion up through college, when I found my first design gig.
Could this be a career?
My first year of college got off to a bit of a rough financial start. By the time my financial aid was finalized and I was finally able to pick a work study job, my options were pretty limited. A dance professor needed an assistant to help her with some photocopying and organization tasks, along with helping her build out a print and web portfolio.
I was honestly a terrible assistant, but I did a pretty good job with the design work. I continued to refine my skills working in the computers labs in subsequent years, and in my Junior year of college (ten years ago!) I landed an internship at a local web design agency. That internship turned into a part-time job, which opened up doors to more local web design opportunities, and soon I was graduating college and pretty well situated into the start of my career.
It was at these agencies that I started learning how to build WordPress websites. I’d used WordPress a couple times in college and felt comfortable with it, but now I was focusing a lot more on building my skills as a designer and front-end developer. My girlfriend (who was working at the same web agency) and I managed to convince our boss to start letting us create totally custom websites, rather than customizing existing themes, and that opened up a whole new world of design opportunities.
My first WordCamp
It was around then that my girlfriend, who attended WordCamp NYC the previous year, noticed the conference organizers were looking for some volunteer designers to help create some graphics. She passed along the information, and I got in touch.
I collaborated with a few other designers to create the WordCamp branding, which was used across the website, t-shirt, signage, and stickers:
It was amazing to see it everywhere at the WordCamp. It felt really special. Though I didn’t get “props” for this, I still consider it my first contribution to WordPress.
WordCamp NYC was a ton of fun. I met interesting people, learned a lot about WordPress, and started to get a feel for the community. I left with a desire to get more involved. I browsed through WordPress.org, stumbling upon the “Make” section. I was stoked to see that there was a design group. I couldn’t write much code beyond CSS, but I could contribute my design skills. I joined a couple of the core channels on IRC, including the design channel (#wordpress-ui), and observed for while. I watched how the other designers in the project communicated, what they worked on, where they presented their work, etc. By observing before participating, I could learn the social queues and mores of the community. I didn’t want to embarass myself — I wanted to do things the established way based on community standards.
What I found to be one of the most difficult parts of contributing was adapting to the technology used to build WordPress. I had to learn how to use command line and SVN. Getting set up in SVN and terminal was probably the biggest thing that stopped me from contributing code during my early years.
But most of all, it came down to conquering fear. Fear that my design skills would be unwanted and unwelcome; fear that other contributors would look down on me or ignore me, or that they’d find me irritating; fear that I just wasn’t good enough to contribute. Some of this fear persists today, albeit greatly reduced.
There’s a point at which I managed to conquer a little bit of that fear, stop observing, and really start to pitch in. Slowly, I started chiming in and volunteering for design tasks in IRC and the Make Design p2. I ended up doing a lot of small projects on the community side (rather than the core side) at first — some new landing pages and redesigns of sections on WordPress.org, graphics, and design for my own local meetups. I started feeling more and more confident with my contributions.
By this point, I had done some wireframes and mockups for the core WordPress software — I’d even spoken at a WordCamp! — but I hadn’t actually gotten any code committed. Which meant, at this point in time, I didn’t have any “core props.” I was still really intimidated by Trac and SVN. I was a designer, and most design conversations happened in explicitly design space. But I really wanted to get some code committed into core, so I needed to find a CSS bug I felt qualified to fix.
At WordCamp Philly in 2012, I finally got a chance. Sunday was devoted to contributing to WordPress. There were experienced core contributors present who could teach people how to make a patch, how to submit a ticket, and suggest tickets for people to work on.
Aaron Jorbin, a core contributor and fellow speaker (and, now a friend), found a CSS issue I could work on: bringing the alternate “blue” color scheme into sync with the default “grey” scheme. He helped me get set up, helped me through saving my changes as a patch, and then helped me submit that patch to Trac. Andy Nacin, another core contributor (and future friend!) subsequently committed that patch, and I received my first core props.
After creating my first patch, contributing became easier and easier. My confidence grew, and I spent more time participating in IRC, p2s, and Trac discussions. Then, in January of 2013, major design changes started coming to WordPress.
My WordPress apprenticeship
It started with icons.
Ben Dunkle, WordPress’s official icon designer, proposed some shiny new icons for the WordPress dashboard. They were “flat” — one color, not a ton of details. The icons were awesome, but they didn’t really fit stylistically with the rest of the admin. The flat styles clashed with WordPress’ heavy use of gradients.
So, I helped imagine what the admin could look like totally flat. We tried out a couple ideas, got them committed, and refined in code. The stark styles looked really fresh after years of gradients!
Unfortunately, flattening the admin unearthed a whole lot of other issues. There wasn’t enough time to flesh out the new design before the next version of WordPress launched, so the flat styles got reverted and tabled for another time.
Pretty soon after, I received an email via my site’s contact form:
Comment: Add me on Skype when you get a chance.
I think my heart stopped when I realized I had been emailed by the co-founder of WordPress, Matt Mullenweg. Matt invited me to come join a group that would take a broader look at redesigning the admin (codenamed “MP6”). It meant a lot for someone as important as Matt to recognize my skills. I spent a lot of my early years as a designer plagued with self-doubt, and suddenly I had someone pointing at me, going “I believe in you!”
I leapt at the chance.
Our group worked together on Skype. We quickly scoped the goal of MP6 to only update CSS and a little bit of JS. I helped Ben make some new vector icons, gave feedback and critiqued design proposals, and made some design proposals of my own. It was an intimate group where we all felt free to safely share and critique each other’s work. The mentorship I received from more experience WordPress designers was invaluable to my growth. Working with these veterans of WordPress really helped me to grow into my fledgling wings.
WordPress 3.8 shipped with the updated admin interface, and I knew it was time to take my design career to a new level.
Leaving the nest
I’d had my eye on Automattic, the makers of WordPress.com, the Jetpack plugin, and many other products, for most of my time contributing to WordPress. A couple of the designers I worked with on MP6 were Automattic designers, and it was an absolute joy to collaborate with them. At this point I’d spent so much of my career as either a lone designer, or in a competitive environment, that having a supportive, collaborative group of people helping me improve my work was a revelation.
I desperately wanted to work at Automattic.
While MP6 was in the works, I participated in a three month long design apprenticeship at a local agency. I worked alongside experienced mentors and fellow apprentices to hone my interface and user experience design skills. It was challenging and thrilling and totally complemented the mentorship I was receiving from WordPress folks. Plus, working in a positive environment reinforced my desire to work somewhere similar.
After the apprenticeship, I finally felt like I had the skills and confidence to apply. I spent a lot of time writing my cover letter, and redesigning my portfolio to use in-depth case studies on a small number of recent projects. I finally sent off my application and crossed my fingers.
A couple weeks later, I received a reply back asking to schedule an interview. I was terrified, but luckily, Automattic conducts interviews via text, so I was able to hide my fear behind my keyboard and hopefully try to project confidence. (Aside: I also show all my emotions on my face, so online communication is the best.)
It must have worked, because I was moved on to the next phase of the application, doing a self-contained trial project, which was a whole ton of fun. I was able to put my recently refined research, interviewing, and user testing skills to use. I loved being given a real challenge to tackle. My trial went well, so I was moved along to the final interview with Matt Mullenweg. We spent a couple hours chatting on Skype, and at the end of our conversation I was given an offer. Welcome to Automattic!
After working so hard on my apprenticeship, and on MP6, joining Automattic felt incredibly validating. The work I put in, the mentorship I received, all of the collaboration, led to this moment. I felt like I had graduated from apprentice and was now embarking on my adventure as a design journeyman. And boy, has it been an adventure!
The past four and a half years at Automattic have been fantastic. I have the best coworkers anyone can ask for. I’ve worked with some incredibly talented and empathetic designers, whose guidance and feedback constantly encourage me to improve my skills.
I’ve continued to contribute to WordPress, slowly gaining more responsibility in the project the longer I stuck around. That’s the secret to becoming an open source leader, I discovered — decisions are made by the people who show up.
In 2016, I was asked to by the Release Design Lead for WordPress 4.5 “Coleman.” I worked alongside the other release leads to make design-related decisions that impacted the release. This was the first release we experimented with having a Design Lead. I felt like design finally had a seat at the table.
This continued to be the case last year, when Matt Mullenweg announced core focuses for the year: Editing, Customization, and the API. Both Editing and Customization had designers co-leading their focus. I was named the Customization co-lead. I’d been working on customization and site building on WordPress.com for over a year, so I had relevant experience.
I worked with my developer co-lead, Weston Ruter, on low-hanging fruit, most of which we released in WordPress 4.8. The release was smaller, focused more on improvements than new features. We made a lot of updates to widgets, which had been long neglected.
After that, we turned our sights to some more ambitious projects: drafting and scheduling changes in the Customizer, improvements to code editing in the WordPress admin, even more widget updates, and upgrades around the flow of changing themes and building menus for your site. We took a design-first approach to building out these new features, and I think it really shows in the work that we produced during the 4.9 release cycle, which Weston and I co-led.
WordPress 4.9 “Tipton” launched in November. Since then, I’ve pivoted to work on Gutenberg, the new editing experience for WordPress which should be released in 5.0. Once the editing experience wraps up, we’re going to start looking at how we can extend Gutenberg to cover site building and customization. It’s a big, audacious goal that I hope to pursue with caution, humility, and a spirit of adventure.
I owe WordPress a great deal. The connections I’ve made, the skills I’ve honed, and the mentorship I’ve received have all contributed to making me the designer I am today. I hope to give back for years to come!