Bridging design and code for a new design system.
I helped translate components from the design team to code at UNIS, a logistics company with a digital infrastructure that was leveling up. I worked as an intermediary between the design and the development team, ensuring results matched intent.
Status & Patterns
Overview
I immediately started looking for patterns.
Initially, I examined the current design system and started isolating patterns, noting areas of possible improvement in the design-to-development workflow. These foundational elements would be important in the building phase, so it was crucial that I understood where the team was at.
Building Upward
First thing's first
Strategically choosing what to build.
Having a significant amount of independence and working between the front-end and the design team, one of the biggest decisions was what to build first. It would be easy to start on components that were composites of others and lose consistency and time. So I isolated and organized components that were foundational, starting with them and building upwards with them. Eventually most of the patterns collapse into each other, and then it was my job to elegantly combine them.
Developer Experience
Final result: actionable documentation
A tight design-to-developer chain with quick feedback loops and easily importable code components, fresh from the design team.
Since I was working on what was operationally a special team, I worked with the front-end closely to develop a process for us to prepare for this large amount of building. The approach itself needed a bit of systemization as we were starting to craft from an already mid-level maturity design system. We had some constraints, but were able to construct a light chain, proving our process and setting up a documentation site to accompany what would end up being a living component library. The documentation enabled developers to literally copy code that replicated the components the design team was crafting with theme options.
Lost in Craft
Creator experience (Cx :)
Right before AI, this was one of the best examples of design-to-development I had experienced up to that point, and while driving home (with a smile), I often thought of it as a Creator Experience position.
I had worked quickly with many different levels of fidelity of hand-off with developers and this proved one of my notions: user interface (UI) designers should own this part of the front-end if possible. Let designers go from design to initial development, capture the form, and then hand it off to be connected in a federated, elegant and secure way by the front-end. I often thought to myself, being in the middle of design and development, that a good developer experience generates good designer experiences - and that good creator experiences create good User experiences, so it's crucial and immediately obviously beneficial when creators - designers and developers in this case - have as pleasant a process as possible.
Contact Me
Interested or need help in building a design system?
Use my form, send me an email at hello@johnhansen.design or schedule a call.