1. Introduction

According to the dynamic field of web development, the success of online platforms is becoming more dependent on the establishment of a User Interface (UI) that is both interesting and user-friendly. Johnson places a strong emphasis on the significance of Java tools in the process of creating this equilibrium, while also highlighting the necessity of maintaining a healthy equilibrium between design and technology [1]. Using the Wix platform in conjunction with JavaScript, the purpose of this investigation is to improve one’s understanding of the process of designing resilient user interfaces. The “Education Blog,” is a multi-faceted website that has been built specifically to meet the requirements of a wide range of pupils. The findings that Basak, Abhinav, and Shatarupa arrived at in their investigation provide validity to the position that is being presented here. It is the number [2]. Examples of frameworks that assist the quick creation of graphical user interface (GUI) components and applications are Spring, Hibernate, and Jakarta Faces [3]. Also included in this category are frameworks that are known as frameworks. Among the many exciting components that may be readily incorporated into these platforms, the introduction of online tools for lesson preparation and time management is only one of the many fascinating features that can be added. The user-centered design principles that were offered by Pradeep et al. [4] are related to one of the most significant findings of the study, and there is a link between the two. An essential element of user experience design of superior quality is giving the utmost importance to the user at each stage of the process. The study focuses on specific challenges related to educational apps, such as successfully educating educators and finding the right balance between complexity and user-friendliness. Nicpo ‘s perspectives have inspired this research [5]. The project also explores methods to enhance instructional apps by incorporating psychological elements, game-like characteristics, and tailored user experiences [6]. The user’s text is empty. This study offers a novel viewpoint on the convergence of technology and education by investigating how Java tools may improve online user interface (UI) design on the Wix platform.

This research distinguishes itself from others by implementing these strategies to address real challenges encountered by educational bloggers. This guide [7] can be advantageous for coders and teachers. Developing a captivating online community, maintaining the smooth integration of all functionalities and the user interface, and developing instructional material in mind are all essential factors to consider [7]. Finally, this work systematically addresses the difficulties and constraints of conventional research methods. The process starts by establishing a foundation in practical implementation and subsequently delves into a comprehensive examination of existing literature. The user’s text is empty. The method used involves coming up with specific answers to problems that have already been found. This adds to the growing field of web development, especially for educational platforms.

2. Method

2.1. The Design Thinking Method

The Design Thinking Method is used in the web design process. This is a human-centered, repetitive method that tries to understand users, question assumptions, and reframe problems to find new strategies and answers that might not be obvious at first. This way puts a lot of weight on really knowing users to come up with solutions that make the whole experience better for them [8]. To effectively utilise the online design method of Design Thinking, it is important to possess a profound comprehension of the folks for whom you are developing goods [8]. This technique not only guarantees a visually beautiful user interface but also assures optimal functionality and meets the specific requirements and preferences of the users involved. Figure 1 illustrates the division of the website development process into five main components. An essential element of the Design Thinking approach is its continuous nature. The process involves sequentially engaging in empathy, defining, ideating, prototyping, and ultimately testing [9]. These are the five essential phases of the procedure. The iterative method is advantageous for user interface design since it guarantees that design choices are influenced by both user feedback and the latest industry trends [10].

Figure 1. The five phases of design thinking

2.1.1. Empathy. To begin the design thought process, the first step is to get a comprehensive grasp of the issues that end users are experiencing. This process is referred to as developing empathy via study [11]. The purpose of this crucial step is to concentrate on generating ideas by completely immersing oneself in the environment of the user. This is because the design thinking team is aware that every user has distinct characteristics, attitudes, and requirements, which are frequently overlooked when assumptions are made [12]. As a result, they make an effort to avoid developing solutions that would not be successful in the market. To do this, the team must put themselves in the position of the individual and truly comprehend what they are thinking, much like a supporting actor in a film. This participatory approach, which places a strong emphasis on being acutely aware of the individuals for whom solutions are developed, serves as the foundation for the human-centered concept of design thinking [12]. As a result of this, there is a significant need for a shift away from concentrating on self- reference and towards concentrating on the individual.

2.1.2. Definition. Following the thorough research that was conducted in the phase before this one, the information that was acquired is meticulously refined to identify certain problems [13]. When it comes to the Definition stage, the information that was obtained during the Understanding phase is structured in a manner that results in a logical structure [14]. The observations are subjected to a stringent investigation, which ultimately results in the identification of the fundamental issues. Through the completion of this crucial phase, it is ensured that issue statements are formulated with a significant emphasis on individuals. As the design thinking process progresses, this is the stage at which it becomes abundantly evident which issues require novel solutions.

