Beelic Website Design as an Information Center for Design, Promotion and Marketing of MSME Products in the Pandemic Period

. During this pandemic period, the obstacles faced by MSMEs (Micro, Small and Medium Enterprises) had a brutal impact on SME industries. In the interior, furniture and interior accessories are facilities that can be used together as an Information Centre, promotion and marketing that is effective, flexible, and multifunctional support business in the future. Naturally, business income has significantly decreased. Hence A strategic step and breakthrough are needed so that MSMEs can also take advantage of the market potential in the industrial era 4.0. This research aims to design the BEELIC website as a flexible tool that MSMEs can share in obtaining education, developing design knowledge, and promoting and marketing products. This research continues an Interior Research on recycling container waste with a Biophilic Design approach named BEELIC. The application of the biophilic element also makes SME products with added value. It has advantages that can meet market needs and become alternative solutions to the community's needs during the pandemic. Continuing the spirit of sustainability, people can discover the products of these MSMEs and various information BEELIC design solutions through the BEELIC website. Hence this website needs to be designed to meet these needs. From User Interface to user experience the methodology used is a literature review, online survey, case study, analyzing data, developing designs, making prototypes, evaluating, and producing the final site design. The case study in this research is a website design where the design and technology can fulfil the needs for information and solutions the MSMEs and people need.


Introduction
In the digital era, the website is an essential element for an organization to digitally promote its products and services.Especially in an era where technology is increasingly advanced, having a website has become an obligation for those who want to compete digitally.Every organization must have a business card to distribute to candidates' consumers if offline.The website will become an online business card more effective because it can be accessed by anyone and everyone if they know the website's address.However, having a website in this digital era has its challenges.With almost all organizations and individuals already having their websites, when looking for something, users will be faced with many website choices to enter.Furthermore, the real challenge is when the user logs in, what is the website?Able to attract attention, can provide information, and can answer user needs or not.The results show that the average user spends about one minute to forty-nine seconds browsing a website.Before deciding whether they will exit the web or continue to search for the information, they need [1].Users have high expectations of websites in this era.They have a low level of tolerance for websites that do not function properly [2].Therefore, careful planning is needed to create a website that can attract consumers' attention.One of the science concepts that scientists and professionals often use when creating a website is usability.Usability relates to how easy a website is to navigate, how fast users can navigate the website, how efficiently they use it, and how easy it is to remember [1].Usability is also closely related to visual design.When creating a website, planning is crucial to visually choose which information needs to be presented on the site web to persuade users.Website designers who understand this principle will be better able to design websites according to user needs [2].This study aims to design a website that can answer user-specific needs, is easy to understand, easy to navigate, and aesthetically appealing in users' eyes.The design of this website will focus on the placement of information, display interface, and user flow using design principles for convenience users in understanding and navigating the website.The design also uses the principle of 2 visual identities where identity elements such as logos, colors, typography, and images, will be arranged according to practical rules so that users can clearly remember the website's identity.

Objectives
From the economic and business aspects of MSMEs, this research is expected to positively impact increasing MSME income and generating and expanding domestic and global markets.In this case, the research is also expected to provide a new strategic breakthrough in product development education to MSMEs through the design, promotion, and marketing Information Centre through the BEELIC website to meet the needs of the market and the wider community.
This website can provide information and explanations with a more interactive approach to facilities and interior design.Using waste containers with a biophilic approach through the BEELIC website and expanding the range of information and transactions, both marketing and information on MSME products, make MSME products easy to access and meet customer needs.The market needs and becomes an alternative solution needed by the community during the pandemic.Website Usage it is possible for interior designers and MSMEs to provide information related to the use of BEELIC products and as a portal for selling MSME products.Whether the BEELIC website can attract attention, can provide information, and can answer user needs or not.The results show that the average user spends about one minute and forty-nine seconds browsing a website before deciding whether to leave the web or continue looking for the information they need [1].
Environment and SDGs the use of the BEELIC website for MSME products during a pandemic and part of the SDGs principle as an essential contribution of this research to global issues also makes it easier for marketing and production.All products can be ethically produced because these products are made on request, compared with mass-produced products.Industry 4.0 With the integration of industry 4.0 in this research, it is hoped that it can support design, promotion, and joint marketing information activities for MSMEs.

