Bridging the design system
I built components for the design system at UNIS, a logistics company with a digital infrastructure that was leveling up. I worked as an intermediary between the design team and the front-end developers, ensuring vision matched result.
Identifying 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 Up
The challenge
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.
Deliberate Development
Deliverables
A tight design-to-developer chain with quick feedback loops.
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 significant amount of building. We had some significant constraints, but were able to construct a workable chain, proving our process and setting up the documentation site to accompany the living components.
Build with Intent
Reflection
Right before AI, this was one of the best examples of design-to-development I had experienced up to that point.
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.
Contact Me
Have a project or problem to solve?
Use my form, send me an email at hello@johnhansen.design or schedule a call.