Design how you design
Whether you are a designer, engineer, or product manager, you have to work with others to iterate and execute.
But if you have ever opened someone else’s work, you know how hard it is to find the right file, page, group, artboard, or layer. If you are new to the field or new to a team, browsing to learn the history of a project is excruciating.
Regardless of what you design, how you organize your output is just as important as the output itself. Unlike art, design must converge into group decision-making. You need order at every stage to tame the inherent chaos of creativity and collaboration. To produce the best work, you must use semantic design versioning.
Simple file versioning shows change but without context. When each canvas is a detached new “Copy”, with labels like “Artboard 23 Copy Copy”, it’s difficult to compare with previous versions and relate to an overall system. Graphic design practices are simply inadequate for capturing the complexity of modern product design.
Luckily, we can borrow ideas from other fields. The Dewey Decimal System, film clapperboard notation, and Git Semantic Versioning are systems well used to recording and classifying creative work. They share four principles that we can apply to versioning interaction design: division, meaning, order, and extensibility.
At Intercom, semantic design versioning helps us index, evaluate, and share design ideas and options – leading to clearer choices and faster decisions. It also helps us examine experiences end-to-end and cover the fullest range of use cases and edge cases. While my own background is in design, you can apply the same principles to any discipline.
Division – break it down with decimals
Whether you choose to use symbols or words, divide your versioning notation into smaller parts, narrowing it from general to specific. For example, during the refinement phase of a project, you expand on a single concept. Divisible versioning ensures you break down your problem into digestible parts and allows you to track how your solution holds up from beginning to end.
Let’s use an example from outside the tech world. Say you’re a chocolate store owner. You need to design an experience for sampling chocolates – how people see their options and how they choose one. As you dive into the problem, your designs might look like this:
If you have too many levels, you should break your problem into further projects. For example, designing an experience for sampling chocolate is only a much smaller part of designing your chocolate store.
Meaning – is it a scene or a frame?
Seeing versioning notation by itself, such as 1a.A.1, is not informative. To make the version meaningful, you have to define each part of your notation. The first part could be the amount of time you’ve spent on a project (design cycle or team sprint) or the type of project (product, feature, or customer). Successive parts may describe more specific variables to consider.
For example, when exploring how people sample chocolates, you think about two purchasing groups: adults and kids. When you’re ready to build, you refine your design so that it accommodates people who take one chocolate as well as those who break from the norm and ask for multiple. The meaning of each part of the notation may change as your problems change, but the systematic approach is the same:
You can organize your folders and label your files according to a versioning system. For example, in a Sketch file, each design cycle can be a page, each path can be a group of artboards, and each step can be an artboard. Using a new Sketch page for each design cycle is a tactic for revisiting old problems with fresh eyes and hiding discarded ideas while leaving assets accessible.
Order – branch and flow
Ordered notation tells people how to process your designs. When you differentiate between sequential steps and unordered, parallel alternatives with numbers and letters, you can compare versions quickly and make decisions faster.
Let’s say you come up with two directions for presenting sample chocolates: jars and trays. You want the experience to be great for both parties – adults and kids. Your designs might look like this:
Small kids may have trouble reaching a countertop jar while their parents have no trouble. Everyone can reach chocolates from trays without issue. However, if you open an upscale chocolaterie, you need to maintain order and cleanliness, so keeping candy out of reach from kids is important. The alternatives then describe this choice: is your store a) family-friendly and easygoing or b) exclusive and refined?
You can arrange your Sketch artboards in a similar way. Create lettered alternatives from left to right and numbered steps from top to bottom. During exploration, a canvas is horizontally wide and vertically short, and you can zoom out to view the entire range of options. As you design, anticipate how to defend each version and extend the strongest concept with more steps to build its case.
As you begin to refine, you can perfect every detail of an experience in series. If sampling chocolates from a jar, how do people 1) open the jar, 2) fish the chocolate out, and 3) replace the lid? In my Sketch files, each group of sequenced artboards is vertical with variable width along the path. The deeper you go, the more you see how paths branch and merge (get wider and narrower). A section that is too wide indicates too many choices and an opportunity to simplify. Zoom out to see if new patterns emerge or deviate from the system.
Extensibility – can your system grow?
Ultimately, I hope design tools will interpret and apply semantic versioning automatically. For now, whatever your components, rules, and methods are, make them a habit and repeat them often to your team. A strong versioning system should work for as many projects and as many individuals as possible.
Semantic versioning helps you better understand your own process and become a better designer. This systematic approach is especially important for growing teams working in fast-paced environments. By consciously defining each design version, you can better communicate, navigate, and debate the full set of choices. For my notation, I use digits, decimals, and letters because they are the smallest, most universally available symbols. You can use words, emoji, or other alphabets.
Well-versioned designs are a map of your ideas, marking the explored and revealing the unexplored. By using a semantic versioning system, you make designing easier. And by making designing easier, you can create sweeter experiences and more delightful outcomes for your customers.