Literature Review
MSMEs are one of the sectors most affected by the COVID-19 pandemic.However, this pandemic period is a challenge, so MSMEs must survive and make breakthroughs in order to be sustainable in the future.In this challenging time, with expectancy that MSMEs can develop leadership, insight, and motivation to rise again and contribute to the national economy.Based on [3], the declining contribution of SMEs during this pandemic has received serious government attention.MSME is currently facing various challenges.These include capital reductions in sales, a shortage of raw materials, restrictions on production, obstruction of distribution and redundancies so that they become a threat to the national economy.As a driving force for the domestic economy and jobseekers, MSME is facing declining productivity, resulting in significant revenue cuts.Mitigation and recovery solutions are needed to counter these conditions and face these problems.Shortterm priority mitigation measures create stimulus on the demand side and encourage digital (online) platforms to expand partnerships.Other efforts are through cooperation in the use of innovation and technology that can support the improvement of product quality and competitiveness, product processing, packaging, marketing systems and others.One of the facilities that MSME actors can use is a shared information facility that can add insight into the design and expand the global local market.

Information Center for MSME Product Design, Promotion and Marketing
The website design for promoting and marketing information for MSME products is a necessary tool for networks of MSME.With designers, associations, and academics to create quality, value-added and competitive products that contribute to society, business and knowledge.These facilities/facilities can inspire and stimulate creative thinking in the design world, especially in the face of this pandemic.Meanwhile, from the business aspect, this suggestion can build awareness of the value of design to the public and the business world regarding the importance of design as an alternative solution to local and global issues.This facility is also a stimulus container that educates and provides experiences for users to trigger imagination in their work as a means to support the sustainability of MSMEs, especially during the pandemic.The presence of this information Centre can function as a design clinic, technical guidance services, promotion, and marketing for MSME products online.

Website Navigation System
BEELIC's website will target those who want to know about BEELIC design products.So, they should be able to easily understand and navigate the website without thinking long [4].However, business actors often try to provide as much information as possible on one page.With the density of information, visitors take longer to understand the website's content, and there is a possibility that they will decide to leave if they feel uncomfortable with the amount of information and appearance of the website.The following fact is that when designing websites, we often make detailed pictures and writings in the hope that visitors will read all the information.
Nevertheless, when visiting a website, visitors will scan the page.Their eyes will look at the part that catches their attention, scan which information they need and then read it, or scan which button can be clicked.It can be said that visitors do not read the website but scan the website to find the required data [4].Usability on the website According to ISO Ergonomics, the definition of usability [5] refers to how users can use a product to achieve specific goals effectively, efficiently, and satisfactorily.Users in this context are people who have interests or are engaged in the same field and need the information contained on that website.The success rate is measured by how easily and quickly they can get the information they need on the website.
Meanwhile, other studies have found that efficient interaction between users and a website can increase the loyalty of these users [6].When entering a website, if visitors can navigate and find information easily, this will lead to visitor satisfaction, which will make them have a good perception of the brand of the website.All consumers use a story-driven mindset when they want to understand how they use the product.Consumers also use this mindset when referring to a product to others [7].Using a Z pattern makes it easier for visitors to navigate the website, easily remember their experience with the product, see the values offered, and increase visitor satisfaction.Mapping what visitors need prepares the website structure from the first time they enter the website and how they search for information and navigate each page they visit.
Wireframe and prototype design are used to construct a solid and clear design for maximizing information on the website.After the mapping has been done, the data collected will be arranged in a page framework which is often also referred to as a wireframe [8].This wireframe is usually done in the form of a rough sketch on paper or a computer without involving a design but can provide clear directions on the website to be created.After the wireframe is created, the next stage is to make a prototype that involves visual composition, which includes color, text selection, and shape [9].The prototype is made as close to the original as possible so that it can be seen by the whole team and can also be tested for users to get input on them whether this website is in accordance with the concept created and whether it can answer user needs.Design principles on websites Are an essential part of all design processes because these principles will make a website easy to use and easy to understand [10].Designing a website takes principles such as balance, grid, hierarchy, and grid [11] to create an attractive and communicative composition.The application of design principles on a website can make visitors more focused on important information and understand the flow or structure of the website.Creating emotions through visuals, good design is a design that can trigger emotions and create connectivity between consumers and the product or service.Since humans are also emotional creatures, it is imperative to incorporate this element into the design.There are two stages to creating emotions through visuals: Visual Emotional and Emotional Relationships [12].Emotional Visuals can be created through evocative images, expressive typography, and simple visual layout.Emotional connection can be built after there is an emotional visual.Design strategies can form an emotional connection with consumers to interact with them.