2.1.3. Ideation. The Ideation phase is all about coming up with new ideas after it has a clear image of the challenges that were outlined in the prior phases [14]. Following this, the Ideation phase is the next step. Using the information that they have gained from the empathy and definition processes, designers begin a collaborative brainstorming excursion in which they examine challenges from a variety of perspectives. As a result of everyone working together, they can generate a broad variety of innovative ideas that are in perfect accordance with the user-centered issue statement [15].

2.1.4. Prototyping. As move through the Prototyping phase, the primary purpose is to identify the most effective solutions to the challenges that it has previously highlighted [15]. To put these ideas into practice, designers create prototypes, which are then subjected to extensive evaluation and refinement based on the feedback received from users. To promote the acquisition of further knowledge by the design team regarding the limitations of the product and the method in which consumers interact with it, this iterative technique is utilised [16]. As this part draws to a close, it is important to note that unique insights into human behaviour, cognition, and emotions give vital input for improving overall solutions.

2.1.5. Testing. At the very end of the design thinking process, prototypes are put through rigorous testing with actual people. The designers or judges do a thorough examination of the entire product, making use of the most effective solutions discovered during the prototype stage [17]. Even though design thinking is the final stage of the five-stage process, it frequently entails making adjustments depending on the results of tests. Depending on the outcomes of the testing, earlier phases may be reevaluated, which may result in additional modifications and enhancements. As is always the case, the primary objective is to acquire a profound comprehension of the product and the people who use it using a process that involves continuous testing and modification.

3. Results and Discussion

3.1. Creative Concept

In a successful website’s user interface and user experience design, the user’s comfort and enjoyment are given the utmost importance [18]. This design also takes into consideration the overall visual appeal of the website [18]. The User Interface, which is comprised of several different components such as desktops, keyboards, mice, and display screens, serves as a mechanism that facilitates communication between individuals and computers. To achieve these objectives, a design strategy that is both straightforward and advanced has been implemented [19]. The font selections that were made are tailored to the profile of the website, which ensures that the legal nuance is maintained. The use of illustrations, which were done on purpose to serve as reinforcing components, is another essential component of the design [19]. In a manner analogous to the development of works of art, these visual aids are vital for elucidating narratives or facts and enhancing the audience’s knowledge of the subject matter. To put it another way, the design of the website strikes a balance between visual components, simplicity, and elegance to provide a user experience that is both seamless and fascinating.

3.2. Creative Strategy

One of the primary goals of this position is to obtain the most favourable outcomes and comments from clients or users [20]. When it comes to designing user interfaces and user experiences for websites, a creative approach is required as a guideline. A strategy that is based on design thinking in this scenario includes the following five processes: empathise, define, ideate, prototype, and test.

3.3. Typography

Typography is an art form that uses science concepts to make beautiful letters. It involves carefully choosing and arranging letters while following rules for space to make a presentation that looks good and is easy to read [21]. Overpass and Manrope have been picked as the styles for this project. In particular, the Founder has said that he likes the Overpass font, which is only used for headers because it doesn’t work well with body text. The Manrope font is used for the body text because it looks balanced and easy to read. The Google Fonts website makes it easy to get to these fonts, and you can use them for free for both personal and business needs [21].

3.3.1. Language Style. The main audience is students, professors, and office workers who deal with serious papers, so the standard style of writing is used [21].

3.3.2. Illustrations. They bought a drawing package from Smash Drawing and looked at different choices Pictures and badges with icons that came from the Wix website were also used in the design. Notably, all of the drawing tools used can be used for free by anyone, for any reason [21]. Additionally, the typer team is shown by a mix of male and female user icons. This website utilised the drawing package provided by the Wix website and then researched the undraw.co website to access more tools. The design additionally included photos and icon badges obtained from the Wix website. It is important to mention that all the design tools used are freely available and may be used for both personal and corporate purposes.

3.3.3. Colors. The colour palette that is used in the user interface and user experience design has been carefully selected, and it takes its cues straight from the client’s brand and the pictures that accompany it [21]. Within the framework of the design approach, this purposeful choice serves various and distinct goals. First and foremost, establishing visual cohesiveness across various brand touchpoints may be accomplished by harmonising the colour scheme with the client’s logo. By maintaining this consistency, brand familiarity is strengthened, and users are provided with an experience that is smooth and integrated [22]. The website becomes an extension of the company identity when the colours from the logo are included in it. This helps to build a sense of familiarity and trust among the target audience [22]. In addition, the colours that were chosen to contribute to the general aesthetics of the design, which in turn enhances the website’s visual attractiveness. It is the client’s brand identity and values that are reflected in the polished and unified appearance that is achieved via the harmonic combination of these colours [22]. As a result, the colour scheme transforms into an effective instrument for communicating the emotionally charged tone and content that is needed. Additionally, the use of colours that are constant across the website and its drawings contribute to the development of a story that is cohesive. It helps direct visitors through a visually intuitive path, in which different parts, tasks, or content categories can be represented by distinct colour signals [23]. The user experience is improved as a result of this since navigation and comprehension are simplified. In essence, the smart selection of colours from the client’s logo and images not only helps to maintain the brand identity of the website, but also adds to the general aesthetics and the user experience of the website. This careful use of colour is a demonstration of the meticulous attention to detail and brand- centric approach that is inherent in the process of user interface and user experience design [23].

