Open Source + Design

The Open Source // Open Society conference has been on in Wellington over the past couple of days and it covered a broad and exciting range of ideas. The conference took Open Source Software as a model for how processes can be open to participation and explored the application of that concept to government, education and business.

Something that stood out to me was that the role of design in this equation is not well articulated. Principles of collaboration, iteration, and participation are common ground between Open Source and many design methodologies, but this connection is not an explicit part of the discussion yet.

We held a discussion group on Open Source + Design at the conference, and this is a summary of that conversation, plus a few more thoughts I’ve had since .This post covers two topics, which are nicely defined in the Open Source Design ReadMe on Github

What’s the difference between Design Open and Open Source Design?

One group is building a community of designers working on open source, while the other is focusing on building open workflows for designers.

Design Open (or Open Design) targets the wider design community, while Open Source Design targets getting more people (including designers) involved in designing for Open Source.

An awesome image by @GarthDB does a good job of explaining it:

Designing for Open Source Software

We believe, and this is backed up elsewhere online, that Open Source Software is lagging in its adoption of User Experience design, and this a vital for adoption of OSS at scale. We discussed the problem — a lack of social connection, common language and shared workflows between designers and developers.

An idea that came up often around the concept of ‘Open Society’ was the importance of not only providing literal access, but making things easy, usable and meaningful. This is often talked about in relation to open data, but is especially important when we get into the realms of OSS for civic participation. Just because people can, it doesn’t mean they will, and great UX is often what participation hinges on. The internet can only be a tool for a more inclusive, participatory society if we acknowledge and break down the digital divide — and making things easy to use is a huge part of this.

Barriers for designers

We talked about barriers for designers who might be interested in contributing to OSS projects. A large one was lack of knowledge that it’s an option, combined with intimidation from lack of technical knowledge and an easy process for making contributions. I happened to meet an OSS developer at a party, and that is how I found out what Open Source is — how do we make sure there are other ways?

Pathways into projects

It was great to have Kelly (@kellective) with us, who gave a talk on this topic at the Github Patchwork event earlier in the week. She emphasised that there are lots of different sorts of contributions that can be made to OSS projects, ranging from a logo to interface design, process flows, or coding new interfaces and elements. We talked about developing design briefs that could be used by projects to articulate what projects need. Happily, I found one of these design brief templates on the OS Design Github. It could do with a bit more detail, and modifying it might be a good place for anyone keen on this area to start. I also like this post about how to get designers working on your project. It proposes that lay people need:

1. a way to understand the value of your project
2. a way to understand the value they could provide to the project
3. a way to understand the value they could receive from contributing to the project
4. a way to understand the contribution process, end-to-end
5. a contribution mechanism suitable for their existing workflows

All in non-technical language!

We also talked about the importance of making introductions between designers and developers — both online and in real space. There are a couple of events listed in Berlin on the OS Design Github page, we might want to start some similar things here. Connecting with students at design schools might be a great first step — students commonly work on hypothetical projects as portfolio pieces but could be working on community OS projects instead. My own experience of working with developers on a real world project was fantastic, I learned a huge amount. Designers should be able to look for help on their own projects as well as vice versa — it should be a reciprocal community.

Design from Day One

Another barrier can be timing. OS projects are often developer led — especially if they’re personal projects, so it can take a long time before a designer gets involved. Unfortunately, someone asking a designer to ‘make it look pretty’ at the end of a process is not an appealing proposition. You don’t feel ownership and you’re very limited with what you can do. Any suggestions you make for major changes are quite likely to be met with resistance, because the work has already been done. On top of this, we know that design adds the most value when it happens right from the beginning of the process, because that is when we can build user needs right into flows and systems. ‘Spray-on usability’ at the end of a process isn’t satisfying because we’re only doing ten percent of what we could be.

What makes good OS design?

Are there qualities that distinguish good open source design? I think design for reusability is one. When talking about where Government should focus its open software efforts, Ben Balter from Github said “solve it once, solve it everywhere”. Modularity is a well developed concept for software designers, and user experience designers should be actively practicing it too. Pattern Lab is “a collection of tools to help you create atomic design systems”. It provides a framework for the creation of a component driven system design, and I can see how this concept as well as the tool would be useful when thinking about design for reusability — both within and outside of a project.

When working on civic projects, inclusiveness is an important quality, which includes technical accessibility as well as ease of use. Semantic design — i.e. design that stems from HTML structure, makes for better accessibility and also makes things easier for developers to translate into code. What else makes good OS design? How do we foster these skills in our design community?

Open Design Process

An open design process doesn’t need to have anything to do with software — it is a cultural practice that could be applied to anything. Here’s an overview of the elements we talked about which make up open design.

Open and visible