Methods
The method used in designing the BEELIC website adapts the branching approach problem-solving method from John Bower, which consists of learning, identifying, generating, implementing [12] and refining.1) Learning is done to understand how users navigate the website.2) Identifying, the team begins to identify which information will focus on the website.For 3) Generating, the team will create a wireframe to compile existing data into the website framework.4) Implementing.At this stage, the team will create a website prototype by creating a key visual that refers to the mood board made in previous research.The prototype is made as closely as possible using design principles and then tested by the user for evaluation.For the final stage, 5) Refine, the team will make a prototype based on the inputs obtained from previous trials and implement it on the BEELIC website online.

Data Collection
The data can be collected using various techniques.The research question guides the decision about which tool to use for data collection.Some data collection methods are interviews, Focus Groups, Field Observation, Case studies, Ethnography, and Oral History.Projective Techniques Some instruments of data collection are questionnaires and Interview schedules.Observation of the BEELIC website's visual appearance becomes crucial because this is where the user will observe and dissect the information provided.So what visual elements and principles are used to achieve the information presented according to the objectives.In addition, to comprehend the visuals, a study is also conducted on how each visual element & principle is used.Furthermore, they can be clearly and coherently related to each other so that the communication objectives can reach the audience.Observation starts from the main page or landing page.On this page, the user interacts for the first time with all the content and information are showed beforehand.So that before the user continues his navigation to another page.The presentation of this first page becomes a moment of truth from user interaction and content before the user will explore the BEELIC website according to the user's goals.

Results and Discussion
Learning & Identifying Problems From previous research, the research team learned a need for a compact semi-permanent place that is easy to install, compact, and customizable.That is why BEELIC positions itself as a design solution.BEELIC prioritizes quality, Biophilic designs, and excellent service to support consumers who need some semi-permanent place in response to consumer needs.The formulation of the problem is how to design a website that reflects the values of BEELIC and helps visitors quickly understand the advantages of BEELIC and understand the products offered.The design of this website will also use design principles so that visitors can easily navigate and find the information they need.The design of this website will also use design and assets created in previous research to make it easier for the team researchers in the design.There is no need to start from scratch.5.2 User Journey Mapping At this stage, the research team and the BEELIC team determined five phases to map the digital user journey.The five phases are awareness, interest, consider, evaluate, and convert.Awareness is when users are digitally searching for something related to fashion, such as inspiration for the latest styles or looking for a garment vendor that suits their needs.Then they find BEELIC as a good reference according to their needs.The interest phase is where customers learn what BEELIC is and how BEELIC can help address their needs.The BEELIC website can offer the latest design catalogue in this phase.Customers can download and keep the customer updated on the latest SME product and other related information.The Evaluate phase is where the user is quite sure of the BEELIC and wants to contact, request proposals, and compare BEELIC with other competitors.The convert phase is where the user has made transactions and become consumers of BEELIC.From the user journey mapping created, the research team found that the BEELIC website can contribute to 3 phases, namely interest, consider, and evaluate, to make the pages needed to design the BEELIC website.

