Collaboration Between Developers and Designers

Customer-facing applications are essential for businesses. Therefore, a good user experience is fundamental for their success in the market. Companies nowadays employ highly specialized people in front-end development and User Experience (UX) & User Interface (UI) design to achieve this goal. Their collaboration is critical, and raises some efficiency challenges in the software industry. This work focuses and is applied on OutSystems, a low-code platform that inherits these challenges. While there are some code-generation plugins for popular design tools, these do not generate code for low-code platforms. Therefore, the transformation process from design to development is done 100% manually, which is highly inefficient. Our goal is to accelerate this transformation process from a design model to a development model to mitigate this inefficiency. To do so, we developed an approach using model transformation techniques that automates part of the process. Namely, it automates the generation of application pages/screens by composing the screen mockups in a design technology (such as Figma or Sketch) with a library of reusable UI components to instantiate the design in a front-end technology (such as OutSystems). Our approach was validated by a professional team of front-end developers from an established enterprise-grade low-code platform who applied and evaluated this work on some of their past real projects. Preliminary results show an overall acceptance of the developed tool with a possible increase of 150% to 400% in the value that they can deliver without investing more effort than they already do today. This mitigates a bottleneck faced by development teams today. To increase the value, they could offer to customers (e.g., by producing more application screens in the same period), they would need to recruit new collaborators whose skill set is high on demand. This work delivers major efficiency improvements and lessens the severe lack of qualified professionals, by allowing existing ones to produce more without investing further effort.As aplicações são algo essencial para as empresas. Uma boa experiência de utilizador é fundamental para o sucesso destas aplicações no mercado. Hoje em dia, para alcançar este objetivo, as empresas empregam pessoas altamente especilaizadas em desenvolvimento Front-End e de UX (User Experience) & UI (User Interface) design. A colaboração destas equipas é crucial e de momento apresenta desafios de eficiência na indústria do software. Este trabalho foca-se na OutSystems, uma plataforma low-code, que tem subjacente estas ineficiências que estão presentes em toda a industria. Embora atualmente existam alguns plugins de geração de código para as ferramentas de design populares, estes não geram código para plataformas low-code. Portanto, o processo de transformação de design para desenvolvimento é um processo 100% manual, o que resulta em perdas de eficiência que serão refletidas no valor final entregue aos clientes. O nosso objetivo é acelarar este processo de conversão de um modelo de design para um modelo de desenvolvimento Front-End para mitigar esta ineficiência. Para tal, desenvolvemos uma abordagem utilizando técnicas de transformação de modelos que automatizam parte do processo. Nomeadamente, este automatiza a geração de páginas/ecrãs de aplicações através da composição de mockups de ecrãs numa tecnologia de design (como o Sketch) com uma biblioteca de componentes de UI reutilizáveis para instanciar o design numa tecnologia Front-End (como a OutSystems). A nossa abordagem foi validada por uma equipa profissional de desenvolvimento Front-End de uma plataforma low-code de nível empresarial que aplicaram e avaliaram o trabalho em projetos passados reais da equipa. Os resultados preliminares mostram uma aceitação global da ferramenta desenvolvida, com um possível aumento entre 150% a 400% no valor que conseguem oferecer. Isto permite mitigar um ponto de fricção que as equipas de desenvolvimento encontram de momento. Para aumentar o valor que a equipa consegue entregar aos clientes (por exemplo, através da produção de mais ecrãs no mesmo período de tempo), estes necessitariam de empregar novos colaboradores cujas habilidades têm elevada procura. O nosso trabalho oferece uma alternativa mais económica para o aumento da eficiência e ao mesmo tempo diminui o impacto da escassez de profissionais qualificados, ao permitir que os já existentes consigam produzir mais sem investimento adicional da sua parte