This is stick it on the wall culture — the practice of displaying design from early on in the process. Sharing a physical space makes this much easier, and means that people not only know what is happening, they can engage in the design process. The strength of visual design is that it is a language that can be understood by most people. Having things up on the wall invites informal contributions, ideas and critiques from those sharing the space — not only other designers.

Open to anyone

Along with displaying designs on walls, whiteboards are an important tool. Designers often use closed-source, proprietary software, which limits their ability to open up their process. As well as design being technically restricted to an individual computer, the specialist knowledge of how to use the programmes exclude non-designers. Whiteboards however, are a non-threatening tool for collaboration — (almost) anyone can design on a whiteboard. Wireframing tools like Balsamiq and InvisionApp also offer ways of sharing designs online for modification or comment by others. Wipster is the video equivalent of this.

Opening up the process can happen in other ways too. Co-design is a method where end users of the design are active participants in the design process, usually at an early, workshop stage. They might contribute ideas, help build basic prototypes, and then critique and test designs as they are developed. The level of involvement of users can happen on a scale, from full on co-design, to interviewing users as research, to user testing once a design is built. Here’s an open source Beginner’s Guide to Finding User Needs — this isn’t something only designers and customer researchers should do.

Open to critique

While many designers are becoming used to working openly, we acknowledge it is always a scary thing to share your work — especially when it isn’t finished yet. ‘Argument culture’ is a big problem in some parts of the open source development community — so we need to make sure that designers who contribute have a safe space to do so in. Learning to accept critique is usually part of a design education, but for those who aren’t comfortable with it I’d say that sharing early, unfinished work for feedback really helps — you’re in a better position to hear ideas then than when your baby is finished.

Open to ongoing iteration

Traditionally, design is delivered as ‘big design upfront’, and many designers might be used to this way of working. In software, and especially Agile development, there is an aim of continuous improvement, things are never finished, and change substantially as they are built. This takes some getting used to by designers, but there are many advantages of working iteratively in parallel with development. Ongoing design input helps escape the ‘what have you done to my design?!’ moment that can put designers off — and puts more pressure on designers and developers learn to communicate with each other.

Another new thing for some designers to learn is the possibility that someone else might need to work on your design after you. Documentation, explaining why you’ve made the decisions you have, becomes important. Also, as discussed before, designing components rather than pages empowers developers to build new features from existing designs.

Open to be reused

This is where Open Design becomes Open Source Design — when the original work is available to be reused, modified and even fed back into the original. There is a movement around physical open source design, especially around 3D printers, but this hasn’t stretched into other forms of design much yet. Video Pong is a site for VJs to share and remix videos. When someone creates a new version of a video, they can upload it next to the original, and the line of attribution is preserved. There is this collection of Open Source design templates, but they look quite dated — contributing to here could be a good way to support this culture. However, these are still page designs — I think open source modular design systems could be far more useful.

What is Bootstrap’s role?

Bootstrap is an open source front end framework from Twitter — essentially that modular design system I was just talking about. There’s mixed opinions about Bootstrap — it is responsible for a spread of very similar looking sites online. In my opinion, it’s an excellent model of open source design that lifts the standard of the default. If the sites didn’t all look like identical Bootstrap sites, chances are they’d be very different. The interface patterns would be less familiar to users, making them harder to use. Bootstrap makes the default look quite good quickly, and those with the skills can customise from there.

One problem Bootstrap does have is with accessibility — it fails many requirements straight out of the box. An alternative is Assets, an adaption of Bootstrap from the US Government’s Centers for Medicare & Medicaid Services. Assets complies with their Section 508 accessibility standards. However, fixing accessibility on Bootstrap itself is an important piece of work that I hope gets done soon.

Open Source Design Resources

There are lots of design resources which are under Creative Commons licences. The OS Design group on Github has a resources page with heaps of great stuff. One good example of open source design in action is the Noun Project — where people can submit icons for reuse. Open Source fonts are another fantastic example. There are also Photoshop and Illustrator templates from places like Agile Designer, and Growth.Supply. Usability.gov is a good starting place for usability resources, it has templates as well as descriptions of methods and tools.

Design Tools that are Open Source Software

Of course, open source design software is a whole other topic in itself. Free tools enable people who can’t afford the expensive proprietary software to design. They’re also good for people who’d like to do some design but don’t want to invest too much.

Here’s SloDive’s 15 best OS design tools. I don’t use any of these, do you? What works?

Next steps

Lets foster an open source design community!

Here’s some places we could start:

1. Develop the design brief template further
2. Set up an event where designers and developers can meet each other and hear about each other’s projects
3. Talk to Massey University about connecting design students with OS developers
4. Create some plain English descriptions (or info-graphics) explaining things like ‘what Open Source means’, or maybe a description of the design process to explain why it shouldn’t just happen at the end.

What else?