How Can a UX Engineer Help a Design System Team
OutSystems released a new version of our integrated development environment (IDE), Service Studio, at the end of July 2021. Before the release, we’ve shared a month of content on how our UX/UI Team tackled this project while building and implementing their very own Product Design System to create a delightful experience for all users.
As part of this series, we showed you how we grew our UX practice, explained how we used data to elevate our product’s look and feel, and spoke to our UX/UI Team about design systems in general and the one they helped create at OutSystems.
In this article, we’ll dive into the role of UX engineers and how their skills can help you turn design language into a code component library.
I’ve been working with front-end development, mainly CSS, for the past couple of years here at OutSystems. My goal? Trying to build the perfect CSS architecture using the most recent features and best practices for the OutSystems UI framework and following the best approaches for fitting components together seamlessly. Yes, you can blame me for some of the issues that you faced during your projects.
Last year I was challenged to embrace a new project and help our UX/UI Team build a design system and evolve our product (including Service Studio’s new version and other new tools). That was precisely what I was looking for after getting more familiar with design systems and what it entails to create one.
With that, my job role shifted from Front-End Software Engineer to UX Engineer, but at the time, the functions of such a position weren’t clear within the company. All the team knew was: “We need someone to help us translate the design into code, pattern behaviors into variables in a clean, scalable way, and who communicates with the different development teams.”
In other words, they were looking for someone who could help collaborate with the Design Team and the Engineering Team, turning the design language into a code component library.
So, What Exactly Is a UX Engineer?
Having worked with user experience, design files, and elegant pieces of implemented code, it was clear to me that I could play that role. I wanted to help the company craft exceptional experiences and welcomed the opportunity of joining a new team entirely focused on building a design system.
Looking back, I am thankful that I could focus on the tasks ahead before even knowing that the role of a UX engineer was a real thing. Job roles can be complicated to describe, and the term “UX engineer” often confuses people, including some at OutSystems, who ask me about what I do. Are you creative or technical? Do you work in the Experience Team or the Engineering Team? How is a tech guy so visually creative?
After walking the walk for a while, I had answers. All these questions lead to a fundamental issue: what do UX engineers do, and why do UX teams need them?
A UX engineer falls between UX design and software engineering. UX engineers, or UXEs, possess the skillset of a front-end or UI engineer, but they have a working knowledge of UX design principles. In essence, a UX engineer is a front-end engineer who works with the Design Team as the link between Design and Engineering.
As Teo Yu Siang explained in an article for the Interact Design Foundation: “UX unicorns [UX engineers] are a rare and special breed of people who can not only contribute to all phases of the design process; they can also take charge of front-end development.”
Thus, UX engineering bridges the gap between UX designers and software engineers. Often confused with front-end developers, UX engineers are the magic makers, bringing UX designs to life.
By doing so, they merge technical know-how and design aesthetics, partnering with programmers, UX researchers, designers, and more, to conceptualize and deliver an effective user experience focusing on the technical elements.
What Are Their Skills and Responsibilities?
The role of a UX engineer can vary depending on the project, team, or company, but these are the major skills and responsibilities we have to deal with daily. Essentially, a UX engineer is involved where it delivers the most value to the team and the product.
Ideation
During ideation, UX engineers contribute to discussions on usability, brainstorm solutions, and advise on any technical impediments. The latter is essential to help decide which ideas are feasible.
Design
We also work with UX/UI designers to create a library of consistent and usable components that will be used during the wireframing and prototyping phase and handed off to the Engineering teams.
Build and test
This is where the technical side of a UX engineer shines through, and the core skills are essential, such as HTML, CSS, Javascript, and OutSystems. We need to develop all the components, layouts, and parts of the designs. And here is where I spend most of my time: trying to build the best, most consistent, and reusable components that are performant, easy to use, accessible, and well documented, and which will be used by everyone.
Testing is crucial for a UX engineering role because it helps catch and fix issues early. Our goal when testing is understanding if we need to adjust or create new code or simply change the design. In the final production stages of a product, the UX engineer’s job is to reduce any potential friction. At OutSystems, we define friction as any bump in the road during the users’ journey whenever they aim at a particular outcome while using our product.
Communicate and collaborate
Great communication skills will help you collaborate smoothly with your design system’s stakeholders, such as Design teams, Engineering teams, and Product Management, to ensure that interaction and visual designs are implemented according to design specs. Talk to the team, understand their main challenges, and how you can help overcome them and build a relationship of trust. Also, use the company’s terms, not UX lingo, to ensure you’re communicating clearly.
It’s vital to communicate clearly and effectively with project teams during all stages of the design process and development while increasing awareness of the Product Design System and its adoption. Such will ensure that the designs are executed exactly as intended — with elegantly simple and efficient code.
And don’t forget about mentoring and providing guidance to other team members — whether they work in Engineering or Experience groups. Mentoring is a great way to propagate your design system and all the excellent work you’ve been doing.
When can you do this? Besides sync meetings, which are a great opportunity to pass on your knowledge, you can also set up training sessions on good practices and share documentation and other resources.
Finally, effective communication will also help you collect feedback to share with both the UX and UI design teams, improving the collaborative process and end result. I will further discuss these topics in the second part of this article.
The Life of a UX Engineer at OutSystems
Now that I’ve explained what a UX engineer is and does, it’s time to share some of the lessons learned after joining the OutSystems UX Group to help build a design system. I will provide you with more context in the second half of this text, but for the purpose of this article, all you need to know is that soon after our Product Design System was in place, we bumped into a wall.
The main issue was escalating quickly enough: as Engineering teams started building around eight different applications and products using our Product Design System, the Design Teams were still creating components, screens, and flows — and yes, you guessed it, it was sort of a mess.
Teams focused so heavily on delivering features that we jumped from “design” to “engineering,” failing to have someone linking the two. In fact, if code comes after the design, why can’t we have somebody who excels at programming writing this particular code?
We rapidly understood that this missing layer was essential for the design and development process. If you jump from one to the other, a huge chunk of design information can simply disappear. We will miss tiny details — such as how the interactions look, what happens when the user clicks here or there, the animations’ time — and fail to provide the best experience for our customers and users.
So, before jumping into design files, development, and planning our next steps, our first mission was to define how we would integrate code within the Product Design System and assess the main benefits of developing it ourselves.
This is how we came up with the code for our Product Design System — to bring order and consistency to our products and processes. It allows us to build, launch, maintain, and unify products: Engineering can focus on business logic instead of pixels, and designers can focus on user experiences, interactions, and flows. In the end, these components and materials are essential, as they act as a single source of truth for building products.
Stepping Stones
Finally, I got where I wanted! I was in the middle of CSS and Figma files, working with a new team, and ready to build the system! I won’t get into the details of what a design system is ( my teammates explain it well here) or which technical solutions we developed, but I will leave you with some of the lessons learned so you at least know where to start.
Sync Design and Code
The first rule is to have everyone communicate in the same language. Translation? It is vital that what you read in design is what you write in code. Start by defining your design tokens, foundations, and visual guidelines. Write them as simple CSS Styles using your preferred method.
Prepare the Groundwork
In new projects, it’s important to have time for experimentation. With your brand guidelines defined, you can start exploring how the many foundations connect and how they can be used in basic components like buttons and inputs.
If you are creating a design system for an existing system, the first thing to do is to make an inventory and audit all the work done so far. By doing that, we can see precisely where and how the experience is broken. Start by creating a complete list of all the UI elements and Interactions and group the visually similar ones.
Build and Document Your Component Library
Once all the styles fit together seamlessly, it’s time to start building your UI Library, including both your design and code foundations. With a ready-to-use and well-documented library, you are set to achieve a massive boost in productivity. I will get into more detail in the second part of the article, so watch this space!
With all these pieces in motion, do you remember why we started this in the first place? Well, you reached your destination. Now you have the proper tools to increase your productivity while delivering the best experiences — welcome to the life of a UX engineer!
Originally published at https://outsystems.com.
