How to empower designers to code

For many designers the best way to learn front-end development is on the job. Many companies want to attract designers who code, but may fall short of providing enough support.

Ironically, a lot of designers who could code, don't do it as part for their job – not because they don't want to, but because their workplaces don't take any steps to support them in doing so.

So what helps turn a workplace into an environment that empowers designers to code?

01. Set up development environments from the beginning

Get new employees set up to contribute code as early possible. At Etsy we do this as part of our onboarding process. Designers go through a tutorial in the first few days and push a small code update to Etsy.com. They have to set up their development environment and understand our workflow - such as how to work on code locally, how to use Git, and how to run tests before deploying. From this point on there is no barrier to them coding on production.

Whether you allow everyone to deploy or not, make sure you teach new designers your process early, before schedules get busy with project work.

02. Help designers build relationships as they onboard

There's usually a lot more to learn than setting up the development environment, and even at small companies there will be more than one person that can help with training. Pairing designers up with different team members throughout the onboarding process gives them a wider network of support, and helps them start building relationships with their teammates.

03. Make it easy for designers to build confidence

It’s harder for new coders to build confidence if they are afraid of breaking things. While services like JS Bin and CodePen can be great places to practice coding and quickly prototype ideas, it's better if designers are able to practice with the same code they’ll work with on production.

Most organizations use Git for version control. Teach designers how to work with Git branches. Branches are a good way to experiment with production code while keeping it away from the main codebase.

At Etsy, we set up sandbox environments for prototyping designs. They use the same style guide we use on production but are separated from the main app to make it fast and simple to work in. Sandboxes have made it easy for designers to explore layouts in the browser and are often used as a replacement for common design tools like Sketch and Photoshop. After coding up a prototype, designers can share a URL to their sandbox to get feedback or send out a code review because sandboxes are tracked in Git.

04. Document everything and keep it up-to-date

Many creative folk like to try and figure things out for themselves. Keeping everything documented allows people to be autonomous.

Arguably one of the biggest issues is keeping documentation up-to-date, and it can be harmful if you don’t. While there’s no silver bullet, you can reduce discrepancies by building documentation updates into other processes.

If you update code, make updating the accompanying documentation part of your practice. Keep documentation with your code if you can. It’s easier to think about updating when it’s right there with the code you’re updating.

Use routine events such as training and onboarding to review documentation and spot out-of-date material. Make it part of your process to:

• check through documentation and make updates before running a training session
• make notes during the training session if you find things need improvements
• ask for feedback and build in time to make updates.

05. Improve development workflows with tooling

Tooling can make designing in a development environment much more enjoyable. As your engineering team grows, it’s likely you’ll start to build tools that help with your development workflow. Consider how they might also help designers.

Designers are passionate about the user experience. Make it easy for them to see when their code impacts users, and they’ll start to learn better practices. At Etsy we see a toolbar whenever we’re logged into Etsy.com or our development environment. It shows us information such as page performance and accessibility issues. It’s highly visible so that everyone can see if they’re reducing the quality of the product while working on the site.

Automated testing and CSS linting are great ways to review problems with code. Tests help designers (and everyone) be confident that their code won’t break the build or reduce the quality of the product.

Reducing the feedback loop is important for everyone. Designers are used to seeing changes instantly in design software. Seeing code changes in real-time makes designing in the browser more enjoyable, speeds up the design process, and helps designers gain a deeper knowledge of how the code works. Tools that allow you to see instantaneous changes will be a designer's best friend.

06. Make coding part of your design culture

Building a culture where designers feel empowered to code takes time, so start from day one. Include training during onboarding and remove barriers as earlier as possible, be thorough with your documentation, and build tooling with designers in mind.

Events such as hackathons, regular bug-killing rotations, or lunchtime talks are great ways to help spread knowledge, offer opportunities for engineers and designers to build a rapport, and help designers become more familiar with engineering work.

True collaboration isn't throwing designs over the wall. It's designers, engineers, and the rest of the team sharing the responsibility to build a quality product. Reduce the barriers, support and empower them, and designers who code will become the norm.