Hardmin redesign and 30% faster website

A slow website and complex administration can hinder even a well run business. With Hardmin, the problem was twofold: the site loaded slowly and common customizations were so cumbersome that it was almost impossible to move without a developer.

In this case study, I describe how we redesigned the website based on the Figma design, added an e-shop part and built it on WordPress to make it fast and easy to manage.

Project context

• Client: hadmin.com
• Impulse: inquiry came by email, client has already seen my references
• Main objectives:
  • speed up the website (performance and user experience)
  • improve and simplify content management
  • convert the new visual from Figma into a functional website
• My roles: frontend development, WordPress implementation, e-commerce part (WooCommerce), testing, one-off training and launch to production.

How the demand arose and what was bothering the client

I have heard from Mr. Zdeněk Sobek. He was looking for a developer who would take a finished web design and convert it into a fast, functional and sustainable website.

For the original site, he mainly mentioned:

• slow loading (user-unfriendly, marketing-limiting),
• difficult to manage (content was difficult to edit),
• dependence on the developer even for small things.

That’s why we arranged a personal meeting in Ostrava. It was useful mainly to align expectations: what is a “fast website” for the client, what needs to be edited in the administration and where it is better to keep a more rigid structure.

I left with a good feeling. So did the client – and that’s often the best signal that expectations are set realistically.

Figma documents and clarification of scope

After the meeting, the client sent me a link to Figma design. The design contained about 15 unique pages (introduction, landing pages, blog, article detail, contact…).

While browsing Figma, I noticed something important: the website had elements of an e-shop, but the shopping process was not outlined in the design.

I didn’t want the client to find out until halfway through the project. That’s why I pointed out the missing parts to him before we started working together – and we cleared that up right away:

• checkout/basket/login/account is a separate section,
• it needs to be thought out and completed,
• and the scope of the project may increase.

Based on Figma, I prepared a quotation with notes on the scope. The client approved it, we sorted out the contract and deposit and went into development.

Phase 1 – Coding

I start by building a basic “building block” from the design – a design system:

• typography,
• colors,
• spacing,
• repeatable components.

This makes the site consistent, makes it quicker to compose additional pages and easier to maintain later.

I coded the frontend to be ready for smooth conversion to WordPress. Technologically, I went the way I use most often:

• TailwindCSS for fast and consistent stylesheet handling,
• pure JavaScript for interactions,
• PHP templates / components for reusable parts,
• and build process (typically via Grunt for me) for compilation and automation.

I then coded the individual sections and templates to be:

• responsive (mobile / tablet / desktop),
• ready for real content,
• and technically clean for further connection to WordPress.

Once the coding was complete, I uploaded the static version to a test URL and sent it to the client for review.

The first hitch

It came about the moment I sent the finished static version to the client and asked for his feedback. Without it, I didn’t want to proceed to the next stage because it would risk unnecessary rework.

However, the client did not hear from us for several weeks, even after repeated calls. I waited for his response, so the project was temporarily halted.

When he called later (he was out, traveling), a misunderstanding arose. We clarified the situation and moved on. For me, it was a reminder that the success of a website is not just about the code, but also about the process and collaboration on both sides.

Phase 2 – Programming

The next step was to convert the finished frontend to WordPress.

I built the website as a custom theme with an emphasis on:

• simple management without unnecessary clicks,
• long service life of the solution,
• and using the Gutenberg editor as a building block.

I started by setting up theme.json (global styles like colors, typography, spacing). Then I prepared the blocks and sections to match the design and to be able to fold and edit them in the administration.

I gradually watered:

• header (logo, menu, links),
• the footer (contacts, other menus, copyright),
• and individual templates by Figma.

The result is a website where the team can create and edit pages without interfering with the code – and the design doesn’t fall apart.

Completing the shopping process and WooCommerce

During the implementation, the client added suggestions for the shopping cart and shopping process. I then priced and refined this part.

Since the site works with products, I deployed WooCommerce and customized it:

• product templates,
• cart and checkout,
• registration / login,
• user account after logging in.

The goal was clear: a functional e-commerce foundation that fits the design and is sustainable for the long term.

Testing, stability and performance

After the development was finished, debugging and testing came:

• different browsers and devices,
• different scenarios for filling the content,
• checking that the site doesn’t crash with long texts or non-ideal data.

It also included technical tuning in terms of SEO, accessibility and speed.

In terms of performance, I compared the before and after status in PageSpeed Insights. The original site was in the orange values around 60, after the modifications the new site was in the green values of 90+. (I take this as a practical indicator of the “health” of the site, not as the only number in the world.)

Phase 3 – handover, content filling and start-up

Once completed, I created a new demo URL, prepared the accessions and submitted the site for takeover.

This was followed by an online meeting where I:

• he showed the administration,
• explained how pages and sections are composed,
• and trained the team that will manage the site.

The client then added content and products over the next few weeks and together we revised everything. Only then was the new site put into production and the old site backed up.

What the new version of the website has brought

• Faster loading and better user experience
• Simple content management without depending on the developer
• E-shop part built on WooCommerce
• Visual and layout according to the proposed web design

A few weeks of minor questions and adjustments followed the launch. Today, the client’s team manages the website independently – creating new pages, writing articles and adding products.

That’s the key for me: launching a website is not the end. Well-designed administration and a stable foundation are what determine whether the site works in the long run.