3.3.4. Icons. Knight discusses that the icon is the appearance of an object or image, which is a form of representation of what is symbolized. The icons used are obtained for free from Wix.com. The icons used are also not too detailed but still intuitive, so the website design looks simple and clean [23].

3.4. Design Process Overview

3.4.1. Sketch. Drawing sketches, either by hand or with a vector-based program, is the first step in the design process [23]. With this method, you don’t have to worry about design sharpness because vector- based patterns can be made bigger without losing quality. This flexibility makes sure that the design works with a range of screen sizes. Figure 2 shows some examples of sketches.

3.4.2. Wireframe. Wireframes are an important part of UI/UX design because they help artists plan their work. Before moving on to the visual mockup stage, these are just rough sketches that show what each page looks like [23]. This simple sketch shows the structure and information that be shown and can be used as a base for making mockups.

3.4.3. Mockup. A high-fidelity sketch, which is sometimes called a mockup, is made. This outline includes colour, text, and specific design elements that give you an idea of how the website’s User Interface design look when it’s finished. Mockups show what the final product should look like and are useful for demos [24]. Mockups are more like the final design because they include original data, colours, and drawings instead of just wireframes. Figure 2 shows some examples of models.

3.4.4. Prototype. One of the most significant aspects of the process of developing a product is the creation of drawings, samples, or models to test the idea or approach behind the product. In contrast to the final product, prototypes are replicas of the design idea that are intended to be modified and tested before being released [24]. Within the Wix platform, prototypes function similarly to screens and are derived from mockup photographs that have previously been created. Because the pages are connected, user testing is simplified because you can make use of links that are activated by interactive elements in Figure 3 mobile page.

3.4.5. Sitemap Creation. To effectively organise and navigate a website, it is essential to have a roadmap, which is a file that contains the most significant sites [24]. This hierarchical map makes it simple for users to navigate their way around the content that is contained on the website. It is necessary for you to have a sitemap for Wix to assist search engines in locating and processing your page (Figure 4).

Figure 4. Improved homepage Desktop version

3.4.6. Evaluation. The process of designing the user interface and user experience involves several different design thought phases. Empathise, define, ideate, construct, and test are the items in this list. It is essential to do exhaustive testing to identify errors, resolve issues, and, most importantly, evaluate the usefulness and user comfort of the product. It may be concluded that the researcher has completed all of the stages of design thinking, which indicates that the design has been thoroughly reviewed.

4. Conclusion

In conclusion, the use of UI/UX design played a crucial role in achieving the main goal of creating a website that combines user-friendliness and visual attractiveness. The website consists of five main sections: Home, About, Services, Blog, and Frequently Asked Questions, all carefully developed using the design thinking technique. The process encompassed many stages, including comprehension, description, concept formulation, prototype manufacturing, and thorough testing. By conducting a thorough usability test, the design not only exhibited visual attractiveness but also highlighted its user- friendly features. Nevertheless, it is crucial to recognise that the ever-changing nature of technology and continuous input from consumers may require more modifications in upcoming endeavours. Despite the achievement of the present objectives, it is crucial to acknowledge the limitations of the completed study. The utility assessment is beneficial, but it may not encompass the entirety of technology usage, and with the evolution of technology, novel challenges may arise. Additionally, the scope of user evaluations examined in this study may have been limited. Consequently, future studies should encompass a broader spectrum of perspectives.

In the future, the primary objective of further research should be to stay abreast of evolving consumer preferences and emerging technology. Consistent user input, which may be obtained through continuing research or real-time tracking, can provide further insights into the long-term functionality and aesthetics of the website. To ensure the website remains relevant and usable in a rapidly evolving digital landscape, it is crucial to stay abreast of emerging UI/UX design trends and incorporate new technology. By acknowledging the constraints of this study, one might strategize future research trajectories that are intelligent and adaptable in the dynamic realm of online design and user experience.