Masterarbeit
Bridging the Gap Between Frontend Development and UI/UX Design: A Tool for Evaluating and Improving React Interface Code
Completion
2025/11
Research Area
Students
Ilse Löhr
Advisers
Dr.-Ing. Sebastian Heil
Description
Usability is a key factor in the success of digital products and both UI/UX designers and frontend engineers play a crucial role in developing intuitive and user-friendly interfaces. While designers focus on the visual and interactive aspects of a web application, the final implementation is carried out by frontend developers who translate these designs into code based on established frontend frameworks like React. Developers primarily work with integrated development environments (IDEs) or editors such as Visual Studio Code, which provide various tools to support the development process. However, these tools are currently not supporting the detection of UI/UX design issues in code before runtime.
This thesis aims at bridging the gap between UI/UX design and frontend engineering through the creation of an infrastructure allowing frontend developers to evaluate and improve the UI/UX quality of their React interface code. This functionality needs to be integrated into the commonly used tooling and development workflow to allow frequent assessments without un-necessary context switches. The infrastructure needs to support different types of assessments including code-based and visual. Established usability guidelines should be transformed into code-verifiable rules, making them measurable, testable, and actionable within the frontend developers environments. The assessments need to be available without requiring pre-collected user activity data to enabling detection of usability issues early in the lifecycle.
The objective of this thesis is the creation of a solution or the combination of existing approaches to solve the above problem of facilitating the automated assessment of React frontends through an integrated approach and infrastructure as described above. This comprises the analysis of the state of the art of automated UI/UX assessments, as well as the demonstration of the solution by prototypical implementation and a suitable evaluation based on a mixed-methods experimentation involving both functional and usability aspects.
