Maha Auto Gallery Website

The Client — Motorbike and car rental company in Bali.

Maha Auto Gallery is an innovative startup company in the transportation sector based in Bali, Indonesia. This company provides complete rental services with driver plus fuel or hand over the keys directly to the customer. This company is managed by young people with enthusiasm to provide the best service in motorbike and car rental to meet all the needs of its customers while on holiday in Bali. They want to present the impression of a rental service that is more trendy but still professional.

Role & Responsibility — Self-employed, responsible for the entire project.

This is a real freelance project for Maha Auto Gallery as my client. This project took four days to complete. The deliverables for this project are design and live website. I worked on this project as a self-employed who handled the entire project from scratch to live. So my role and responsibilities are:

1. Project Manager

This project is solo freelance work, which means I also act as a project manager who interacts directly with the client. My responsibilities include scheduling meetings, collecting requirements, handling invoices, project tracking in this case I use Notion, and delivering the final result to the client.

2. UI/UX Designer

As a designer, I used Figma as the main tool for designing on this project. I handle everything related to design from doing mini-research, creating sitemaps, mockups, and asset documentation for the development stage.

3. Website Developer

I developed the website for this project using WordPress with Elementor builder. My job is to turn designs from pixels in Figma into real websites that can be accessed directly on the internet. I also set up hosting plus domain, data entry, and compressing assets.

The Problem — Not having a website.

I discovered their problems through an interview session with the founder. Our interview was conducted offline at a cafe. From the interview results, their main problem was not having a website. Some things that happen as a result of this are:

1. Losing the trust of potential customers

Before this project started, Maha Auto Gallery only used Instagram as its online presence. The founder told me that the case that often happens is the client contacts the company, then asks for the website to see services and catalogs, and when the client finds out the company doesn’t have a website, most of them will disappear. Most foreigners have such cases. This means that a website plays an important role in increasing trust.

2. Advertising not optimal

It’s not easy to advertise via Instagram if a case like the previous point occurs. Before this project started, the company already had Google My Business but was not yet connected to a website. By creating a website, the company can advertise its business on Google and become more powerful.

3. Low brand awareness

If you only use Instagram to increase brand awareness, the scope of opportunities will be smaller, only reaching people who actively use the platform. By having a website you can reach wider opportunities.

The Challenges — No brand book and references.

1. The company doesn’t have a clear brand book yet. The company only gave me the logo in jpg format. I was struggling to decide what would be appropriate for color palettes, fonts, styles, and so on. So I have to think about that.
2. The client didn’t really have a preference for the style they would like to go with. They also don’t have any similar websites that they want to use as a reference. I need to collect some references to clarify the general picture.

The Goals — Create a website to maximize business.

These are the goals the founder wanted to achieve by creating a new website for his business:

1. Displaying services and vehicle catalog

The website can display a complete list of motorbikes and cars for rent along with clear related information. So potential customers have more confidence and don’t feel hesitant about renting.

2. Easy and fast booking

For the ordering process, the founder wants everything to be as easy and quick as possible for both potential customers and the admin in charge. A fast ordering system will also be useful during advertising.

3. Increase brand awareness

Having a new website can increase brand awareness. The website created must be able to represent the company’s branding. This website can reach a wider audience and make it easier for people to find Maha Auto Gallery on the internet.

Research & Analysis — Searching info and setting up design principles.

The User

This website is planned to be used by people in Bali for holidays or other activities requiring motorbike or car rental services. These people are mostly tourists both foreign and domestic. Based on the founder’s experience in handling clients, several things concern them. Easy, fast booking, and mobile-first. Most of them communicate using English, but some use Indonesian.

Booking Flow

Because the founder aims to have easy and fast booking on his new website, I conducted an analysis of competitors and offered several suggestions as solutions to the booking process.

From the solution above, the founder agreed to go directly to WhatsApp with the vehicle name automatically because he thought it was suitable for his company’s current condition. The company only has a few people to respond to clients, they have high mobility so they think using WhatsApp is the most effective and efficient method. The founder wants to interact with clients as quickly as possible without filling out any forms. The admin can also easily confirm if clients require custom services.

Design Principles

The main goal of users of this website is to order motorbike or car rental services easily and quickly. How can I make this website as good as possible, increasing brand awareness, suitable for advertising, without forgetting the main goal?

1. The website must be clear — The website can display services, catalogs, and related information clearly. The clients must know which ones to click to make a booking.
2. The website adapts branding — To increase brand awareness, the website is custom-designed using the branding used by the company on Instagram.
3. The website must be ad-friendly — The website is well structured for advertising needs, in terms of content arrangement, layout, responsiveness, speed, and more.

