The collaboration between a front-end developer and talented designer is how amazing user experiences get built and refined.

Our team does periodic design reviews here at SPARC to review design quality and discuss the design process – what’s working well and what can be changed. Lisa and Harrison are both extremely talented team members on different ends of the design spectrum. Lisa’s crafts beautiful UI & can take a client’s brand and make it sing. While Harrison is a front end guru who helps translate Lisa’s ideas into a User Experience. They’ve worked several commercial projects together and have arrived at a solid working relationship. I’ll often observe them standing at Harrison’s monitor tweaking code and going back and forth. This behavior got me thinking about a few elements of our Agile Design process at SPARC that deliver results.

Separation of concerns: Design and Development 

I refer to a great designer who can design and develop with equal quality as a unicorn – because they don’t exist. Everyone on our team designs and writes code to differing skill levels, but Lisa and Harrison balance each other through the fact each has a specific are they excel at. As a designer responsible for both design & delivering the final code, I’ve found myself limiting the design knowing later I’ll have to build it. Your mind naturally thinks ahead to how it will be coded and not completely about the experience. It’s hard to separate these concerns.

There’s a huge advantage as a designer understanding code, it helps participate in the execution and understand what’s possible. Just as a developer needs to be empathetic to design to understand “why” something needs to work a certain way. But we’ve found being able to separate responsibilities on a larger project allows this pair to excel their specific work and then collaborate on a better end product.

Iterating design in code

One real advantage we’ve found is the ability to iterate in code. Often times we’re only talking about design “concepts” until they’re actually in browser. Our workflow is to move through our design phase quickly into implementing code. When implementing, we discover opportunities, things we missed, and are able iterate. Those iterations then flow back into the visual design.

We try and caution clients not to get hung up on the early visual designs – treat them as concepts, not a complete user experience. Once coded into a prototype or dev environment, you start to understand how the user will experience the app – in browser.

Keeping it Consistent: Pattern Libraries

One of the biggest issues in a large app being developed by multiple people is keeping the look and feel, and the mark-up, consistent. This isn’t a new thought. Our front-end developers start from day 1 with adding a basic pattern library into the development environment of the app. This helps the developers find the correct code snippets, and our team style the app in a consistent manner.

We develop most things in Bootstrap – it offers a clean, organized library of components to use as a base. From there, we narrow it down to the elements we’re actively using (less is more) and have a page dedicated to displaying the styled examples.

And people get bored. After staring at something too long, most clients or designers get tired of it and want to make changes. Having a maintained pattern library makes visual updates easy and consistent.

Evolving our Agile Design Process

Collaboration. Separating concerns. Actively maintaining a pattern library in design and code. These are a few of the workflow habits that make our Agile Design process & team successful. Being able to be hands on with the code, in open collaboration between designers and developers, allows us to deliver a refined user experience to our customers.