Ultimate pro is a premium version of the MikroTik login hotspot template that is different from the standard hotspot template in general. this template is specially designed for business people or local internet network businesses. equipped with a variety of excellent features, namely being able to display products or services and services on this template with a mobile device friendly display, with an attractive and modern design style. this innovation arises based on the many people who create a paid WIFI network business by utilizing a paid voucher login system.

I built this site using several tools, namely:

• Figma, as a tool for designing website design.
• Javascript, as the programming language that I use on the backend to manage API data and also manipulate the display more reactively.
• Bootstrap version 5, as the css framework that I use for the frontend or appearance of the site.
• Html 5, as the site framework.

MikroTik Hotspot is a feature that allows users to provide internet access to guests in a controlled and secure way. The basic process of MikroTik hotspot login is as follows:

• The user connects to the MikroTik wireless network.
• The user's device is redirected to a login page where they enter their login credentials (username and password).
• The login credentials are verified against a user database on the MikroTik router or a remote RADIUS server.
• If the login is successful, the user is granted access to the internet for a specified amount of time or until the session is manually terminated.

Here's a high-level diagram to explain the process:

• The user device connects to the MikroTik router via WiFi.
• The MikroTik router redirects the user's device to a login page hosted on a webserver.
• The user enters their login credentials on the login page.
• The login credentials are sent to the MikroTik router or a remote RADIUS server for verification.
• If the login is successful, the MikroTik router allows the user's device to access the internet.

Based on my research on the internet, online store and sources from chat.openai.com as follows:

• Unattractive and Unappealing: The standard login page is often plain and unappealing, which can lead to a negative user experience and discourage users from using the hotspot.
• Lack of Customization: The standard login page is limited in its customization options, making it difficult to brand the hotspot and create a cohesive look and feel with the rest of the business.
• The availability of a premium version of the MikroTik login hotspot template with a mobile and contemporary look is difficult to find that aims at business.

The users and audience for this mobile application are WIFI Vocher customers, they will do the login process to access their WIFI internet.

I am the designer and developer for this project, so I do all the design and development work. From icons, illustrations, wireframes, mockups, prototypes and converting designs to lines of code.

There are several steps that I have to do before starting to make this project including:

• Research what data should be presented based on the case study.
• Inspiration design
• Wireframe
• Mockup
• Prototyping
• Testing in real device

I did research on the internet and online stores that sell similar products, studied what they presented and saw the shortcomings of their products, and collected standard and modified MikroTik login hotspot templates to collect the basic needs of the template, then collected and researched other business applications such as today's E-Wallet applications that have many diverse features for various businesses and determined the brand color of the template itself.

This is a source of inspiration for layouts from Ultimate Pro competitors that are relevant to the site you want to build. And I ended up using some of the layout and design approaches from this inspiration.

The sitemap built is quite complex. This site map was created to make it easier to read the entire structure of the template built, especially by myself and even other people to serve as a guide.

The next step is to create a wireframe based on the requirements I have already mentioned

Once I got the design elements and colors from the guidelines, I went straight to the mockup design. And this is the end result