Design Adventures in Open Source

Last two years were probably the most fulfilling years of my career. I consider myself active in our community, especially in the WordPress community where I helped organise WordPress Meetup Zagreb and was the lead organiser of WordCamp Zagreb 2017 — our biggest and most elaborate WordCamp in Croatia yet hosting 400 people over three days.

But I’m a designer at heart, and while helping out organising meetups and conferences is great, I love to improve things through design.

This article is based on the talk I did at WordCamp Stockholm 2017. Watch the video of the talk on YouTube or WordPress TV.

Expand Horizons

Over the years I travelled to dozens of conferences, from bigger ones like Fronteers in Amsterdam, SmashingConf in Freiburg to smaller conferences like Kerning in Italy. One thing that always resonated with me was the experience — ranging from talks, networking and ultimately the design and the attention to little details. Badges, lanyards, stage setup, websites… In the last several years I’ve also spoken at a lot of conferences — WinDays, WebCamp, HWSW mobile!, Drupal Heart Camp and a whole bunch of WordCamps.

Conferences I have visited over the years

Some of these conferences are commercial ones, where the ticket costs 500 euros, and some of them are community-based which keep the price of tickets to 40-50 euros. The biggest difference between the two is that the commercial ones are paying their speakers and trying to earn some money from it (which is perfectly fine) while the community ones count on volunteers from its very own community to step up, help organise, apply to speak, design and make sure everything goes smoothly.

Why Are They Doing This For Free?

The thing I as a designer like, is that all these conferences try hard to showcase some extraordinary design skills: branding, lanyards, stationary assets, website… Which is interesting considering the community conferences are counting on designers doing that for free. Why is that?

After speaking at WordCamp Europe 2016 in Vienna, Austria — I wanted to help out. It was the biggest conference I’ve spoken at so far. There I was, speaking in front of hundreds of people (completely nervous) about modular design, style guides and my workflow. After the talk, I was relieved that it was over. I finally got to enjoy the conference and all the work the organising team did to make all of us, speakers and attendees feel welcome. Feel good.

I thought to myself — “Hey, I’m talking about this modular design, style guides and why they are cool — why not offer my help to the organisers in making the next year even better?”. And that’s what I did. I talked with Scott Evans, one of the designers for 2016. (who did the outstanding work on the website) and I was determined to help out and put my design skills to the challenge.

Soon as the call for organisers was published for WordCamp Europe 2018, I applied. Several weeks after that I was informed that I was chosen to be a part of the design team. The whole team was counting 44 people, out of which six were in the design team, headed by Sonja Leix, our team lead. In the next nine months, this team was responsible for everything design related — from stage setup, badges and t-shirts to website and branding.

I was fortunate to help on some of these tasks, and I learned a lot from it. Having a team of 6 people, working remotely across the globe in different time zones, in their spare time to prepare one small part of the conference that will be held in 9 months probably sounds crazy. And it is.

WordCamp Europe is a yearly regional conference dedicated to WordPress ecosystem, that changes location every year. Every year tries to take on a different visual style, colours, but the branding was always barely tweaked. For 2017, the team decided to go with an art deco style as sort of a homage to Paris in the 1930s. One of our big goals for this year was to work on the new logo, one that would serve as a foundation for future events.

This was no easy task, considering that the conference is changing location each year and you want to be able to customize the look & feel of it — make every location and event feel unique, while still keeping that familiar face throughout the years. We were also working in parallel on updating the site itself which was challenging in its way.

When You Have A Hammer Everything Looks Like A Nail

Building a website sounds easy right? You just open your favourite editor, get a framework you are used to working with and get started. Well, it wasn’t so easy. WordPress being an open source project and WordCamps community conferences — there are certain rules and limitations you should be aware of. When a WordCamp is scheduled, a website is created by the Foundation. You can log in and change the theme, use one of the pre-existing themes that come with WordPress or start with one of the vanilla themes that have no styles.

WordCamp Europe 2017 website

You can add your styles or modifications as a part of CSS, or change the CSS completely and load your own. You can’t change the PHP files of the theme since that specific theme can also be used by hundreds of different WordCamps relying on that code. It’s up to you to make your process work with what you have available and not the other way around. That was my first lesson. I knew I had to work under constraints and I just had to find a way to modify my process to work within those constraints. Over the next few months, using the style guides and a modular approach, I was able to speed up our design process for the website in a modular and flexible fashion.

WordCamp Europe style guide is available on GitHub

Meanwhile, there was still the branding challenge the team was working on. The initial WordCamp Europe was designed by Tammie Lister. It served its purpose for a few years, but as the event grew and the location changed each year, the logo had to be updated to reflect that. The logo was circular, with a lot of dots outlining the map of Europe, with the WordPress logo in the middle.

WordCamp Europe 2013 version

