JIGE 6 .
JURNAL ILMIAH GLOBAL EDUCATION
id/index.
php/jige DOI: https://doi.
org/10.
55681/jige.
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX Indriana Febrianti Pasaribu1 Computer Science.
Faculty of Information and Technology.
STMIK TIME.
Medan.
Indonesia *Corresponding author email: indrianafebrianti584@gmail.
Article Info Article history:
Received Augustus 30, 2025 Approved September 22, 2025 Keywords:
Figma.
UI/UX.
Boutique Dress Ordering.
Prototype Development.
Usability Evaluation ABSTRACT Xiosena is a Figma-based prototype system created to enhance user experience in the online boutique dress ordering process.
As digital commerce grows rapidly, especially within the fashion industry, seamless and aesthetically pleasing interfaces are vital to attract and retain users.
This research presents the design and development of a highfidelity prototype utilizing UI/UX principles through Figma to simulate the customer journey in ordering boutique dresses.
The research methodology consisted of four main stages: requirements analysis, prototype design, usability testing with the System Usability Scale (SUS), and evaluation.
The prototype emphasized clarity, ease of navigation, and appealing visuals.
Results from usability testing conducted with 10 participants yielded an average SUS score of 83.
5, indicating an excellent level of These results validate the effectiveness of using prototyping tools in earlystage design, especially in domains requiring customized interactions like fashion ecommerce.
This study contributes to the field of UI/UX development by demonstrating how prototyping with Figma can bridge the gap between user expectations and functional design in fashion-related digital platforms.
Copyright A 2025.
The Author.
This is an open access article under the CCAeBY-SA license How to cite: Pasaribu.
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX.
Jurnal Ilmiah Global Education, 6.
, 2420Ae2434.
https://doi.
org/10.
55681/jige.
INTRODUCTION
In the age of digital transformation, the fashion industry has become one of the fastestgrowing sectors embracing online platforms.
Boutique fashion, in particular, offers a unique experience with exclusive and often customizable products.
However, this exclusivity presents challenges when transitioning to digital platforms, especially regarding user interaction and interface design.
Traditional online stores are often not equipped to convey the personalized and luxurious shopping experience expected in boutique fashion.
The increasing reliance on mobile and web-based shopping requires that businesses prioritize user interface (UI) and user experience (UX) design.
According to a recent study, 88% of users are less likely to return to a website after a bad experience (Purba et al.
, 2.
In the boutique segment, where design and detail are paramount, an interface must not only be Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2420 Pasaribu / Jurnal Ilmiah Global Education 6 .
functional but also reflect the aesthetics and elegance of the brand.
In this context, digital prototyping using tools such as Figma has become critical.
Figma is a cloud-based design tool that facilitates collaborative UI/UX design, allowing stakeholders to develop high-fidelity interactive prototypes.
Its use in academic and industrial settings has increased significantly due to its cross-platform capabilities and ability to simulate real user interactions (Amelia & Tan, 2.
Prototyping enables early-stage testing and validation, which are essential for identifying usability issues before full-scale development (Bangor.
Kortum, & Miller, 2.
Several studies support the application of user-centered design (UCD) in e-commerce A study by Nurhidayah .
emphasizes that UCD significantly enhances satisfaction and loyalty.
Similarly, the implementation of the System Usability Scale (SUS) as a usability measurement tool allows researchers to quantify user experiences through a standardized questionnaire (Puspitasari & Maulana, 2.
This methodology has been widely adopted in UX research for its simplicity and reliability.
This research focuses on designing a prototype named "Xiosena," a digital system specifically tailored for ordering boutique dresses.
The main goal is to develop a Figma-based high-fidelity prototype that offers an intuitive and engaging shopping experience.
The prototype is built based on user needs.
UI/UX principles, and usability feedback.
The development process consists of requirements gathering, design and prototyping, user testing using SUS, and The significance of this research lies in its dual contribution to academic and practical From an academic perspective, it adds to the literature on UI/UX development and usability testing in niche e-commerce applications.
From a practical standpoint, it provides a replicable framework for boutique businesses aiming to digitize their services while maintaining a strong brand identity.
Furthermore, the research identifies several key issues faced by boutique fashion consumers in online platforms: Difficult navigation and information overload.
Lack of customization features for dress orders, and Uninspiring and inconsistent design aesthetics.
Xiosena addresses these issues through a minimalistic design, personalized ordering flow, and visually appealing product displays.
The interface includes components such as product categorization, filter systems, customization forms, and order tracking features.
METHODS
This study adopts a User-Centered Design (UCD) approach to develop a boutique dress ordering system prototype named Xiosena, implemented through the Figma prototyping tool.
UCD is a design framework that focuses on continuous user involvement throughout the product development cycle to ensure functionality and user satisfaction (Gunawan et al.
, 2021.
Lestari, 2.
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2421 Pasaribu / Jurnal Ilmiah Global Education 6 .
Figure 1.
Flowchart Explanation for Xiosena App This flowchart illustrates the user flow through the Xiosena app, specifically designed for the boutique dress ordering experience.
The flow begins from the Splash Screen and progresses based on the userAos choices.
Splash Screen The Splash Screen is the introductory page shown when the user launches the Xiosena app.
It features the brand logo and serves to initiate the user journey.
Register .
If a user does not yet have an account, they will be directed to the Register page.
This step requires the user to input their Full Name.
Email Address.
Password, and agree to the Terms & Conditions.
Once the registration is completed, users are guided back to the Login page to access their newly created account.
Login .
On the Login page, users with an existing account can sign in by entering their registered Email Address and Password.
If they forget their login details, users have the option to use the Forgot Password feature for recovery or reset.
Forgot Password The Forgot Password option allows users to retrieve or reset their password, ensuring they can regain access to their accounts if needed.
After resetting, users are redirected to the Login screen.
Home Page Upon a successful login, users are taken to the Home Page, where they can explore different sections of the app, including the Product Catalog.
Profile.
Cart, and Transaction History.
Cart Users can add products they wish to purchase to the Cart.
The cart summarizes the selected items, and users can review or adjust their selections before moving to Checkout.
Checkout The Checkout screen is where users finalize their purchase, entering details like shipping address and payment information.
At this stage, the system indicates that they are waiting for Payment until the transaction is completed.
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2422 Pasaribu / Jurnal Ilmiah Global Education 6 .
Payment Successful Once the payment is processed successfully, users are directed to the Payment Successful page, confirming that their order has been completed.
Transaction History Users can view their Transaction History to check past orders, track shipments, and access details of completed purchases.
Profile The Profile section allows users to manage their personal details, payment methods, and preferences, giving them control over their account settings.
Notification Users receive Notifications for various updates, including order progress, payment confirmations, and promotions, keeping them informed throughout their shopping Log Out Users can Log Out at any time, which ends their session.
Upon reopening the app, the user will be redirected to the Splash Screen.
This revised flowchart emphasizes an intuitive user journey, reflecting the core principles of User-Centered Design (UCD).
The app ensures ease of use, minimal complexity, and a seamless experience for boutique dress orders, all while maintaining consistency with the overall design principles outlined in the Xiosena project.
The research methodology consists of four main stages:
Requirements Analysis The first step was to identify user needs and expectations related to online boutique dress Data were collected using semi-structured interviews with ten participants .
ges 18Ae.
who regularly purchase fashion items online.
The analysis uncovered the following key user needs: Intuitive navigation and logical user flow.
Custom dress measurement and fabric selection.
Aesthetic visual interface aligned with boutique branding.
Transparency in order confirmation and delivery estimation.
These insights were synthesized into personas and journey maps to guide interface decisions, in line with the techniques outlined by Anggraini et al.
Prototype Design Using Figma Based on the requirements gathered, the design team developed a high-fidelity prototype using Figma, a cloud-based interface design tool known for its collaborative features (Amelia & Tan.
The prototype included the following primary screens:
Homepage Product Catalog Product Detail Page Custom Order Form Order Summary Page Order Confirmation Page Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2423 Pasaribu / Jurnal Ilmiah Global Education 6 .
Visual design adhered to principles of minimalist aesthetics, typographic hierarchy, and consistent branding.
The layout and component structure were developed following UI/UX design standards, as proposed by Yusuf .
and supported by Amelia and Tan .
component library was created in Figma to standardize spacing, icons, and responsive behavior across pages, ensuring consistency in user interactions.
Usability Testing with SUS To evaluate the prototypeAos usability, the System Usability Scale (SUS) was employedAia 10-item Likert-scale questionnaire designed to quickly assess the subjective usability of interactive systems (Bangor.
Kortum, & Miller, 2.
The SUS method was chosen due to its wide use in UX studies, its simplicity, and interpretability (Puspitasari & Maulana, 2.
Ten participants were recruited for testing and instructed to complete realistic tasks such as: Browsing product categories.
Viewing dress details.
Entering custom measurements.
Completing the checkout After task completion, each participant filled out the SUS questionnaire.
Scores were calculated according to Bangor et al.
, where a score above 68 is considered above average.
Xiosena's prototype achieved an average SUS score of 83.
5, classified as AuexcellentAy usability.
Evaluation and Feedback Synthesis In addition to quantitative SUS data, qualitative feedback was gathered during post-test This information was categorized thematically, drawing on the evaluation frameworks proposed by Nurhidayah .
and Widodo et al.
Observations focused on:
Navigation ease and cognitive load.
Visual appeal and trust perception.
Customization flow Evaluators also conducted a heuristic analysis based on NielsenAos principles to identify overlooked usability issues.
Table 1.
Summary of Methodological Steps Stage Activities Tools/References Requirement Analysis Interviews, persona development.
Gunawan et al.
Anggraini journey mapping et al.
Prototype Development UI layout, branding, interaction modeling using Figma Yusuf .
Amelia & Tan Usability Testing SUS scoring, real-world scenario Puspitasari & Maulana .
Bangor.
Kortum, & Miller .
Thematic feedback analysis, heuristic validation Nurhidayah .
Widodo et al.
Evaluation This structured methodology ensures that the design of Xiosena not only meets functional expectations but also delivers a user experience aligned with boutique fashion standards.
The next section discusses the results of implementation and user evaluation.
RESULTS AND DISCUSSION
This section presents the outcomes of the design and testing of the Xiosena prototype.
The analysis includes an overview of the user interface structure, the results of usability testing using the System Usability Scale (SUS), expert evaluation using heuristic principles, and Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2424 Pasaribu / Jurnal Ilmiah Global Education 6 .
comparisons with other related studies in the field of UI/UX design for fashion-based Interface Structure and Prototype Overview The Xiosena prototype was developed using Figma with a user-centered approach.
The interface is composed of six primary pages:
Figure 2.
Splash Screen (Opening Interfac.
The splash screen is the first visual element that appears when the Xiosena application is Its purpose is to introduce the brand identity while providing a smooth transition into the main features of the app.
The design incorporates several essential aspects:
Brand Logo: Positioned at the center, the Xiosena logo combines a mannequin symbol with the text AuXIOSENA BOUTIQUE,Ay styled in elegant typography.
Color Scheme: The golden-brown tone used in the logo emphasizes a sense of elegance, luxury, and exclusivity, which reflects the boutique fashion concept.
Clean Layout: A light, neutral background is applied to keep the focus on the brandAos visual identity without unnecessary distractions.
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2425 Pasaribu / Jurnal Ilmiah Global Education 6 .
Figure 3.
Login Screen (Welcome Bac.
and Register Screen (Create New Accoun.
Login Screen (Welcome Bac.
This page is intended for returning users who already have an account.
The login interface provides the following components:
Email Address: Input field for the registered email address.
Password: Input field with an option to show or hide the password for security and convenience.
Remember Me & Forgot Password: Additional features that simplify access in future sessions and offer a recovery option if the user forgets their password.
Log In Button: A consistent primary action button styled similarly to the Register .
Third-Party Login Options (Google/Faceboo.
: Quick authentication alternatives that allow users to log in without manually filling out the form.
From a UX perspective, this screen emphasizes ease of use and flexibility.
The Forgot Password link builds trust by offering a recovery solution, while the integration with Google and Facebook accelerates the authentication process, reducing user effort.
Register Screen (Create New Accoun.
On this page, users are guided to create a new account in order to access XiosenaAos features.
The registration form consists of several main elements:
Full Name: Input field for entering the userAos complete name.
Email Address: Input field for the userAos email address, functioning as a unique account identifier.
Password and Retype-Password: Two input fields with a minimum of eight characters required, ensuring account security.
Terms & Conditions Checkbox: Users must agree to the applicationAos terms before completing the registration process.
Register Button: A primary call-to-action button with a brown-gold gradient design, visually emphasizing the registration process.
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2426 Pasaribu / Jurnal Ilmiah Global Education 6 .
From a UI/UX perspective, this screen applies the principles of clarity and minimalism, focusing the userAos attention on the main task of account creation.
The vertical arrangement of fields provides a logical input flow, while icon usage enhances visual guidance and usability.
Figure 4.
Dress Catalog Page (Homepag.
This figure shows the main catalog page of Xiosena.
Dresses are displayed in a responsive grid layout with image previews, names, ratings, and prices.
A horizontal filter allows users to sort by category (All.
Premium Collection.
Bridesmaid Dres.
The design emphasizes simplicity and visual hierarchyAiprinciples supported by Nurhidayah .
and Khairunnisa & Rahman .
The top bar includes a greeting and search field, fostering a personalized shopping experience (Aulia, 2.
Figure 5.
Shopping Cart Summary Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2427 Pasaribu / Jurnal Ilmiah Global Education 6 .
After product selection, users are brought to a summary of items in their cart.
This page displays item names, quantity, and total price.
The clear AuCheckoutAy button below enables intuitive progression.
As recommended by Bangor et al.
, the interface minimizes cognitive load and supports error recovery by allowing easy item removal.
Figure 6.
Product Detail Page Ae Champagne Tulle Dress This page provides detailed information about a selected dress, including price, available sizes, and expandable panels for description, care instructions, and shipping info.
The elegant minimal layout and AuAdd to BagAy button encourage conversion, aligning with UX strategies for fashion-based apps (Anggraini et al.
, 2021.
Yusuf, 2.
Figure 7.
Order History Screen Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2428 Pasaribu / Jurnal Ilmiah Global Education 6 .
This figure displays the userAos order history section.
In its current state, it informs users that no orders have been made yet.
The design includes iconography and a motivational message, encouraging users to explore products.
This aligns with user-centric communication strategies outlined by Amelia & Tan .
to maintain engagement.
Figure 8.
User Profile Page The profile section displays user information and offers quick access to account management options such as Edit Profile.
Payment Methods, and Language Settings.
The organization of information follows the heuristic of logical grouping and user control (Bangor et , 2.
, enhancing usability for frequent users.
Figure 9.
Notification Page Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2429 Pasaribu / Jurnal Ilmiah Global Education 6 .
This screen shows system notifications, including order confirmation, pickup schedules, and new product announcements.
Using icons and a clean vertical list, this page enhances visibility of system statusAia key heuristic identified by Nielsen and supported in Puspitasari & MaulanaAos work .
Figure 10.
Checkout Page The checkout interface includes user shipping address, shipping method, payment method, and cost breakdown.
It also provides a prominent AuConfirm PaymentAy button.
presenting all necessary information clearly, this page reflects the design philosophy of transparency and ease of action (Nugroho & Surbakti, 2023.
Widodo et al.
, 2.
Figure 11.
Virtual Account Payment Instructions Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2430 Pasaribu / Jurnal Ilmiah Global Education 6 .
This screen provides detailed payment instructions for BCA virtual accounts, including a timer, total amount, and transfer steps.
The informative layout supports error prevention and matches usersAo mental models for e-banking processes.
According to Putra & Sari .
, clarity in the payment process significantly improves trust in mobile commerce.
Figure 12.
Payment Confirmation Page The final screen confirms a successful payment and offers next steps: AuView Order StatusAy or return home.
A green check icon provides visual feedback for successful action.
This screen serves as closure for the user journey and supports satisfaction, as emphasized in SUSbased UX evaluations (Bangor et al.
, 2020.
Puspitasari & Maulana, 2.
Each screen was built based on UI/UX principles such as visual hierarchy, consistency, and responsiveness, which align with the findings of Yusuf .
and Lestari .
The design emphasized boutique identity through soft color palettes, serif typography, and elegant layouts, consistent with recommendations from Aulia .
and Amelia & Tan .
Usability Testing Using SUS Usability testing was conducted with 10 participants between 18Ae35 years old who regularly purchase fashion products online.
Tasks included browsing the catalog, customizing a dress, and completing an order.
Participants then completed the SUS questionnaire.
Table 1 presents the SUS scores collected:
Table 2.
SUS Scores from 10 Participants Participant SUS Score Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2431 Pasaribu / Jurnal Ilmiah Global Education 6 .
Participant SUS Score
P10
Average Based on the SUS interpretation scale by Bangor et al.
, a score above 80 is considered This score confirms that the Xiosena prototype is perceived as highly usable and wellaligned with user expectations.
It surpasses the results of similar studies such as Hartati .
, who obtained a SUS score of 76, and Nugroho & Surbakti .
, who reported a score of 78.
Heuristic Evaluation and User Feedback A heuristic evaluation was conducted by three UI/UX experts using NielsenAos 10 usability Observations included:
Visibility of System Status: Progress indicators were visible during order submission and Match Between System and Real World: The terminology matched the userAos mental model, e.
, using Aufabric,Ay Aufit,Ay and AucustomAy instead of technical jargon (Putra & Sari.
User Control and Freedom: Users could go back and change measurements or preferences without restarting the order.
Aesthetic and Minimalist Design: The visual design used clean, boutique-aligned elements, as supported by Khairunnisa & Rahman .
Help and Documentation: While clear, the lack of live chat or help pop-ups was noted as a limitation (Widodo et al.
, 2.
Users provided additional qualitative feedback, which fell into three main categories:
Positive Themes:
AuLooks premium and elegant.
Ay AuNavigation is really smooth and easy to understand.
Ay AuFelt like shopping in a real boutique.
Ay Suggestions for Improvement:
Add a chatbot or FAQ section.
Include estimated delivery dates.
Provide preview images when selecting fabric/customizations.
These suggestions mirror patterns observed in NurhidayahAos research .
, where users seek both customization and guidance when shopping online for apparel.
Comparative Analysis with Related Studies The prototypeAos SUS results and features were compared with similar studies as presented in Table 3:
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2432 Pasaribu / Jurnal Ilmiah Global Education 6 .
Table 3.
Comparison of SUS Scores and Features Study Hartati .
Platform Adobe XD SUS Score Unique Feature Responsive layout Nugroho & Surbakti .
Web App Filtering and product ranking Widodo et al.
Mobile App Real-time order tracking This Study (Xiosen.
Figma Web App Boutique customization flow As shown.
Xiosena achieved the highest SUS score and was the only system tailored specifically for boutique fashion ordering.
The combination of minimalist aesthetics, personalized forms, and consistent UI contributed significantly to this performance.
Challenges and Recommendations Although the results are promising, several limitations were observed:
No Dynamic Preview: User input for customization does not dynamically update the visual representation of the dress.
Incorporating this feature could improve user satisfaction (Aulia, 2023.
Anggraini et al.
, 2.
Frontend-Only Functionality: The prototype lacks backend integration for payments and real-time order status updates.
Demographic Limitation: All participants were from a young, tech-savvy demographic, which may limit generalizability (Gunawan et al.
, 2.
To enhance the prototype, the following improvements are recommended:
Implement a chatbot system to assist users in real-time (Widodo et al.
, 2.
Add AR-based try-on features or dynamic previews of dress customizations (Aulia, 2023.
Amelia & Tan, 2.
Conduct broader usability testing with diverse user profiles and perform A/B testing to optimize interface performance (Yusuf, 2020.
Rizal, 2.
CONCLUSION
This study demonstrates the effectiveness of high-fidelity prototyping using Figma in the development of a boutique dress ordering system called Xiosena.
Through a structured usercentered design methodology, the system was able to simulate a seamless and visually appealing user journey for fashion consumers seeking custom boutique apparel.
The resulting prototype addressed the core pain points often found in traditional boutique systems, such as limited navigation, lack of customization options, and ineffective product presentation.
The usability evaluation using the System Usability Scale (SUS) showed a high level of satisfaction among users, with an average score of 83.
5Aiindicating that the system is not only functionally sound but also enjoyable to use.
Moreover, the feedback revealed user appreciation for the interface clarity, ordering flow, and product detail display.
This validates the integration of UI/UX best practices in digital fashion platforms.
For future development, it is recommended that Xiosena incorporate real-time communication features such as chatbots, and consider integrating backend support for seamless order tracking and payment processing.
Additionally, this study opens avenues for further research in applying augmented reality or virtual fitting room tools to enhance the digital fashion shopping experience.
Xiosena serves as a prototype model for boutique businesses looking to transition into the digital space with user-centered design principles, and the study provides a framework that can be extended to other niche e-commerce domains.
Xiosena: Figma-Based Prototype Design and Development for Boutique Dress Ordering Using UI/UX - 2433 Pasaribu / Jurnal Ilmiah Global Education 6 .
REFERENCES