FEAD: Figma-Enhanced App Design Framework for Improving UI/UX in Educational App Development

TL;DR

This study targets poor UI/UX design capabilities in MIT App Inventor by introducing the FEAD Method, which tightly couples Figma with the MIT App Inventor workflow via an identify-design-implement cycle. Employing an 8-point grid and Gestalt perception principles, FEAD guides students from problem framing to implementation, validated through a case study on a shopping-list app. Quantitative results show FEAD designs achieve mean UI/UX and color scores of 0.727 and 0.719, respectively, far exceeding baseline scores of -0.380 and -0.423, with 61.2% of participants rating FEAD as professional. The work demonstrates that integrating professional design tools into educational programming environments can substantially enhance usability, aesthetics, and perceived quality, offering a scalable path for design-first education in app development.

Abstract

Designing user-centric mobile applications is increasingly essential in educational technology. However, platforms like MIT App Inventor-one of the world's largest educational app development tools-face inherent limitations in supporting modern UI/UX design. This study introduces the Figma-Enhanced App Design (FEAD) Method, a structured framework that integrates Figma's advanced design tools into MIT App Inventor using an identify-design-implement workflow. Leveraging principles such as the 8-point grid system and Gestalt laws of perception, the FEAD Method empowers users to address design gaps, creating visually appealing, functional, and accessible applications. A comparative evaluation revealed that 61.2% of participants perceived FEAD-enhanced designs as on par with professional apps, compared to just 8.2% for baseline designs. These findings highlight the potential of bridging design with development platforms to enhance app creation, offering a scalable framework for students to master both functional and aesthetic design principles and excel in shaping the future of user-centric technology.

Figures (12)

• Figure 1: This diagram illustrates the FEAD methodology applied to a login screen. (1) Identify: Initial design flaws, such as poor visual hierarchy, misaligned elements, and excessive text, are pinpointed. (2) Design: Solutions are shown using wireframes, refined with grids for even spacing, and polished with a color palette to improve aesthetics. (3) Implement: The finalized design is deployed in MIT App Inventor, where components are arranged and tested to create a fully functional and visually polished app.
• Figure 2: The original app design is displayed, highlighting components A (Add), B (Remove), and C (Clear). The close proximity of these components and the lack of visual distinction emphasize the need for a redesign to enhance usability and aesthetics.
• Figure 3: This improved wireframe demonstrates the logical repositioning of components to enhance usability. The left screen applies the Law of Proximity by grouping related elements, while the right screen incorporates the Law of Common Region to further organize the interface with distinct visual boundaries.
• Figure 4: The spacing of the design follows the 8-point grid system through the layout grid feature in Figma. Rows are set to a height of 8 px, with standard settings for margins and gutters set at 16 px, allowing for consistent alignment across the interface.
• Figure 5: In the improved wireframe design, components A (Add), B (Remove), and C (Clear) are redesigned for clarity. They are separated, replaced with icons, and positioned closer to their respective elements for better visual grouping and usability, as pointed out by the red arrows.