Vol.
3 No.
March 2025 .
ISSN: 2987-6990 DOI: https://doi.
org/10.
60005/coreid.
UI/UX Design Of Website-Based E-Commerce Application Using Lean User Experience Method Erwin Teguh Arujisaputra1.
Madi Heriansyah2.
Fadli Emsa Zamani3.
Adam Husain4
1,2,4
Department Information System.
Universitas Kebangsaan Republik Indonesia Asia E University.
Malaysia
Article Info
ABSTRACT
Article history:
Tomkids Children's Clothing Store Bandung is a store engaged in the sale of children's clothing in Cimenyan-Bandung Regency.
So far, activities in the store can be said to be less than optimal, because the transaction process is still carried out conventionally or buyers come directly to the Tomkids Store.
This makes it difficult for customers who live far from the Tomkids Store.
Customers find it difficult to find out what information is still offered by the Tomkids Store, therefore a website design is needed that can help increase sales at the Tomkids Store.
The method used in designing a website at Toko Tomkids is using the Lean UX model based on the website.
From the analysis and design process, a UI/UX E-commerce application will be produced at Toko Tomkids which can help in the promotion and sales process, and make it easier for customers to make online children's clothing purchases.
And the data analysis and processing techniques use a questionnaire by giving statements to respondents.
To reach respondents, 40 people were selected, consisting of two groups, the first is 20 respondents who are lay with e-commerce and experienced in online shopping.
Second, there are 20 respondents who have or have a trading business.
The results of this study are in the form of a better and optimal User Interface and User Experience design for the ecommerce application at Toko Tomkids Baju Anak Bandung based on the website.
The purpose of designing this application is to display the interface and experience pages so that it can provide information to customers, make orders and also be able to make purchases so that customers can make transactions online.
Received January20, 2025 Revised February 27, 2025 Accepted March 22, 2025 Keywords:
User Interface Design User Experience Design E-Commerce Apps Website Based Lean Method This is an open access article under the CC BY-SA license.
Corresponding Author:
Fadli Emsa Zamani Asia E University.
Malaysia Email: fadliemsa7@gmail.
INTRODUCTION
In the digital era like today, e-commerce is one of the things that is really needed by the community.
E-commerce allows buyers to make purchases of goods online without having to come to the store physically.
This makes it easy for consumers to shop anytime and anywhere without being bound by time.
Not only that, e-commerce also makes it easy for sellers to market their products widely without being limited by geographic areas .
By having an e-commerce site, stores can reach customers worldwide and increase thei sales User Interface is the science of the graphical layout of a website or application.
The scope of UI is the buttons that will be clicked by the user, text, images, text entry fields, and all items that interact with the Including layout, animation, transitions, and all small interactions.
UI designs all visual elements, how users interact with web pages .
The visual elements handled by a UI designer are color schemes, determining CoreID Journal | Vol.
No.
March: 23-36 a good appearance that will increase user loyalty .
User Experience (UX) is all aspects related to the user's experience in using a product, how easy it is to understand, how it feels when using the product, and how users achieve their goals through the product .
Electronic Commerce .
lectronic commerc.
is part of Electronic Business .
usiness conducted using Electronic Transmissio.
The global definition of E-commerce is all forms of trade transactions of goods or services conducted electronically.
The formal definition of E-Commerce is a dynamic set of technologies, business process applications that connect companies, consumers, and communities through electronic transactions and trade of goods, services and information conducted online .
The Lean UX method is a mindset that allows for new ways of working and thinking about managing The advantage of using the Lean UX method is that teamwork can be maximized because there are not too many things that need to be explained in full at the beginning and are suitable for rapid development .
The user interface display aims to produce a design that is easy to understand and where the interaction is between the user and the system.
and in user experience, namely to create positive and meaningful interactions between users and a product, service, or application.
One of the specific goals is: user effectiveness of a website design.
E-commerce is an electronic trading media that facilitates and simplifies the process of buying and selling products and services through a digital platform or the internet .
Which aims to increase accessibility for consumers to explore, choose products or services from various locations, without being limited by geographical boundaries.
and the last is to expand the sales market, to reach consumers throughout Indonesia.
The purpose of designing the UI / UX of the E-commerce application at the Tomkids Store, using the Lean UX model is to produce an intuitive website design, which has elements of creating an optimal user experience in a fastmoving environment, and has user-centric functions.
The Learn UX development stage uses 4 stages of development, namely: declaring assumptions, creating mpv, running and experimenting, feedback research.
In the data collection stage using the SEQ and UEQ questionnaires.
SEQ is a questionnaire data collection method by giving 1 question to 40 respondents, while UEQ is a questionnaire data collection method by giving 26 questions to 40 respondents who have 6 scales.
After analyzing the various problems that have been described previously, this study has produced a final result in the form of a user interface (UI/UX) design for a website-based E-commerce application at Toko Tomkids.
The approach adopted in this design is the Lean User Experience Method, which was chosen with the consideration of creating an optimal and efficient user experience.
This method emphasizes a responsive approach to user needs and prioritizes efficiency in the interface development process .
Through the application of the Lean User Experience Method, the purpose of designing the UI/UX of this E-commerce application is to overcome a number of challenges and shortcomings identified in the previous analysis stage.
By focusing on efficiency in the interface design process, it is expected that development can be done faster and can be more adaptive to changes in user needs.
This approach is also expected to produce a more intuitive and user-friendly interface, allowing users to explore and shop at the Tomkids Store with greater The final result to be achieved through this research is to provide a solution that is responsive and in accordance with the needs of Tomkids online store users.
It is expected that the resulting UI/UX design will provide a superior shopping experience, facilitating navigation, product search, item selection, and transaction Through the application of the Lean User Experience Method, this research aims to produce an Ecommerce application interface that not only meets user expectations, but also maintains quality and efficiency in the application development process.
UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 24 CoreID Journal | Vol.
No.
March: 23-36
METHOD
Figure 1.
Research Freamwork The research framework that has been explained previously details a series of steps and stages carried out in the system design process by implementing a system-based approach and conducting comprehensive system development .
The explanation of the design flow and procedures describes a series of activities carried out to create an optimal system, including identification of needs, conceptualization, in-depth analysis, detailed design, detailed implementation, comprehensive testing, to the final implementation and evaluation stage .
1 Research methods Quantitative :is a research approach method that uses data collection methods in the form of numbers or numerical measurements.
This approach aims to describe, explain, or test the relationship between variables .
2 Development methods Declaration of assumptions: This stage is carried out with the aim of identifying problems in website In this stage, the collected data will be a guide to designing a more optimal design display.
At this stage, the stages that have been explained previously are steps in the research process or data analysis .
MVP: Before starting the prototype design, a special style guide or custom style guide will be explained that will be used in the prototype design.
This guide will include color schemes and fonts of various other design elements.
After that, the next step is to continue with the minimum viable product (MVP) design Run an experiment This stage is a testing of the previously created MVP prototype, which can be done internally.
This stage aims to ensure that the MVP functions properly and appropriately before being tested on users.
Feedback and research In this stage, usability testing is carried out on the minimum viable product (MVP) prototype that has been produced, which will then be given to respondents who will be involved in this test, which will reach 40 people.
In the framework of this usability testing, two testing methods are applied, namely the single UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 25 CoreID Journal | Vol.
No.
March: 23-36 ease question (SEQ) and the user experience questionnaire (UEQ), which are used to measure various aspects of usability and user experience that arise from interactions with the existing prototype.
3 Ongoing sales analysis Tomkids store is taking steps towards developing a more modern sales system by entering the world of ecommerce, replacing the conventional sales methods that have been running.
Costumer ordering clothes Figure 2.
Convensinal Shopping Flow 4 Analysis of ongoing procedures In an effort to advance the organization, it is important to conduct an in-depth evaluation of the various processes that are taking place.
This evaluation approach aims to gain a more comprehensive understanding of the performance of the procedures that are being carried out.
Flow chart The current flowchart at the Tomkids store is as follows:
Figure 3.
Flowchart The flowchart shown is a visual representation of the system running within the organization.
The flowchart above is used as a tool to visually describe the flow or algorithm based on interconnected graphic System Design The system design stage arises after going through a process of in-depth analysis of the functional needs of a system.
At this stage, there is a transition from understanding the concept of needs to concrete efforts in planning and building the implementation of the system.
This design has a crucial role in the system development stage, because at this stage it is clearly illustrated how the system will be organized and operated.
Proposed Design Strategic planning for procedure development or improvement is a plan made with the intention of improving the efficiency or end result of a series of steps required in a process.
In this framework, procedure UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 26 CoreID Journal | Vol.
No.
March: 23-36 development or improvement involves identifying areas that require improvement, and formulating concrete steps to be taken to achieve more optimal results.
This approach is adopted to overcome obstacles that may arise in existing procedures, so that the process can run more smoothly, more efficiently, and produce better Use case diagram Use Case Diagram that will be proposed to Tomkids Store for online sales of children's clothes:
Figure 4.
Proposed Use Case Diagram A Use Case diagram is a visual representation of the process flow in a system and the interaction between users and the system.
In this context, a Use Case diagram illustrates the roles of admins and members on a website.
Admins function as transaction managers on the website, while members make transactions on it.
In the Use Case diagram, the admin is seen as a transaction manager who has access rights and authority to manage all transactions in the system, including the ability to manage, change, or delete transactions if necessary.
Tabel 1.
Table of login scenario Usecase Lead Actor Supporting Actor Description Skenario Utama Alternative scenario Extension scenario Login : User : System : User wants to log in to the system User opens an app or website The system displays the login page User enters username and password User clicks the login button The system validates the username and password information entered by the user.
If the login information is valid, the system allows the user to access his account and directs him to the main page.
The user successfully logs into his account and is redirected to the If the login information is valid in step 5, the system notifies the user with an error message and asks the user to try again or reset the If a user fails to log in a predetermined number of times, for example three times, the system may temporarily lock the user's account and require additional steps such as resetting the password.
UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 27 CoreID Journal | Vol.
No.
March: 23-36 Activity Diagram Figure 5.
Activity diagram The activity diagram illustrates the general sequence when a user logs into a system, including key steps such as entering user credentials, checking the validity of the entered credentials, performing the user authentication process, and setting up a user session.
This activity diagram plays a very useful role in providing a real visual representation of the entire workflow involved in the process of logging into the system.
Sequence diagram Figure 6.
Sequence diagram In the sequence diagram depicting the interaction between the admin page, the home page, and the database, there is a clear pattern of how the three entities relate and work together in a Initially, the admin begins the interaction process by accessing the admin page, which serves as a bridge to the system administration area.
UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 28 CoreID Journal | Vol.
No.
March: 23-36 class diagram Figure 7.
Class Diagram In the class diagram image above, we can see the following explanation:
User login: login for users and admins who have registered on the website Username: enter the Gmail or number registered on the website.
Password: enter the password according to the Gmail or telephone number associated with the Check: the data entered between the name and password is correct or incorrect.
System/application: website application used between admin and user.
Lean Ux Method Design At this stage, the aim is to identify the problem.
The steps in the assumption declaration stage which have a valid flow process include:
Literature study Based on the literature study that the researcher obtained and concluded that a good website is a userfriendly website, which means that the website must be able to work easily so that users do not experience difficulties, this is influenced by the user interface and user experience.
with an interface that is easy to see and understand and is given good user experience feedback.
Observation In the observation, identification was carried out on the shortcomings of the user interface and user experience on the Tomkids web application that was being designed.
With the current identification, researchers can find out how the process and function of the menu or UI page on the display of a website design on the tomkids store, in order to find out the shortcomings of the display both in terms of interface and user experience, so that improvements can be made to the design both in terms of appearance and layout design website.
Questionnaire At this stage, the researcher uses the UEQ questionnaire as data collection, this questionnaire can be used when testing the MVP later.
The questionnaire is conducted online using a google form and distributed to users to find problems in UI/UX.
The following are the results of the first UEQ in assessing a Toko Tomkids website design.
Table 2.
Result first UEQ UEQ Scale (Mean and Varianc.
Attractiveness -0,050 0,13 Clarity -0,155 0,38 Efficiency -0,216 0,32 Accuracy 0,30 Stimulation 0,22 Novelty -0,068 0,26 Figure 8.
Result first UEQ UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 29 CoreID Journal | Vol.
No.
March: 23-36 The chart above explains the UEQ scale data, where the negative result means the test failed because the prototype test did not match expectations.
RESULTS AND DISCUSSION
1 User interface (UI) results Based on the results of interviews with shop owners and respondents who have responded to a design plan, on the main page menu of the Tomkids website.
Where there is still information needed for further website development.
Figure 9.
UI results The login page on the Tomkids Store is designed using a simple gradient technique by including buttons and typography on the main page of the website design.
Assumptions and Outcomes Table 3.
Assumptions and Outcomes Assumptions The appearance of the login page is too plain and there is still a lack of image In terms of color display, the orange and black clash too much.
so it is less comfortable on the eyes because the combination is not suitable.
The font is not structured enough so it is difficult to read because the writing is too small and uses a different font so it is difficult for the eye to accept.
The transparent element is too thick so it looks bright white.
Outcomes Adding a background image which can later become the foundation for a strong login page design.
Changing the website/system design by removing black gradient elements and increasing the orange color fill to improve the design quality.
Replace unstructured fonts by using one font that has a strong character for the website login page.
Enlarge the size of the transparent to improve the quality of the color and writing on the transparent.
Creating a Minimum Viable Product (MVP) When designing a prototype for a web application, researchers need to make wise decisions in terms of determining the color palette to be used and the type of font to be applied in the design.
Some options that researchers can consider include the following:
Color palette At the design stage of this prototype, it was decided to utilize a color palette inspired by the palette identical to the background of the tomkids store, the palette that will be used on the website is, using a palette dominated by the basic color orange, presented in the code # FA6626, in addition, there UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 30 CoreID Journal | Vol.
No.
March: 23-36 is a gradation in the main color black with the code # 553C3C, which will give a dynamic touch to the store's website.
Figure 10.
color palette Font In terms of font type usage, researchers choose to adopt a font type known as AupopinsAy.
The selection of this font is based on the popularity and recommendations given by UI/UX designers, especially in the context of e-commerce application development.
This AupoppinsAy font has various variations, including types that include thin, regular, bold, and italic variants.
The diversity of this font type provides flexibility in adjusting the appearance of the text according to the desired design Figure 11.
poppin font Wireframe Wireframe is a simple visual representation stage of a product or application's user interface.
The purpose of making this wireframe is to describe the organizational structure of information in the interface roughly/raw which can facilitate designers in developing and compiling initial concepts before carrying out the detailed visual design stage.
Figure 12.
Customer Login Prototype The wireframe that has been designed will be changed into a prototype as a reference for creating a website design.
This prototype is designed using figma.
The following is an implementation of the interface UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 31 CoreID Journal | Vol.
No.
March: 23-36 that has been designed using figma to be used as an e-commerce UI/UX design.
The appearance and steps are as follows:
Customer .
Customer Login Figure 13.
Customer Login Figure 3.
5 shows the customer login page, when accessing the link, in designing this login page using a desktop size of 1440 x 1024 pixels.
The basic field color is orange and has an HD background of the Tomkids zone logo and an orange button and the font used in writing is coda caption.
In the login there is a username and password that has been registered/registered.
The sign in button is used to login if there are 3 or more authors, only the first author will be written followed by et al.
Run and experiment In this phase, experimental testing is carried out on the user interface and user experience of the MVP .
inimum viable produc.
that has been planned previously.
The main purpose of this test is to evaluate the extent to which the design of the MVP user interface prototype is in accordance with the expected flow or if there is no conformity that needs to be addressed.
In carrying out the experiment at this research stage, it involves various parties who do not understand or who have a deep understanding of the user interface and user experience.
Table 4.
User Interface Menu Features/Aspects Tested Testing Objectives Test Results Main Navigation Ensures intuitive and easy Intuitive and efficient Product Page View Evaluate product Attractive and appearance and informative design.
Purchase Process Check the purchase flow Efficient and easy and payment process purchasing process.
Page Speed Check page load speed Fast and responsive and responsiveness loading times.
Integration with Backend Ensuring integration with Seamless integration with existing backend systems backend systems.
User Experience Evaluate the overall user The user experience is experience across the positive and meets entire site Feedback and research In this phase, usability testing will be carried out on users.
The testing process in this study will adopt the single ease question and user experience questionnaire method approach.
The evaluation step will involve the use of a questionnaire to gain an understanding of the level of usability of the prototype that has been produced in this study.
In the testing process using the SEQ method, users will follow a series of previously prepared usability After completing these tasks, users will be asked to respond to the following simple questions:
AuHow difficult or easy was it for you to complete the task?Ay After that, the assessment will be carried out using a rating scale from 1 to 7.
On this scale, the number 1 indicates a very high level of difficulty, while the number 7 indicates a very high level of ease.
Based on the test results using the SEQ method, it can be concluded that user responses to usability testing by testing scenarios in the application show positive results that can be accepted.
This can be UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 32 CoreID Journal | Vol.
No.
March: 23-36 seen from the majority of users who chose the numbers 5 .
, 6 .
uite eas.
, and 7 .
ery eas.
on the assessment scale.
The method is to distribute a questionnaire regarding whether the UI/UX is easy or difficult.
explains the SEQ method of overall data from 40 respondents with 1 question, where from 40 people who gave this response by giving a scale value of 5, 6, 7.
There were 10 people who gave a value of 5, and 20 people who gave a value of 6, and 10 people who gave a value of 7.
Table 5.
SEQ Result Chart
SEQ
Results 10 people 5 .
20 people 6 .
uite eas.
10 people 7 .
ery eas.
The chart above explains the results of the SEQ which uses 6 scales from 1-7, where the results of the data above can be seen that many placed their value at number 5, with 10 responses and number 6 with 20 responses and number 7 by giving 10 responses.
UEQ .
ser experience questionnair.
Based on the results of the questionnaire that has been conducted, the values obtained will undergo a transformation process and grouping into 6 different scales from a total of 26 items.
The results of this grouping will produce an average value that represents each scale.
The range of values between -0.
8 to 0.
8 will reflect an assessment that tends to be neutral towards the relevant scale, while values exceeding >0.
8 will indicate a positive assessment, and values less than <-0.
8 will describe a negative assessment.
Thus, this average data will provide an overview of how the community evaluates aspects that are in accordance with the scale measured in the questionnaire:
This questionnaire reflects an effort involving the active participation of 40 respondents who enthusiastically gave their responses to 26 statements that have been adapted using the second test UEQ Each question in this questionnaire has been formulated using a linear scale referring to a range of values from 1 to 7.
UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 33 CoreID Journal | Vol.
No.
March: 23-36 Figure 14.
Result of Novelty Table 6.
Result of Novelty UEQ Scales (Mean and Varianc.
Attraction Clarity Efficiency Accuracy Stimulation Novelty 0,16 0,19 0,27 0,27 0,30 0,20 The results of the UEQ test in table 6.
obtained excellent results for novelty and good results for stimulation, for attractiveness, clarity, efficiency and accuracy, the values were above average.
Excellent Good Above Average Below Average Bad Mean Results that are above average or even in the "Good" and "Very Good" categories in several dimensions indicate that the application is considered to be of high quality by users and has good performance according to the measurements taken.
CONCLUSION
The UI/UX design of the website-based e-commerce application at Toko Tomkids Baju Anak Bandung using the Learn User Experience (UX) model has resulted in very significant improvements in user UI/UX Design Of Website-Based E-Commerce ApplicationA (Erwin Teguh A.
, et a.
- 34 CoreID Journal | Vol.
No.
March: 23-36 experience both in terms of interface appearance and user needs.
The Learn User Experience model allows development to focus on user needs and preferences.
The results of testing and implementation of improvements based on user feedback have had a positive impact on the responsiveness, consistency, and effectiveness of this e-commerce application.
In the process of designing the user interface (UI/UX) for the ecommerce application at Toko Tomkids, a number of weaknesses and deficiencies were identified that provide opportunities for improvement.
In this context, here are some aspects that require improvement:
The hope is that the website UI/UX design that has been prepared can be realized in a real form.
Direct implementation of the design is an important step to ensure that each interface element can function optimally and in accordance with the expected goals.
Amidst the development of the world of technology and the appearance of the interface that continues to change from year to year, it is important to recognize that the appearance of UI/UX must also keep up with these developments.
Therefore, it is important to ensure that the interface design does not stop at this research stage, but continues to develop in line with the dynamics of changes in appearance that occur in the industry.
This also refers to the goal of improving the appearance so that the online shopping experience can be better and more comfortable for users.
ACKNOWLEDGEMENTS
Thank you very much to everyone who has helped in the process of completing this research.
Further-more, the authors are grateful to all for providing assistance during the analysis of several parameters.
REFERENCES