Muslimadani Online Store Redesign - Process and Results

Have you ever felt frustrated by your own website’s performance?

That is exactly what the team at Muslimadani.id felt. They are an online brand selling men’s Muslim clothing, and they were struggling with slow loading speed, especially when customers tried to click the add-to-cart button on product pages. That kind of friction clearly reduced their online sales conversion rate.

After contacting several vendors, they eventually decided to work with us at Harun Studio. A long discussion through WhatsApp and phone calls helped me understand how deep the problems really were.

I started with a technical audit and found several main causes behind the store’s slow speed. With that understanding, I designed a strategy to improve the loading performance.

Long story short, after several optimization steps were implemented, the results started to show. The website became significantly faster, and that created a much better experience for Muslimadani.id customers.

Their satisfaction with those early results opened the door to a broader discussion about other improvements, including SEO, conversion rate, and more.

I then carried out a more comprehensive audit of their online store and found that there was still a lot of room to improve.

Based on that audit, Muslimadani.id decided to take a bigger step: a full website redesign focused on performance and conversion.

This transformation involved several strategic steps, including choosing a lighter and more responsive theme, converting from Elementor to Blocks, reducing unnecessary plugins, and migrating the hosting to a more reliable VPS managed by Harun Studio. Each step was handled carefully to make sure the user experience improved and conversion potential increased.

The result? A website that is faster, more responsive, and much more ready to serve Muslimadani.id customers. This redesign was not only about a new visual look. It was about creating a better shopping experience that could support the growth of the business.

Problem Identification: How I Uncovered the Bottlenecks in the Previous Muslimadani.id Store

Why did Muslimadani.id agree to start a redesign project? They wanted to use channels like Google Ads, Facebook, and Instagram to attract more traffic to their online store.

However, I explained that if the store design was not focused on sales conversion, then the ad campaigns would not work effectively to turn that traffic into buyers.

Because of that, I started with a complete audit of the site. I reviewed every important page, from the homepage, shop page, and product pages to the cart and checkout. I also analyzed the content and identified solutions for each problem I found.

Of course, I cannot include the entire audit report inside this case study. So let us focus on one important example: the desktop product page audit.

After a deeper review, I found at least seven major problems in the previous product page design:

1. The “Add to Cart” button, together with the “Choose Color” and “Choose Size” options, was placed below the product description instead of near the top where users generally expect it. That can reduce sales conversion.

2. Variant selection required customers to click a “Choose an option” dropdown first just to see available colors and sizes.

3. Color variants were shown only as text, without actual color swatches or supporting visuals. For example, users could struggle to distinguish maroon from dark red just by reading the labels.

4. The product description used a font color that was not clear enough, looked less tidy, and was too long. Ideally, part of it should be collapsed to make the layout easier to scan.

5. Product information lacked supporting labels such as whether the item was new, discounted, trending, or a best seller. Those details often help customers make a purchase decision.

6. There was no trust-building information such as shipping support, cash on delivery, nationwide delivery, free size exchange, or refund guarantees.

7. There was no “Secure Transaction” information near the add-to-cart button to help customers feel more confident about ordering.

And here is what the product page looked like after the redesign:

Can you see the difference?

• Did you notice the left and right arrows on the product image and the visible product gallery beside the main image?

• Did you also notice the “Add to Shopping Bag” button, which feels more suitable than “Add to Cart”, and how it stands out as one of the most prominent elements on the page, aside from the WhatsApp button?

• And the short stock information that I customized with messages like “Hurry, only 2 left in stock!” when stock drops below 5, or “Only 1 left for this variant. Order now before someone else does.” when just one item remains?

I also made sure to preserve the brand colors and typography that they had already used across their social media channels and apply them consistently across the website. That helped maintain brand consistency and created a more cohesive experience for customers.

Rebuilding the Theme with Speed as the Priority

Using GeneratePress and GenerateBlocks

To achieve the best possible performance, I decided to convert the website from a ThemeForest theme and the Elementor page builder to GeneratePress combined with GenerateBlocks.

GeneratePress is a lightweight and fast WordPress theme, while GenerateBlocks offers design flexibility without sacrificing speed. The designs that were previously prepared in Figma were rebuilt into their WooCommerce site using this combination. The result was a website that looked strong visually while also being responsive and fast.

Custom Code Work

To support Muslimadani.id’s specific needs, I wrote more than 1,000 lines of custom code. This covered features such as clothing size information on product cards, custom pricing on product pages, and various other elements that supported a better shopping experience.

Moving the Website from Niagahoster Shared Hosting to a SpeedyPage VPS

To make sure the website could perform at its best and handle higher traffic more smoothly, I migrated the hosting from Niagahoster shared hosting to a SpeedyPage VPS with the following specs:

• AMD Ryzen 7900
• DDR5 memory
• NVMe storage
• Singapore server location

I optimized the VPS using a LEMP stack: Linux, Nginx, MySQL, and PHP. With the right server configuration, I was able to maximize WooCommerce performance and make sure the Muslimadani.id website stayed fast and stable.

Why Move to a VPS?

There are many reasons beyond the fact that all of our maintenance clients are placed on high-performance VPS hosting, but speaking specifically about speed, the main impact is on TTFB.

Previously, Muslimadani.id was running on shared hosting with the usual limitations. Shared hosting means the server resources are shared with many other websites, and that often leads to slower Time to First Byte. TTFB is the time it takes for the browser to receive the first byte from the server after making a request.

Slow TTFB can affect several important performance metrics, including:

• First Contentful Paint (FCP): how quickly the first visible content appears
• Largest Contentful Paint (LCP): how quickly the largest element appears
• Total Blocking Time (TBT): how long users cannot interact because JavaScript or CSS is blocking the page
• Cumulative Layout Shift (CLS): how stable the layout stays while the page loads

By moving to a VPS, we gave Muslimadani.id dedicated resources. That significantly reduced TTFB and improved overall site performance. The result was a faster and more responsive user experience, which can ultimately improve conversion rate and customer satisfaction.

Conclusion: A Successful Transformation

With the conversion from Elementor to GeneratePress and GenerateBlocks, plus a redesign that was more buyer-friendly, Muslimadani.id successfully improved overall website speed and user experience.

Better speed does not only improve the browsing experience. It also has a direct positive impact on conversion.

Customers can now explore products and complete purchases more quickly and easily, which ultimately improves satisfaction and loyalty.

Short FAQ About Online Store Performance

When is loading optimization enough without a full redesign?
If your online store structure is still relevant but feels slow because of plugin bottlenecks, cache issues, images, or server limits, it is often enough to start with targeted performance optimization first.

When is it better to continue with blocks conversion or a redesign?
If the website is still using a heavy builder, the content structure has become messy, or the UX and conversion needs have changed significantly, a move to blocks or a more complete redesign is usually more effective.

If you want to discuss the right next step for your store, you can schedule a free consultation.