Design Process — Visualizing client expectations into pixels.

I had to skip several design steps because the time was tight. The client wanted things fast and didn’t have time to create detailed content. He was fine at understanding the design just by looking at the mockup, so I skipped the wireframing and prototyping steps.

Sitemap

The Client likes a simple and fast website without too much content. So, I suggested making a one-page website, and he agreed. Even though it’s a simple site, I decided to create a sitemap to help everyone understand the project better, including me and the client. The sitemap makes it easier to figure out the project’s size, time, and cost. I created a structure for the page but the client gave me several revisions.

Mood Board

Because the client didn’t have a brand book and appropriate references, I decided to create a mood board as an initial reference in creating a design concept. The client wanted a modern design style with a dark theme. The client only provided me with the company logo. To get a deeper picture, I took the initiative to explore the company’s Instagram feed.

I got inspiration from the company’s Instagram for the design. I used the logo colors and added some variations. Since there was no specific font, I picked one similar to the logo. I’ll create a clean layout based on their Instagram graphics. I used several websites with the same business for content structure reference and the rest from Dribbble and Behance for style.

Mockup

At this mockup stage, there are several things I need to pay attention to

1. The client doesn’t have copywriting for the website yet. So I only provided a few copies of certain parts and left the rest to use dummy text.
2. The client hasn’t provided pictures or videos. So for now I’m using free stock photos or videos for both personal and commercial use that I found on Pexels and Unsplash.
3. The font I chose was Work Sans and the client agreed because it was similar to the logo and free to use for personal and commercial use from Google Fonts.
4. Because this website uses a dark theme, I have to avoid pure black and white to get better contrast and readability.

I tried to apply the structure of the sitemap, an overview of the design concept from the mood board, and several things above so this is the initial design that I showed to the client.

The client had several revisions to this mockup design. First, remove the two anchor link buttons in the hero section. Removing the buttons aims to make the video in the background more visible and the client wants visitors to be able to see all the cars and motorbikes they own before ordering.

Second, revise the testimonials section. The client wants to move the customer image above the testimonial text in a larger size. This change aims to make testimonials more reliable because visitors can see images more easily and clearly. The client wanted to keep the circle shape so that the image looked more dynamic and friendly.

Final Design

After implementing all the input and revisions from the client, the final design was finally completed. Then the next step is the development process. But before that, I need to prepare the assets that will be used. I renamed and compressed the assets to make them more appropriate to support website performance in SEO and loading speed.

In designing this website, I made some design decisions. I took all these decisions to reach the website’s goals as best as possible by adapting to all the limitations in the project.

1. Adding a booking button to the navigation bar

Because people visit this website to make a booking, I want visitors to easily find a way to do that. By adding a booking button to the navigation bar, visitors will always find the button at the top right no matter which section they are in.

2. Adding a CTA in the footer

Since this website is only one page, the footer doesn’t have too much information. There, I added related information for contacting the company such as email, phone, address, and operating hours. Additionally, I also included some social media links. By adding a CTA there, my aim is to remind visitors to take action after exploring the website. I also included images to enhance the visual appeal of this section.

3. Sorting vehicles and information

For sorting vehicles, I display the car section first and then the motorbike section. This is because the founder wants to highlight cars since they can bring in higher profits compared to motorbikes. For each car and motorbike section, they are sorted based on type starting from the most frequently ordered by their customers. Details of each vehicle are arranged based on what customers want to know the most, starting from price, image, name, than other info.

Development — Turning design from Figma to a live website.

Set up domain & hosting

This is my client’s first website, so he doesn’t have hosting and a domain yet. He trusted me to set up hosting and domain from scratch. I used the domain he wanted, which is mahaautogallery.id and luckily it was available. I also activated SSL encryption for website security.

Development & data entry

After setting up the hosting and domain successfully, I began developing the website. I chose to use WordPress as the CMS along with Elementor as its page builder. In my opinion, combining WordPress and Elementor is the perfect solution for quickly creating websites. It is very easy to customize according to our needs, so there is a high chance of being able to create a website exactly like the design. This also makes it easier for the client in the future because he can make his own changes easily.

In the development process, some parts require a little custom code, especially on the booking button on each vehicle. When a customer clicks on the booking button on a particular vehicle, it will automatically direct a message to the admin WhatsApp with the message asking whether the name of the vehicle is available or not in Indonesian.

