A closer look at our Atomic Workflow in action — by the Nordnet design studio
We’ve already talked about our Atomic Workflow and the products and tools we use to keep the team in sync. But what’s it like working this way on a day-to-day basis? Is it time consuming? How do we decide when to create a new Atom or Molecule? Or document changes and suggestions to existing assets?
We’d like to share our current process in the Nordnet design studio. We’re interested to hear about other companies’ workflows too. Especially across distributed teams.
Atomic thinking can be applied to almost anything, but I’d like to use our UI Kit sketch file as an example.
What’s in our toolbox?
Before we get down to the nitty gritty here’s a quick overview of the tools and services we use to make life easier.
- Craft by Invision.
This allows us to distribute the UI Kit across the entire team and automatically keep everyone up to date with the latest assets. - Dropbox.
To store and share our files making them instantly available across the entire team. - Google Hangouts (RIP Sqwiggle).
For team meetings and discussions. We’re a distributed team! And not everyone is always at the office when they’re working. - Sketch.
To create our design assets! Craft is a plugin for Sketch which opens up and syncs the UI Kit to anyone who has the plugin installed. - Trello (or a similar way to collaborate and manage ideas such as Confluence or even a simple Wiki).
We use this as a visual process tool. Here we track features, additions, and suggestions to the UI Kit. It also serves as handy documentation for when things were modified or created.
Design is a team sport…
We encourage every member of the team to bring new ideas to the UI Kit and also critique and suggest improvements to our existing assets.
Design is a team sport; but every team needs a Captain.
This doesn’t need to be the most senior member of your team. This person isn’t in charge. They are simply responsible for updating the master file and keeping everything organised inside.
Having only one person maintain this master file helps to avoid conflicts. In both version control, and organisational style. Just make sure you pick someone who can sweat the small stuff — Things like grouping and naming assets, layers, etc... Even the layout of the document. Or making sure all fonts are correct and approved, and that assets are created to brand guidelines.
Thanks to Craft by Invision no other member of the team needs to open this Master file. They’re welcome to copy the current version into their own working directory for personal use. However any assets approved for use are always available through Craft.
Building the UI Kit
Our UI Kit is put together using Sketch and hosted on our team Dropbox. We use Symbols and Text Styles whenever possible to promote consistency and re-usability. Symbols are Atomic Design’s best friend.
We use the same naming conventions in Sketch and Craft as we do in code to make discussions between designer and developer pain-free.
We talk about this in more detail in our previous article “An Atomic Workflow For Design & Development at Nordnet”
Document structure
I have organised our UI Kit into different Pages in Sketch. Logically grouping sections where I can.
Each Page contains artboards, symbols, and examples of assets. Here’s a look at the Grid & Layout Page. And a close-up of the Desktop artboard.
The Desktop grids and layouts below are Symbols that can be dropped into any Sketch file the same way as you would a button or input field. Making designing to a grid or layout style easy.
Artboard layout example — Input fields
Here’s an example of how we group Input field molecules in our master UI Kit sketch file. We give a brief explanation of how a designer can create their own Molecule using our grid and style guidelines.
Each Input is then shown in a number of different states, with a brief description of when each should be used.
Nested Symbols
If we break down the Numeric Molecule we can see how it is built using already defined Text Styles and Atoms.
The - and + icons are a symbol, nested inside all of the different Numeric Molecules (default, filled, focussed, success, error).
For example if we were to change the - and + symbol to an up and down arrow, it would instantly change in every instance in our document. Including all of the Numeric Molecules.
Nested symbols are an extremely powerful, time saving, and future proof aiding feature of Sketch!
You can learn more about Sketch nested symbols on their website https://www.sketchapp.com/learn/documentation/07-symbols/4-nested-symbols.html
Text Styles
Another time-saving feature of Sketch. Text Styles allow us to define what fonts, sizes, and rhythm can be used in our designs. It’s a great way to make sure all designers use consistent font weights, line-heights, and ### when creating page layouts or interfaces.
Organising Symbols
With so many symbols, nested symbols, and text styles things can quickly get messy. Luckily Sketch allows us to organise things nicely by naming symbol Artboards in a specific way.
In the screenshot above we can see a long list (these are just some) of our symbol artboards. Sketch now puts all symbols on their own page inside your document. The name you give your artboard is how it will be labelled in the Insert Symbol menu.
A “/” in the name will create a sub-menu. Super useful for grouping similar UI components.
Here’s how our named symbol artboards look in that Insert Symbol menu thanks to how we named them.
Naming Conventions of layers and symbols
It can be a pain naming every single layer, and logically grouping your Molecules or Atoms. But it’s absolutely worth the effort.
Get into a routine of naming as you go. Otherwise you’ll be in for a bad time when you suddenly find yourself with 100’s of Molecules and even more Atoms to go back and rename.
Because we’ve named everything our assets can be searched in Craft library, which is a huge time saver.
Additionally skimming the document and layers, and general housekeeping is made much more efficient by having a proper naming convention in place from the start. At Nordnet we use BEM.
Contributing to the UI Kit as a team
We want to make contributing to the UI Kit as easy as possible. Anyone from the design team can make a suggestion or improvement at any time. We have weekly discussions to talk each other through our ideas and vote on if something should be included or amended. Everyone has a voice.
As the saying goes — Pictures speak a thousand words. We always include an image or Sketch file as an example of our idea. Ideally in the context it will be used should it be included in the master UI Kit.
A template for adding a new asset
Image: A flat image or sketch file.
Description: Briefly describe why this should be included in the UI Kit.
Author: Take credit for your awesome work ;-).
Date: The date this was added to our backlog.
Trello
A visual reference of what’s happening with the UI kit. We use Trello, but it can be anything from a Spreadsheet to Wiki.
On Trello we create a new card in the Backlog list and attach ourselves as a member of the card. We also include the date and ideally a screenshot.
Google Hangouts
We have weekly meetings to chat everything UI Kit as a team. This is a platform where any designer can present a new asset to the team for inclusion in the UI Kit.
Whoever is hosting the meeting will generally screen-share the Trello board and we’ll review as many items in the “###” column as we can. These are then moved to either the “Approved” or “Archived” lists.
Anything approved is taken from the “To Be Reviewed” folder on Dropbox and placed into the master UI Kit Sketch file as a symbol, and included in the Craft library.
Getting Crafty!
Our craft library is hosted on Dropbox. Anyone in the company with a copy of Sketch with the Craft plugin installed now has instant access to our most up-to-date UI Kit.
It’s then a case of browsing the library or searching (made easy by our naming convention) for the asset you want to use.
Improving our workflow
We feel our current method is a great way to include all designers in the creation of our UI Kit, while making maintenance and updates a cinch.
But we’re always pushing ourselves to be better. We’d love to hear the solutions other teams have come up with. And we’ll let you know if we make any major changes ourselves.
Thanks for reading!
— The Nordnet Design Team
