Bridging design and engineering: The role of UI Engineers
Creating seamless, high-performance experiences for every customer and stakeholder in the team.
The demand for personal and unique customer experiences is high. But it put a lot of pressure on both developers and designers that often don’t speak the same language.
The shift in expectations from digital customers means that the traditional front-end is crushed under tooling and responsibilities.
High demands for accessibility and cyber security is adding pressure when the digital storefront also must enable quality performance and user experience. And ever evolving possibilities is continuously adding pressure on front-end developers.
It creates a gap to the digital designers.
Because the initial design work can be difficult to realise with the aforementioned high demands. Digital designer feel their work is compromised and developers feel they’re given an impossible task. That’s where a UI Engineer should enter the team.
Design doesn’t stop when something is handed over to development - it continues up until launch, and even after.
Introducing UI Engineers
When companies are investing in a digital transformation there is a lot of pressure to deliver the best output.
Designers are delivering state-of-the-art front-end, but without thinking of the risk that developers can’t build the website exactly the way designers meant. That’s when both parts feel the frustrations.
But with a UI Engineer in the team those frustrations are avoidable.
These people understand both the language of the developers and the designers. At IMPACT Commerce, our Senior UI Engineer Klaus Nielsen worked with 3D, video, design, and coding:
“With a foot in both camps, I am bridging the gap. I know how they are thinking and have the tools and techniques to finding solutions without compromising the customer experience in the end,” he says.
To get the best out of an UI Engineer in your team it is important to introduce the person early in the design process. This will help fast-track design decisions and create project groundwork.
Without UIE |
With UIE |
|
|
|
|
|
|
Real world example
For a customer we created a new multi-brand platform and knew we couldn’t risk limiting the experience for any of the wildly different brands. The groundwork needed to be solid for all future brands, and we couldn’t risk delaying release of the first brand.
The UI Engineers job was to review the smallest details in the designs and making sure they fully understood what goals were set. During implementation UI Engineers were able to quickly find solutions on problems for the rest of the team without slowing down the progress towards release.
Most designers and developers can recognise how the experience can be compromised during an implementation-phase – clean and bold statements in design meet the real world where restrains end up limiting the result. Restrains can be technical limitations, like browser-compatibility, and can cause massive investment in hours for very little effect.
In this case the UI Engineers secured a solid foundation for the coming brands, and learnings on where to find the right compromises.
Coding and creating
Being a UI Engineer is about elevating all stakeholder to create the best outcome. They are a personal infrastructure that secures consistency and inclusion. Their expertise enables cross-platform and multi-brand scaling.
“We encourage developers to explore more creativity, and designers to validate more systems. Because design doesn’t stop when something is handed over to development – it continues up until launch, and even after,” says Klaus Nielsen, Senior UI Engineer at IMPACT.
Three of his most common tasks are:
Transforming design tokens into values for different brands or themes, and for different platforms, like apps, web or print.
Creating documentation on public facing sites, for customers to use internally when onboarding new employees or externally when working with partners that have an interest in the visual identity.
Build a design system with component libraries to be used across platforms and brands. A design system is a set of rules, components, and guidelines that work together to create a unified visual language.
From colour palettes and typography to button styles and interactive elements, every aspect is carefully documented within the design system.
It serves as a guide for designers and developers, ensuring a consistent and seamless user experience as well as providing a tangible framework for facilitating discussions and making informed decisions.
Validate design assumptions, and fast-tracking design decisions to create high-fidelity, working prototypes written in code.
High-fidelity prototyping provides an interactive platform where both designers, developers and external stakeholders can test and engage with the design, gaining a firsthand understanding of the proposed user journey.
Key takeaways
- A UI Engineer is reinventing the systems developers and designers already create, but with other stakeholders in mind.
- Common language between dev, design and other stakeholders.
- Building a system, rather than static colors/typography, enables cross-platform and multi-brand scaling.
- Being used for internal/external onboarding and maintaining a consistent brand-experience, it’s not at all high-cost, but neither is it a cost-saving exercise.
Want to know more about our work?
Klaus is ready to assist you.