Next I need to enter all the content and data from the client into the website. At the beginning I recommended using content in English, but the founder had another strategy. He wants to use Indonesian in several sections such as the about section and booking messages from customers to the admin.

Testing & bug checking

Before delivering the website to the client, I have to make sure the website works well and bug free. The testing I did at this stage was very simple and fast. I just need to pay attention to the things that are at the core of the website and make sure everything runs smoothly.

1. Check whether the website matches the mockup design that was previously approved by the Founder on Figma.
2. Open the website on various devices to ensure the website is responsive and displays well on all devices, desktop, tablet, and mobile.
3. Check website compatibility by opening it in different browsers and OS such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge on iOS, Android, Windows, and MacOS devices.
4. Try all the functions on the website and make sure everything works well, especially the booking button must convey the correct message to the admin WhatsApp.
5. Check website navigation so users can easily find the information they are looking for. Make sure that links and menus lead to the correct section or function.
6. Checking the loading speed of website pages. Ensure the website can load quickly and takes no more than two seconds.
7. Ensure all content is correct as provided by the client. Review the content on each page to ensure that everything is free of spelling or grammatical errors.
8. Ensure website security by activating SSL encryption and updating the WordPress version, theme, and plugins used.

Impact & Results — The founder is happy, more bookings from the website.

Overall my client was satisfied with the results of this project. About two months after this website was launched, I contacted the client again to ask how the performance of the website was. The founder said there had been quite a lot of improvement, although he did not provide exact numbers.

1. The founder said bookings have increased. He asked his customers and found out some of them came from Google searches, Instagram, passing by on the way to the office, and recommendations from previous customers. Most of them, when asked about the website, said they already knew about it and had opened the website first before making a booking. This means that the website has started to play a role in increasing the trust and potential of new customers.
2. To increase brand awareness, the website link has been added to the company’s Instagram bio profile. Apart from that, the company has also published some content related to launching a new website and how to order from there. On the SERP, the website appears properly, it only needs to be connected to the company’s Google Business account so that branding becomes linear.
3. Website loading speed is good and takes no more than two seconds on both desktop and mobile. For speed scores, the website has also received a good score. For SEO, I only set up the basics because the client doesn’t take optimization services. However, that is enough because the website is already well indexed on Google.

” The website met my expectations! Setyo did an amazing job with our rental website, Maha Auto Gallery. It works perfectly, fits our branding, and has increased bookings. I highly recommend Setyo to anyone who needs a great website! “

Dede Kresna — Founder of Maha Auto Gallery

Personal Learning — Adaptation, research, focus, and ego control are the keys.

Being a freelancer on this project I have more complex responsibilities than usual. This requires me to learn and explore this project to make improvements to the next project. There are several points that I have learned to always push my work better and better.

1. Be flexible and adaptable

Handling this project as a solo freelancer I need to be more flexible and adaptable to existing cases. Every case in a project is not always the same, most will be different. The stages required in a project are not always linear, sometimes there are stages that we can skip and are often messy. Here I took on several roles in one project, making me learn how to adapt from a managerial and technical perspective. In fact, I also have to adapt to being a marketing person to sell my services to clients. In the future, I have to learn to be more flexible and adaptive to respond to different project problems with suitable solutions within a limited time.

2. Little research is better than none at all

In this case, the client did not have a clear brandbook and references so it required me to take the initiative to do simple research. In this project, I learned to do research to determine design style, users, and analyze competitors to find options for the booking solution that I will offer. By doing this research I found some options that can be used, what their pros and cons are, so the client can easily decide which solution to choose. Without doing research, everything will end up just guessing and it may not suit the client’s condition.

3. Setting up design principles is important

On a website, we can actually maximize various things to support a business. However, we cannot maximize everything at one time. I have to remember the main goal of users of this website is to book motorbike or car rental services easily and quickly. By setting up principles, I can set limits on how to fulfill the goals the founder wants to achieve with this website without forgetting the main goal of users to book a rental service. Remembering the main work to be done and setting up principles early in the process helps me focus on the problem and not stray too far from there.

4. Listen to the client

This project taught me to lower my personal ego and listen to the client. Even though sometimes a client comes with strange ideas and choices, we must still listen to the client first. In a project I can’t look at just one side, I have to look more broadly from the technical, business, social, and other sides. I learned that when the client gives different views we have to discuss it. When there is a wrong view, I need to provide the best suggestions and understanding. Always accept and consider feedback from all sides for improvement. Not using my own ego, remembering this is a client project, not my personal one.