ISSN 2089-385X (Prin.
| 2829-6761 (Onlin.
Volume 14.
No.
, pp.
Vertex Published by: Institute of Computer Science (IOCS) Implementation of UI/UX Design in the Development of Profile Website Using the User Centered Design Method Savanda Harianty1.
Sri Wahyuni2.
Ruly Dwi Arista3 Information Technology Study Program.
Universitas Pembangunana Panca Budi.
Indonesia 2,3Faculty of Science and Technology.
Universitas Pembangunan Panca Budi.
Indonesia Abstract Article Info The evolution of UI/UX design on the profile webpage is covered in this study.
A community called Omah Cikal Kreatif aims to empower housewives by fostering their creativity via handicrafts made from secondhand items.
The primary obstacle is the limitations of digital platforms' user interface (UI) design and user experience (UX), which affect user engagement and low exposure.
This research aims to design and develop an attractive, informative and easy-to-use website by applying the UCD approach.
The development process includes user needs analysis, prototype design, and design evaluation using the System Usability Scale (SUS) method.
The results of this research provide strategic insights in improving the quality of website design and strengthening Omah Cikal Kreatif's identity in the digital realm.
Article history:
Received : Apr 05,2025 Revised : Apr 14, 2025 Accepted : Apr 29, 2025 Keywords:
UI/UX.
User Centered Design.
System Usability Testing.
Website Profile.
Corresponding Author:
Savanda Harianty.
Information Technology.
Universitas Pembangunan Panca Budi.
Jl.
Jendral Gatot Subroto.
Sei Sikambing.
Medan City.
North Sumatera.
Email: savandaharan@gmail.
This is an open access article under the CC BY license.
Introduction As digital technology advances, digital platforms play an increasingly significant role in fostering social, creative, and commercial endeavors.
According to Nieborg and Poell .
in the journal Social Media Society, digital platforms have become the backbone of the creative economy, allowing individuals and communities to create, distribute and monetize their work globally.
This not only opens up new economic opportunities but also strengthens social and cultural networks.
Local communities that rely on creative skills, such as Omah Cikal Kreatif, have the potential to grow further with the optimization of an attractive and user-friendly digital platform.
Omah Cikal Kreatif is a community that focuses on empowering housewives through creative activities based on crafts from used goods.
In addition to producing unique and environmentally friendly products, these activities also contribute to reducing waste and raising public awareness about the importance of However, despite its great potential.
Omah Cikal Kreatif faces challenges in increasing visibility and engagement in the digital space.
These challenges are representative of the broader obstacles faced by many community-based creative initiatives attempting to establish a digital Such communities often struggle with limited technical expertise, insufficient resources for professional development, and difficulties in translating their authentic community values into digital interfaces.
One of the main obstacles is the limited user interface (UI) and user experience (UX) design on its digital platforms.
The quality of UI/UX largely determines the extent to which audiences can access and interact with digital platforms.
A poor UI can affect system productivity, as Journal homepage: w.
org/index.
php/Vertex A ISSN 2089-385X (Prin.
| 2829-6761 (Onlin.
almost all application operations depend on a well-designed interface (Setiadi & Setiaji, 2.
addition, an optimized UX can help users achieve their goals more easily and increase user satisfaction with digital products (Putra & Setiawan, 2.
The system development methodology known as User Centered Design (UCD) centers on user characteristics and usability goals during the interface design process (Ravelino & Susetyo.
By applying UCD, the design results are expected to be more relevant, easy to use, and provide a better experience for users.
The UCD approach uniquely accommodates the evolving needs of users through its inherently iterative nature, allowing for continuous refinement as user requirements shift throughout the development process.
This research implements a multi-phase validation methodology where each design iteration undergoes rigorous testing to ensure alignment with user expectations and needs.
User feedback is systematically collected and analyzed at each development stage, from initial wireframing to high-fidelity prototyping, ensuring consistent measurement of user satisfaction and functional adequacy.
This methodological approach is particularly relevant in the context of sustainability and local creative economy trends, which are increasingly influencing consumer preferences and digital The design methodology integrates these trends by prioritizing features that highlight sustainable practices, showcase local craftsmanship, and facilitate community-based economic Previous research shows that using a UCD approach can improve the visual appeal and functionality of a platform, thus expanding its reach and increasing user engagement (Norman, 2.
Through the application of UCD based UI/UX design.
Omah Cikal Kreatif is expected to be able to present a more attractive, informative, and interactive digital platform.
This will not only facilitate user access to information about community activities and products but will also increase public awareness of the values promoted by this community.
In order to help the community increase its digital reach and increase interaction with a wider audience, this research intends to design and develop the UI/UX of Omah Cikal Kreatif's digital platform using a User Centered Design approach that continuously validates and adapts to user needs throughout the design process.
Research Method User Centered Design (UCD) The User Centered Design (UCD) approach was the research methodology employed in this study.
From system development to goals, tools, and work methods.
User Centered Design places users at the center of the system design process.
Since this approach is centered on user demands and experience, communication between the developer and potential users is essential to its success.
It has been demonstrated that this approach results in highly usable systems, so that users more easily understand the information presented (Iqbal.
Marthasari, & Nuryasin, 2.
The UCD methodology is particularly valuable for this research as it adapts to evolving user requirements throughout the development process.
By maintaining continuous engagement with users.
UCD creates a feedback loop that allows developers to identify and address changing needs as they emerge.
This approach recognizes that user requirements may shift as they interact with different iterations of the system, providing opportunities for refinement at every stage of Figure 1.
Stages of User Centered Design Vertex Vertex.
Vol.
No.
2, (Jun.
A Stages of User Centered Design (UCD) The UCD method's design phases are as follows:
Context of Use At this stage researchers identify users as well as the environment in which the system will be used.
Data is collected through observation and questionnaires to understand user needs and problems related to the system to be developed.
This initial assessment establishes a baseline understanding of user expectations and contexts, which serves as a reference point for identifying changes in user needs throughout the development process.
Indicate the Needs of the User and the Organization The purpose of this step is to determine organizational and user needs.
In order for the produced system to satisfy user expectations and offer the best possible experience, researchers examined the features that were required.
User needs are documented comprehensively at this stage, creating a framework against which future changes can be measured.
The research employs structured documentation methods to track how needs evolve throughout the iterative design Produce Design Solution At this stage, the researcher creates a design solution based on the data that has been collected in the previous stages.
This solution is represented in the form of a prototype that reflects the interface structure and user experience that will be implemented on the system.
Multiple design iterations are developed to accommodate the range of user needs identified, with each iteration addressing specific aspects of user feedback from previous cycles.
Evaluate Design Against User Requirements This stage is the design evaluation stage against user needs.
Testing is done to assess the effectiveness, efficiency, and user satisfaction of the system that has been designed.
Feedback from users is needed to make improvements before the system is widely launched.
Iterative Process and Validation at Each Stage The UCD approach implemented in this research follows an iterative cycle, with each stage building upon the findings of the previous one.
After the evaluation phase, the process cycles back to earlier stages to refine the design based on new insights.
This cyclical process continues until the design meets user requirements and organizational goals.
To ensure consistency in measuring user needs throughout the development process, the research employs several validation techniques at each stage:
Consistency Tracking User needs identified in early stages are systematically tracked throughout the development process using a requirements traceability matrix.
This tool helps identify how initial requirements evolve and ensures that fundamental needs are consistently addressed despite changes in design approaches.
Cross-validation Testing At each iteration, multiple testing methods are employed to validate designs from different These include usability testing, cognitive walkthroughs, and heuristic evaluations, providing complementary insights into how well the design meets user needs.
Longitudinal User Engagement A core group of representative users is engaged throughout the entire development process, providing feedback at each stage.
This longitudinal engagement helps identify how user perceptions and needs evolve as they become more familiar with the system concept.
Implementation of UI/UX Design in the Development of Profile Website Using the User Centered Design Method (Savanda Hariant.
A ISSN 2089-385X (Prin.
| 2829-6761 (Onlin.
Comparative Analysis Each new design iteration is compared against previous versions using standardized metrics, allowing for objective measurement of improvements in addressing user needs.
Progressive Fidelity Testing As the design evolves from low-fidelity wireframes to high-fidelity prototypes, testing methods are adapted to match the appropriate level of detail while maintaining consistent core evaluation criteria Data Collection Technique Questionnaire Method Questionnaires are research instruments that contain questions to collect respondent In this study the authors made questions that would be distributed to several prospective users to obtain data on the wants, needs and problems that users often get from the experience of using a product/application.
Literature Study To obtain theoretical information, the author collects data by reading and examining books, paper, or other references relevant to the topic discussed.
System Usability Scale (SUS) One instrument for determining a system's degree of usability is the System Usability Scale.
The system usability scale, created by John Brooke in 1986, is a tool for evaluating the degree of usability of a variety of goods, including websites, mobile apps, software, and hardware.
evaluate the website's usability, ten questions are asked.
A 5-level scale, ranging from strongly disagree to strongly agree, is used to evaluate the answers.
The purpose of this questionnaire is to assess how satisfied users are with the planned system or product (Haryanto.
Ridha & Ridwan, 2.
The ten question items are as follows:
Q10
Table 1.
List of Questions.
Question I think that I will use this website more often.
I found out that website doesnAot have to be this complicated.
I think the website is easy to use.
I need help from other people or technicians in my work, using this website.
I found the features of this website to be working properly.
I found that there were may inconsistencies .
ismatches in this websit.
I imagine that most people will find it easy to learn this website very quickly.
I find this website confusing to use.
I feel very confident and there are no obstacles in my way, using this website.
I need to learn may things first before using this website.
In ten questions, questions with positive values are denoted by odd numbers .
, 3, 5, 7, .
and questions with negative values by even numbers .
, 4, 6, 8, .
The following formula can be used to determine the system usability scale measurement results: .
The calculation is performed by removing 1 (X-.
for every question in odd-numbered order.
The value is determined by subtracting 5 .
-X) from the number of questions in even numbered order.
Total the even and odd-numbered statements' values.
After that, .
is multiplied by the total.
Data Analysis Method Using a Likert scale of 1 to 5, this study considers respondents' responses: 1 strongly disagree, 2 disagree, 3 neutral, 4 agree, and 5 strongly agree.
Vertex Vertex.
Vol.
No.
2, (Jun.
Table 2.
Likert Scale.
Alternative Answer Score Value Strongly Disagree Disagree Neutral Agree Strongly Agree A summary of the guidelines for determining the scores for each question will be Additionally, by adding together all of the respondents' scores and dividing that amount by the number of respondents, the average score of all respondents will be determined.
This is the equation:
Description:
= Avarage score.
= Sum of SUS score.
n = Number of respondents Analysis for the conclusion of SUS scores that have been calculated using SUS Score which has a range of values from 0 Ae 50 Not Accaptable, 50 Ae 70 Marginal and 70 - 100 Acceptable.
Figure 2.
System Usability Testing Research.
Result and discussion User Context Analysis Stage Based on research and user segmentation, the main potential users of this website are:
Demographics Geography Psychographics Behavior Table 3.
Potential Users.
Age 25-50 years female.
Have an interest in recycled Based product.
Care for the environtment and sustainability.
Have an interest in home decoration.
DIY, and creative Likes to share information or support friendly causes Prioritize quality and story behind the product before Looking for home decor inspiration from social media and websites.
Follow an account or community related to sustainable User Requirement Spesification Stage Understanding user needs is essential in designing and developing applications so that they provide a good experience.
Here are the user needs that have been identified:
Implementation of UI/UX Design in the Development of Profile Website Using the User Centered Design Method (Savanda Hariant.
A ISSN 2089-385X (Prin.
| 2829-6761 (Onlin.
Table 4.
User Needs.
User Needs Product Information Easy Navigation Inspiration Ease of Booking Interaction with the Community Contact Data Security Description Product specific pages with photos, prices, materials and product description.
The main menu has categories such as "About Us", "Services", "Products", "Contact".
There are tutorials that give ideas to use recycled Fast booking by providing Features "Buy Now" which leads to marketplace.
Customers join to get information about workshops or events that are implemented.
Provides Number.
Address and Community email for users interact directly.
The website has privacy policy and security system for With features, users can easily get information, order products, and interact with the creative community.
So that user needs can be understood more clearly through this user needs table, the Omah Cikal Kreatif website can be developed in a more structured manner and in accordance with the needs of its target audience.
Design Solution Stage At this stage the researcher designs with color components, fonts, icons, buttons, and so on and makes a guidline design to be used as a reference in designing the Omah Cikal Kreatif profile But before that, in determining choosing blue and white as the main colors on the website.
Regarding the font used.
SF Pro Text.
The font was chosen because it has excellent readability characteristics in its letterforms and can also beautify the design Figure 3.
Design Guideline.
The following section presents the design of the Omah Cikal Kreatif profile website, displayed as both wireframes and a non-functional prototype developed using Figma tools.
The focus of these designs is on the visual representation of the website, without incorporating interactive navigation functionality.
Although not yet functional, this design effectively represents the informational flow and the structural layout of each page.
The design was carefully crafted with the specific goal of supporting an informative, aesthetically pleasing, and relevant user Vertex Vertex.
Vol.
No.
2, (Jun.
Figure 4.
About Us Page.
Figure 5.
Service Page.
Figure 6.
Product Page.
Implementation of UI/UX Design in the Development of Profile Website Using the User Centered Design Method (Savanda Hariant.
A ISSN 2089-385X (Prin.
| 2829-6761 (Onlin.
Figure 7.
Product Detail Page.
Figure 8.
Why Omah Page.
Figure 9.
Contact Us Page.
Design Evaluation Stage Against User Needs Testing the system to meet user needs is the final step in the User Centered Design methodology.
To assess the degree of visability, efficacy, and user happiness with the website under development, the System Usability Scale approach is employed.
Seven respondents, who had backgrounds as housewives, artisans, and others, were obtained when the researchers distributed Below is the data of respondents testing the system and the results of the recapitulation of the assessment of all respondents can be seen below.
Table 5.
Responder Assessment.
Code
Q10
Total Total SUS Score Average SUS Score Value (Sum*2,.
The following usability values are found on the Omah Cikal Kreatif profile website based on the evaluation results utilizing the System Usability Scale approach above:
Table 6.
Website Usability Results.
SUS Score Grade Letter Adjective Ratings Vertex Results Best Imaginable Vertex.
Vol.
No.
2, (Jun.
A As can be seen from the above table, the average score was 95.
According to the SUS score interpretation, 95 receives an A grade with the highest possible adjective rating.
Seven respondents completed the calculations, yielding a total score of 665.
This means that the average System Usability Scale score is 95, earning an A grade with the highest possible adjective rating.
Conclusion This research and design process carried out using the User Centered Design (UCD) approach for the development of the Omah Cikal Kreatif profile website, it can be concluded that this method effectively addressed user needs by producing a design that is informative, accessible, and visually engaging.
Through a series of interative stages including context analysis, user requirement identification, design solution development, and usability evaluation the resulting interface aligns well with the expectations and behaviors of the target audience.
The usability evaluation, conducted using the System Usability Scale (SUS) with seven participants, yielded an average score of 95, which falls within the AuBest ImaginableAy category and corresponds to an A rating.
This indicates that the UI/UX design demonstrates a high level of usability, offering an efficient, intuitive, and satisfying user experience.
The high SUS score provides a strong foundation for the platform's launch strategy and future development.
This can be leveraged through a phased release approach, ambassador programs featuring early adopters, strategic feature prioritization based on user feedback, competitive positioning highlighting superior usability, and evidence-based stakeholder engagement for expansion initiatives.
To maintain relevance amid technological evolution and changing user needs, several sustainability strategies are recommended: implementing continuous feedback systems, adopting modular design architecture, ensuring cross-platform adaptability, conducting regular competitive analysis, developing forward-looking accessibility improvements, aligning interface updates with evolving content needs, scheduling technology stack reviews, and maintaining strict performance standards.
These measures will help the platform sustain its user-centered advantages while adapting to future digital landscapes, ensuring long-term success for this community-centered Reference