In the last ten years, interest in user experience has grown. UX Researchers, Designers, and Analysts make up the majority of any UX team. Investing in a UX team for your company is, of course, a great decision for your profits, but are you missing a key player? For enterprise companies, UX Engineers are advantageous hires. They contribute to the bottom line through their contributions to usability, accessibility, and speed to market/value.
Context
There are many types of developers. Perhaps the two most common are Frontend and Backend developers. Frontend developers write the code that represents everything a user sees on a website. Using HTML, CSS, and JavaScript, Frontend devs build the buttons, banners, and other visual elements that make up the user interface. Backend devs are in charge of everything that can’t be seen by the user. They use Backend languages, such as NodeJS, C#, etc. to construct APIs, databases, and other unseen elements that support user interactions.
Some people learned how to do both flavours of development and became full-stack engineers. Mostly though, Backend and Frontend engineers have worked in harmony to create robust websites. For a while, this was okay. Then as competition for users grew fiercer, businesses explored ways to make their products stand out. User experience joined the conversation, and new speciality roles arose. Brad Frost introduced the important distinction between the front of the Frontend and the back of the Frontend. Thus, the UX Engineer was born.
Benefits of UX Engineering
Virtually all of the benefits of UX Engineering are realized by the two main deliverables UX Engineers produce. UX Engineers deliver component libraries and front-end prototypes.
Component libraries represent just one piece of a design system, but that’s where the biggest opportunities to save time and increase speed-to-value exist. Since design systems are always implemented after the design and development work is well underway, the best component libraries collect the best aspects of components from disparate projects. The library centralizes each component–and all of its associated documentation–and packages it for any developer to easily consume. The more these components are reused, the greater the return on investment.
One Button to Rule Them All
For example, think about a button component. It’s fairly straightforward to design a primary button for a few different scenarios; but as an application grows, more complexity is introduced. Does that button still work if it’s positioned alongside a “cancel” button or some other secondary action? Is there a suitable red in the brand’s colour palette if the button’s action is deleting something? Does that red provide sufficient WCAG colour contrast with the button’s text colour? What if the button is on top of a background image? In a modal? In submitting a form? Or, in clearing a form? Can keyboard-only users interact with this button variant as expected?
If your company maintains multiple applications, the complexity only increases from there. All the buttons “gotchas” are encountered on the fly by different people on different teams as different projects are bootstrapped. Each time a new button is created for someone-off need, there is an associated cost. Let’s say every bespoke button takes an average of two hours to design and two hours to develop, for a total of four hours. It may take twice that to add that button variation to a component library. But after that, it only takes a couple of minutes for a designer or developer to implement it. You can see how the ROI increases over time.
- 8 button variants // 5 of each used in an application
- With component library
- 64 hours one-time effort
- 10 hours to implement (15 minutes each * 40 buttons)
- 74 hours total (but usually, 10)
- Without component library
- 160 hours
- With component library
Now, this example is contrived; it assumes that without a centralized component library, every single button is created from scratch. But, the time it takes to create or implement a one-off component isn’t the only cost. Design debt and technical debt are also incurred, and both make future redesigns and refactors painful and time-consuming.
With component libraries, whether they are built for an application or for a suite of applications, UX Engineers improve both developer experience and user experience. By cutting the cost of design and development, teams with UX Engineers can graduate to solving problems at a higher level. With a rock-solid component library, teams no longer sweat the small stuff. Instead, they can spend more time researching customer needs and building features that have even more of an impact on the bottom line.
Frontend Prototypes
In addition to component libraries, UX Engineers also deliver Front-end prototypes. These are not fully realized applications. Instead, they are highly iterative models that communicate how a user can interact with the application. When a UX Engineer builds a prototype, they focus on making the application match the designer’s intent. Prototypes show fully functioning error states, animations, and micro-interactions that improve a user’s experience within the product. They also meet accessibility standards that make a product more usable for all people.
Once a prototype is made, it can go through user testing, and adjustments can be made quickly. This leads to a better product on a faster timeline. After the UX Engineer perfects the prototype, they can hand off the prototype to a Frontend Engineer. The Frontend Engineer takes the prototype, connects it to back-end APIs, writes end-to-end tests for it, and optimizes the code before approving it as a complete application.
Conclusion
While it may be tempting to hire the fewest number of people for your UX team, we believe in the power of UX Engineers to improve usability, accessibility, and speed-to-market/value. Adding this key member to your UX team will generate more profit for your business on a quicker timeline.
Leave a Comment