{"id":25760,"date":"2021-07-20T09:23:36","date_gmt":"2021-07-20T09:23:36","guid":{"rendered":"https:\/\/www.experfy.com\/blog\/?p=25760"},"modified":"2023-08-17T07:36:47","modified_gmt":"2023-08-17T07:36:47","slug":"missing-link-your-ux-team","status":"publish","type":"post","link":"https:\/\/www.experfy.com\/blog\/software-ux-ui\/missing-link-your-ux-team\/","title":{"rendered":"The Missing Link On Your UX Team"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Context<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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<\/a> build the buttons, banners, and other visual elements that make up the user interface. Backend devs are in charge of everything that can\u2019t 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.\u00a0<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.\u00a0<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Benefits of UX Engineering<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Virtually all of the benefits of UX Engineering are realized by the two main deliverables UX Engineers produce. UX Engineers deliver component libraries <\/strong>and front-end prototypes.<\/strong><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Component libraries represent just one piece of a design system, but that\u2019s where the biggest opportunities to save time and increase speed-to-value exist. Since design systems are always implemented after the design and development<\/a> work is well underway, the best component libraries collect the best aspects of components from disparate projects. The library centralizes each component\u2013and all of its associated documentation\u2013and packages it for any developer to easily consume. The more these components are reused, the greater the return on investment.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

One Button to Rule Them All<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

For example, think about a button component. It\u2019s 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\u2019s positioned alongside a \u201ccancel\u201d button or some other secondary action? Is there a suitable red in the brand\u2019s colour palette if the button\u2019s action is deleting something? Does that red provide sufficient WCAG colour contrast with the button\u2019s 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?<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

If your company maintains multiple applications, the complexity only increases from there. All the buttons “gotchas\u201d 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\u2019s 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.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
    \n
  • 8 button variants \/\/ 5 of each used in an application\n
      \n
    • With component library\n
        \n
      • 64 hours one-time effort<\/li>\n
      • 10 hours to implement (15 minutes each * 40 buttons)<\/li>\n
      • 74 hours total (but usually, 10)<\/li>\n<\/ul>\n<\/li>\n
      • Without component library\n
          \n
        • 160 hours<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          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\u2019t the only cost. Design debt and technical debt are also incurred, and both make future redesigns and refactors painful and time-consuming.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          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.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

          \n\t\t\t\t\t\t
          \n\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t

          Frontend Prototypes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
          \n\t\t\t\t\t\t
          \n\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          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\u2019s intent. Prototypes show fully functioning error states, animations, and micro-interactions that improve a user\u2019s experience within the product. They also meet accessibility standards that make a product more usable for all people.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          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.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

          \n\t\t\t\t\t\t
          \n\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t

          Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
          \n\t\t\t\t\t\t
          \n\t\t\t\t\t
          \n\t\t\t
          \n\t\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          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.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

          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<\/p>\n","protected":false},"author":1181,"featured_media":25761,"comment_status":"open","ping_status":"open","sticky":false,"template":"multiple_author_template.php","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[200],"tags":[1597],"ppma_author":[3980,3981],"class_list":["post-25760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-ux-ui","tag-ux-ui"],"authors":[{"term_id":3980,"user_id":1181,"is_guest":0,"slug":"ann","display_name":"Ann Schnabel","avatar_url":"https:\/\/www.experfy.com\/blog\/wp-content\/uploads\/2021\/07\/ann-150x150.jpg","user_url":"","last_name":"Schnabel","first_name":"Ann","job_title":"","description":"Ann Schnabel is a front-end web developer and graphic designer in the Indianapolis area. She currently works at Allied Solutions as a UX Engineer and loves doing so. Outside of her day job, Ann runs a small (but mighty) web design & development agency called Vertical Soup. Ann enjoys crafting, swimming, and adventuring with friends in her free time."},{"term_id":3981,"user_id":1182,"is_guest":0,"slug":"zackp","display_name":"Zack Philipps","avatar_url":"https:\/\/www.experfy.com\/blog\/wp-content\/uploads\/2021\/07\/zack-150x150.jpg","user_url":"","last_name":"Philipps","first_name":"Zack","job_title":"","description":"Zack Philipps is a full-stack web developer and musician based in the Indianapolis area. You may find him building design systems for Allied Solutions, playing drums in his indie rock band, Bonnie Lola, or traveling with his wife Noelle."}],"_links":{"self":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts\/25760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/users\/1181"}],"replies":[{"embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/comments?post=25760"}],"version-history":[{"count":5,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts\/25760\/revisions"}],"predecessor-version":[{"id":30551,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/posts\/25760\/revisions\/30551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/media\/25761"}],"wp:attachment":[{"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/media?parent=25760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/categories?post=25760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/tags?post=25760"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.experfy.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=25760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}