The concept was good as long as the location wasn’t directly underneath the WordPress logo. Which of course happened. The 2016 design team thought about redesigning the logo as well, but they hit a roadblock. Some interesting concepts were shared though; I especially liked the idea from Scott about creating a logo generator, something that inspired me to try something different.

My design approach was to identify all the issues the current logo has and to provide a concept that would take that into account. I wanted to make sure that the logo:

  • is unique for each WordCamp Europe,
  • works in black and white and is fairly recognizable,
  • tells you that this is a European event,
  • could be recreated or exported with SVG,
  • communicates that this is (WordPress) community event.

Everyone from the team started to work on their concept which we then shared with each other after a week. We discussed each proposal internally and presented all concepts anonymously to other organisers. Sonja collected all the concepts we prepared and wrote several notes about each idea our team examined. Of all the concepts shown, the organising team voted for my version as one of the top candidates but more importantly, they provided valuable feedback from a different (non-design) perspective. It was still a rough concept, but it communicated my idea.

Good Designers Are Communicators

People are passionate, when they see something they like or dislike, they say it. Way you say things is as important as what you say. That was my second lesson. You are discussing ideas with other people who are volunteering valuable time and skill to do something for the community. Most of the time you are chatting, communicating with text, emoticons and GIFs. But we are not all the same.

Not everyone is a native English speaker or has the same vocabulary. Someone can perfectly summarise their ideas in a few sentences while others need a voice call, video or even talk in person to make the message across. Be prepared to spend as much time communicating as you spend designing — you are not working alone. Try to understand people around you. Don’t just dismiss their idea because you think you have more experience, time, leverage or just because you think you are better suited for the job.

The logo iterations went on. Guided by all the constructive comments and my strong passion for communicating my idea — a logo generator was born. Being a designer and front-end developer, I wanted to utilise my skill to take a different approach to design critique. It took a few hours, but I built a logo generator by manipulating SVG exported from Sketch.

Quick prototype for testing the idea

In the next few weeks, we worked on iterating the logo and found the sweet spot for communicating our initial idea. We tried to locate the balance between the realistic representation of Europe and a more symbolic one. We were aware that simplification would have a downside, but the team (who are mostly scattered across Europe) agreed.

We tested several approaches during the design process

The logo was introduced to the public, on the website and in all other materials for the conference. And by all, I mean everywhere. Badges, banners, stage, t-shirts… even socks. During the event, I remembered Sonja asking me if I was proud seeing my logo on the big stage. I was. I was proud, and I had that fuzzy feeling inside telling you “your work is appreciated”. But to tell you the truth, I was even more proud of our team who inspired me and motivated me to do it. It was a team effort because my work was built on top of someone else’s concept, improved, remixed and infused with my thoughts and ideas. Starting from the typeface or colours that were picked in advance, to all the feedback I received from the team which improved the final version.

The final version, you have probably heard these words before. It’s not the best term to use when designing something that community will use and call their own. Soon after the conference, we got one unusual request which we were more than happy to fulfill after discussing within the team.

Becoming A Better Designer

Designers are often waiting for that one perfect project where they will show off their skill and make it a career project. Most of the time it doesn’t work like that. A lot of skills I have acquired over the years were improved thanks to the open source community.

For example, several months back, I made a successful Design sprint and a series of user interviews to validate the prototype I was working on for a client. But I had help. Sometime before that I was at WordCamp London where I’ve met Johan and Martin at WordCamp London Contributor Day, and together with Tammie’s insight, we prepared a set of questions and tested several assumptions about the new Gutenberg editor.

We did several user interviews, took notes and discussed the results. Not long after that, Anna Harrison (who I’ve met at WordCamp Europe this year) took our testing script and did her user test on a local meetup in Melbourne. She improved the script with her own experience and advice and gathered a lot of feedback on the editor that will power 28% of the web one day.

That is, for me, the true power of community and open source.

Through The Looking Glass

Being involved in the open source community might come at a cost. You don’t always have time to contribute or you are simply not in the mood. I’ve certainly felt exhausted at times but I still keep coming back — seeing how the connections I make and things I learn enrich my life.

Next time when you visit a meetup or a conference or use some open source software you are passionate about — think about contributing back and make that first step.

You can contribute to open source in a range of ways. Don’t make the mistake of assuming that the only way for you to contribute to open source is by writing code or reporting bugs. There are so many different ways for you to contribute which include: organising events, speaking and volunteering at conferences, doing QA and testing, design layouts to improve usability and accessibility of a project.

If you had asked me a few years ago how to become a part of the design team for the biggest WordCamp in the world — I’m not sure what I would have said. Today I have a rough idea though.

  • Find the project or a community you are passionate about.
  • Learn what people there are working on by joining their meetings, mailing lists, blogs etc.
  • Introduce yourself and ask how you can help. I doubt people will refuse your help.
  • Do the work you can — you’ll feel good afterwards.

Start small. Help people around you. Give back to the community and remember to have fun.