Wireframe
The next stage is to determine the required pages and create a wireframe from each page.Six pages will be created: the homepage, what we do, contact, free sample registration, catalogue design download, and company profile download.The homepage will be an essential page because this page will be the entry point for early visitors to enter the website to get to know and understand what BEELIC has to offer.Therefore, the BEELIC homepage is divided into six sections apart from the header and footer.In section one, the contents of the BEELIC value proposition are supported by an image showing BEELIC as a high-quality vendor, professional and well-made vendor.Section two is filled with a brief about service and BEELIC profile.If visitors want to know more, they can click the provided button.Section three is filled with testimonials from satisfied clients using the services at BEELIC.The goal is to confirm to visitors that BEELIC is indeed worthy and reliable.Section four is filled with buttons that offer visitors to get free sample designs or catalogue designs to show visitors that BEELIC is ready to help and demonstrate its expertise as a quality garment.Section five contains a button to invite interested visitors to contact BEELIC if you want to know more info.The image below shows the wireframe from each page that the research team has compiled.Moreover, every existing section is arranged based on the user journey mapping created.

Applying principle of Design in Prototype
Making a prototype of the BEELIC website homepage is very dominant with a good balance using a vertical axis that divides the page into two parts.Section one section contains information in 3 parts: value proposition, promise and button -get free samples.These three sections are arranged using different sizes for convenience for visitors to digest, read and recognize the information.Then on the right, three slides of images are placed to build an emotional connection between the user and the user of the information they read on the left.Section two, which consists of two parts, is filled with Trigger Media information about a brief introduction to BEELIC and its services.Section two still uses the same method as section one.However, this section is designed to look lighter by using negative space because it contains more information.Then in the section, this is also more visible using a grid divided into four columns for convenience, placing four images to make it more comfortable for users to see.For a visual identity system, BEELIC uses a combination of colors, typography and photo styles that have been determined in previous research to convey a professional, elegant, and well-made impression.The purpose of this system is that when used consistently on every page on the website, unity is built between every existing visual element so that users can easily remember and navigate the BEELIC website easily.

Testing and Evaluation
Making a prototype of the BEELIC website homepage is very dominant with a good balance using a vertical axis that divides the page into two parts.Section one section contains information in 3 parts: value proposition, promise and button -get free samples.These three sections are arranged using different sizes for convenience for visitors to digest, read and recognize the information.Then on the right, three slides of images are placed to build an emotional connection between the user and the user of the information they read on the left.Section two, which consists of two parts, is filled with information about a brief introduction to BEELIC and its services.Section two still uses the same method as section one.However, this section is designed to look lighter by using negative space because it contains more information.Then in the section, this is also more visible using a grid divided into four columns for convenience, placing four images to make it more comfortable for users to see.For a visual identity system, BEELIC uses a combination of colors, typography and photo styles that have been determined in previous research to convey a professional, elegant, and well-made impression.The purpose of this system is that when used consistently on every page on the website, unity is built between every existing visual element so that users can easily remember and navigate the BEELIC website easily.

Conclusion
The research team has conducted tests on three resource persons who need to install a semi-permanent place.First, a family needs to have a detached place for quarantine but still within the house area.The second is a person who needs a place to be converted as SOHO while working from home.The third is a person who needs a place independently as a staycation spot.Furthermore, the last is MSMEs that need pop up stores.
In this test, the reviewers were asked to explore the BEELIC website and perform two tasks: download the design catalogue and register for 12 to get free samples.After browsing the website for the specified time, interviewees were asked what page or service they found challenging and what made it easier to navigate the web.Furthermore, they were also asked to describe their perceptions of BEELIC, the promise offered and the dominant color on the website.The interviewees argued that they could easily download the design catalogue and sign up for a free sample of the interview results.Websites are also relatively straightforward, making it reasonably easy to navigate each page.There are several buttons placed in several locations so that the resource person can quickly get to the determined page.
For the second question, the interviewees considered the BEELIC website clean and straightforward, dominant in blue and green.They describe BEELIC as a company with professional, quality, and unique design with sustainability at heart.