Building features: How our developers and designers work in sync
At carwow we don’t have the traditional Frontend developer role* so the product team is split between full stack developers and designers.
At first, I was a bit unsure how this team structure works, as I hadn’t worked in that kind of way in the past. There are 4 things that stand out which helped to achieve a more productive and communicative environment between the two teams.
Engage even before wire-framing
One would think this is a no brainer, right? But this is an important aspect of the collaboration between developers and designers.
To begin with, it helps discussing performance implications of a given approach. Things need to be loaded asynchronously or be lazy loaded on a page. How can the design adapt to these fundamental performance requirements for a given feature? How can the developer make certain adjustments to database queries to either make them faster or run them independently? Recently at carwow, we had to rethink the way we manage icons and that need was fleshed out by these early conversations.
On a human level, it prevents feature fatigue. Imagine pouring your heart and soul into wire-framing and designing a particular feature only to be told after the fact that aspects of it do not really work. This is not to be confused with feedback or iterations of the design; both of which are quintessential. Organically developed features make everyone happy and reduce the friction in the collaboration.
Develop horizontally
Pretty much every website is now responsive and carwow is no exception. Since part of what we do as a company is building features for our dealers, we need to support a fair number of browsers, including IE8 until recently. Therefore, not only does a feature require a design review, we also need to make sure the design works on all of the supported browsers.
We achieve both of these requirements in a very productive way by something we call horizontal development. Let’s take a real example of the new homepage design.
The normal approach would be to build first for one breakpoint, then for another etc. The problem with this approach is you don’t get a quick feedback: the design may have made sense at first in the way it was blending the different breakpoints. However, as soon as you put it in development you’ve realised that is much more complicated than expected or even has defects.
To avoid such scenario and more importantly to get feedback faster, you can break the design into visual sections. It’s pretty obvious that this page can be broken into 3 independent sections. By isolating each section and completing it on all breakpoints not only you can identify issues early on but you can also finalise design requirements.
Push things to production(like) environment — continuously!
Earlier we talked about developing horizontally. At carwow we are adamant about pushing each finished section on production both for the developers and designers to look at them. We usually wrap them around feature switches or just hide them under some parameter. Here are some reasons why you should do that as well:
- Makes it easier for designers to inspect and the design and provide feedback asynchronously; they don’t need to sit next to the developer every time.
- Makes it simpler and faster to test on different browsers.
- It makes it really clear as we are getting closer to the end of the sprint whether or not we will finish all of the requirements. That way we can re-prioritise what really needs to be done and what can be postponed before releasing the page.
UI collaboration apps
This is not a must but it has helped us a lot to increase productivity in our teams. Prototyping the designs in tools such as Marvel or InVision decreases the amount of files one needs to look at and helps with the cohesiveness of the interactions. We have recently started using Zeplin which allows designs to specify font sizes, margins etc on each component of the UI.
With those few steps above we have managed to make the communication and collaboration between the development and designs team much more productive.
And as always, keep shipping**
*not 100% true as of a couple of weeks ago.
Interested in making an Impact? Join the carwow-team!
Feeling social? Connect with us on Twitter and LinkedIn :-)
