Frontend Development: Easing the Transition From Guidelines to Implementation

I’ve always loved figuring out how things work. As a kid, I remember marveling at cool things like cars with four-wheel steering, and I’d try to replicate that with Lego Technic. And I guess I’m not the only one to tear a mechanical or electronic device or two to pieces, to try and figure out what makes it tick (sometimes literally)?

I think most accomplished techies will nod his or her head in agreement when I postulate that you don’t push the limits of your knowledge just by reading user manuals and looking at pictures – you need to get your hands dirty.

Making software is no different.

When I started working at Visma at the end of 2011, one of my first (and definitively, still ongoing) assignments was to take a fresh look at how we develop and distribute frontend elements and components between the different teams and products. This involved talking to developers and project owners all around Visma, looking at what they’re making, and how they do it. A pretty daunting task, but very exciting!

The HCI team has done a massive amount of work already, defining a distinct visual style and functionality that we call Nordic Cool, currently in its second iteration – Nordic Cool 2, if you like. The goal and ambition is to get the Nordic Cool 2 DNA to be in all our products, so that they are all consistently user friendly and great looking. The challenge is to make it easy for everyone to implement it.

My take on this process is that guideline documents and Photoshop templates are great, but they will only get you some steps of the way. People, especially developers, have a need to look at things, click on them, test them, and find out how they’re made – and last but not least, how they could be made better.

So we came up with The Source.

The Source is a central server solution that consists of several parts:

  • Repository (based on Subversion) where all developed components and resources are available
  • Live demos of most standardized components and layouts, and selected “live” products
  • Live “bleeding edge” development area (for testing new and proposed solutions in context)
  • General file area for relevant resources

The live demos are popular when discussing functionality, especially across teams, and the live development area lets anyone see work in progress in a relevant context and give feedback right away (made possible with Trello, which we use extensively for cross-team collaboration). It makes for a very quick, dynamic and solution-minded process – and the distance is pretty short from spec to development and testing. Several new and great ideas have spurred from these online demos already. Sometimes, a spec will only take you so far – it’s in testing that the new ideas for improvement suddenly turn up.

Our ambition and goal is that from The Source, a developer can download the whole Nordic Cool 2 set (or pick and choose from the repository) and start implementing a frontend for an application right away. This complements the guidelines and the designs very nicely, in the way that developers can see concrete examples of how we’d like things to look and work, and have the guidelines and design (and of course, the HCI team) to fall back on when there are specific questions or problems.

And it’s easier to get started on a nice Lego project when you don’t have to make your own bricks first every time, right?