Why systematization is key for outstanding User Experience
Lorenz Vierecke, Director User Experience Design at the SinnerSchrader Swipe office in Berlin, shares his insights on iterative UX systems.
As described in our latest blogpost, User Experience Design is a deeply pattern driven discipline. On the one hand UX Design tries to influence the behavioral patterns of its users by crafting seamless interactions, on the other hand UX Designer need to systemize their working patterns all along to ensure keeping pace on the fast moving digitalization. Every few months there is a new „groundbreaking“ tool which eases the UX workflow and enables you to design even more details of a service. I do not want to go into detail here, but we will surely come to that in another blogpost. The central tool for us stays Sketch by Bohemian Coding. This tool ended the hell of designing with a photo manipulation software and introduced the first real UX/UI software into the business.
Symbols of efficiency
The crucial part about Sketch: it enables its users to design in a radical systematic fashion. What makes Sketch so powerful, is that it makes it possible for its users to build flexibly adaptable design systems by using symbols. The possibilities provided by Sketch to radically systemize your workflow by recycling the work you have done stands out for the profession of UX Design in general. As a UX Designer it is all about adapting, transferring and iterating patterns to a new service system. In Sketch we found the perfect tool for that.
With the evolving toolchain of digital craftsmen and craftswomen we see that job profiles get blurry. That is actually a good thing because the most digital projects we see failing are failing because of dysfunctional teams which do not understand each others workflow. By becoming digital hybrid workers those gaps in understanding seem to disappear more and more. UX Design, Visual Design and even Development seem to merge more and more into one discipline. To favor a better development, Design needs to understand how their design gets implemented and realized. As a Designer you need to understand that you are never just designing one static screen but a part of a living system.
Our Product Design team at Swipe started recently to radically systemizing our UX Design workflow by building an overall pattern library in form of a UX Kit in Sketch, which can be reused on a regular basis. We were already creating pattern libraries for every individual project in the past but now we setting up a company pattern stack which enables us to implement learnings of different projects on a general level.
What exactly is a pattern library in terms of User Experience? It is a system of organizing context-neutral patterns which can get adapted to a new context and can evolve into an own individual system.
Pattern library (UX Kit) as basis for any digital product
A digital product is always a collage of different features and touch points but the basic features are more or less always a different type of the same. You often need a log in, sharing options, probably your service will need a user-profile or a chat module. So a pattern library is a repository of different features in different variations. Whenever we are designing a feature in a project from scratch we are also transferring it into our pattern library. In the next project where a similar feature is requested it enables us to deliver much faster, and even if we might need to adapt it or change it all over to the individual use case of the project, we have a quick starting point for discussion and know already about the concept challenges of the particular feature. The amazing thing about a smart pattern library is that it will get more fidelity from project to project because every project has its own requirements and individual characteristics. With this „smart-library-approach“ we can also assure a company standard. A pattern library does not have to only cover Sketch, it also can cover icons, whole features and its user flows, sitemaps and even the documentation part can be covered. So over time our pattern library will become very detailed and interconnected. From a systematic pattern file, which covers every platform and feature, to a multi icon library or a huge set of different color codes.
How can you achieve that
The question is, how you can enable yourself as an agency to create and curate your overall pattern library constantly over time. So we put a lot of thought into how we can standardize our UX process to be able to translate patterns which we create on running projects into our overall pattern library and vice versa. At the same time we are trying to get closer as a design team to implementation by adapting workflows of development. Branching and merging of code is actually a common thing to do to be able to collaborate on bigger app projects. In our design processes we are also used to create Design systems / UX Kits (Project Branch) which represent all the used UI elements of a digital product and grow over the course of a project (Sprint Branch). To make use of the knowledge we develop on the project/sprint branch, we condense interaction patterns into our overall UX Kit (Company Branch).
This is why we are currently evaluating if Git could become an essential part of our workflow as well. While Git is a distributed version-control system for code it could be also used for collaborative working on the design of a digital product. Working with Git could make it possible to deeply link our company UX kit with the UX kits we are creating for each project. But it turns out, that the merging of files needs to be done manually, why Git ist not necessarily the best tool for collaborative UX work right now. At this point we see no real Git for designer out there, even though “Abstract” could become that kind of tool.
While it becomes clear that you need to focus on the standardization of UX workflows to be able to implement learnings of your project work on a practical level, you need to guarantee an individual Brand Experience as well. How we are approaching branded interactions (also from a visual point of view) will be explained in one of the next blogposts. So stay tuned!
Author: Lorenz Vierecke
