The Missing Link On Your UX Team

The Missing Link On Your UX Team

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.

Illustration:

  • 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

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.

  • Top articles, research, podcasts, webinars and more delivered to you monthly.

  • Leave a Comment

    Next Post

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Software & UX/UI

    A Little (More) Evolutionary Neuroanatomy, Part 2

    TL;DR: Today we’re going to finish up our very brief look at evolution. We took this little detour so that we could eventually talk about the neuropsychology of interaction with the common understanding that the way humans experience the world is ridiculously complicated. Most of us  think that basic human senses like vision or hearing

    6 MINUTES READ Continue Reading »
    Software & UX/UI

    The Ultimate Guide to e-commerce Software Development

    Software Development As of 2020, eCommerce is a massive industry worth $4.28 trillion worldwide, as per Statista. With that said, it’s imperative for businesses large and small to have their eCommerce website if they want any chance of succeeding in today’s competitive market. Online shopping is taking over. People have become so used to being

    10 MINUTES READ Continue Reading »
    Software & UX/UI

    10 Best Tools to Use as a UX/UI Designer

    What are UX & UI Tools? UX & UI tools are the digital tools that UX/UI designers use to create usable, friendly and intuitive designs. These tools are used throughout the entire design process, and they help designers to be more efficient and effective.  Figma. Figma helps designers to build wireframes, prototypes, mockups and more.

    5 MINUTES READ Continue Reading »