Accelerating Front-End Development Through Figma Make: A Design Thinking Approach for a Digital Bar Experience App


Digital Object Identifier (DOI)

https://doi.org/10.1109/ICOCO67189.2025.11334150


Authors

JOHN ROVER SINAG

College of Computing and Multimedia Studies

GENREV GABRIEL RODRIGUEZ

College of Computing and Multimedia Studies

IAN BOOTS BAUTISTA

Mapua University, Makati City, Philippines

Abstract

This study presents the design and evaluation of Atake, a digital bar experience application conceptualized through design thinking and developed using Figma Make, an AI-assisted design-to-code tool. The application supports key in-venue interactions such as anonymous check-in, digital table assignment, mobile ordering, social posting, and real-time user engagement, all delivered within a privacy-first framework that resets session data daily. The development process followed the five phases of the design thinking methodology, incorporating focused group discussions and iterative prototyping. The high-fidelity front-end was generated directly via prompt-based inputs in Figma Make, bypassing traditional wireframing and manual coding. Usability testing with twelve participants yielded an average System Usability Scale (SUS) score of 80.6, suggesting good perceived usability, though the small sample size limits generalizability. Parallel evaluation by three developers produced favorable ratings for readability, maintainability, and integration readiness, but the limited sample constrains broad conclusions. While results indicate the potential of AI-enabled, prompt-based prototyping to accelerate early-stage development, future work must expand testing across more participants, incorporate comparative benchmarking against traditional workflows, and examine long-term deployment in real bar settings.

Keywords

Design thinking
usability testing
Figma Make
AIassisted prototyping
prompt-based UI generation
mobile application development
frontend evaluation
hospitality technology
System Usability Scale (SUS)