Web & Design
Microtool for the Helix Combat Series: a design tool built into the website backend
Case study: How we built a design tool into the Helix Combat Series website backend that lets editors publish fighter, fight and Instagram graphics in seconds. In real time, with dark and light layouts, built with Lovable.
Short answer
For the Helix Combat Series, we extended the existing website with a custom microtool in the backend. Editors create fighter entries, and the system crops images, removes backgrounds and exports portraits, versus graphics and complete fight cards for Instagram at the click of a button. Instead of standard plugins, we use purpose-built microtools that cover precisely the website workflows that site builders and CMS platforms cannot handle. This keeps the website lean and automates day-to-day editorial work.
The challenge: announcements during live operations
For a fight series like the Helix Combat Series, the roster changes constantly. New fighters confirm at short notice, matchups change, sponsors join. And all of it needs to go out immediately: on the website, in the Instagram story, on the fight card.
Traditional design templates quickly become a bottleneck. Our guide to commissioning a corporate design explains how to establish a consistent set of rules for layouts like these. Every change means opening a file, replacing an image, adjusting text, exporting and uploading. With 12 fights at an event and three layout variants per fight (portrait, versus, fight card row), that adds up to dozens of manual steps for every small change. That was exactly what we wanted to move away from.
What we built: a design tool in the website backend
We developed a custom website backend for Helix that brings all the fight-related logic together in one place. Web design tech stack: Webflow, WordPress, Lovable explains why we chose Lovable over WordPress for this. The core elements:
- Fighter database with image, name, nationality, club and fight record. New fighters come straight in from the application forms and are approved by the editors.
- Image pipeline built into the backend: upload a fighter portrait, then click to crop it, remove the background and convert it to the brand's black-and-white style. No Photoshop, no extra steps, no waiting for the design team.
- Central data sources for fighters, fights, events and sponsor logos. Everything is stored in one place and referenced throughout the system.
- Design tool on top: editors select a fight and the tool builds the graphic in real time. An individual portrait, Fight A vs B or a complete fight card with every bout at the event, all available as a print-ready Instagram graphic in one click.
- Dark and light layouts for different event series, giving tournaments a clear visual distinction.
The design tool in action: select a fighter, choose a layout, and the Instagram graphic is ready. No Photoshop, no design back-and-forth.
Kernaussage
Recurring layout tasks go from hours of work to minutes. Anyone who can use the tool can manage an entire event channel on their own.
Why this changes things for the organisers
The real benefit is not the attractive UI, but the time saved and consistency gained. Here is what that looks like day to day:
| Task | Before | With the backend tool |
|---|---|---|
| Announce a new fighter | 20 to 30 minutes of design work | Create a fighter entry, export the graphic: under 2 minutes |
| Export a complete fight card | 2 to 3 hours of manual assembly | One click per layout variant |
| Replace a sponsor logo | Rework every existing graphic individually | Replace it once centrally, and every layout is up to date |
| Last-minute matchup change | Rebuild the graphic, delete the story, repost | Change the fight in the backend, export the layout again |
| Consistency across all channels | Dependent on the designer | Always consistent, because everything uses the same data source |
Real-time data: every graphic is always up to date
The most important effect: the graphics are not static exports, but a live view of the backend data. If a fighter's name, a sponsor or a fight changes, the next version of the graphic automatically reflects it.
One click, a complete fight card: select the event, export, done. No graphic designer, no errors, always generated live from current website data.
In practice, that means:
- A new sponsor joins. Upload the logo in the backend, assign it to the event, done. All future fight cards display it.
- A fight is cancelled at short notice. Deactivate the fight in the backend, export a new fight card, post it to the story.
- A fighter changes clubs. Change one field in the backend, and every portrait shows the current club.
This means editors never have to deal with an old version of a graphic still circulating somewhere after it has become outdated.
Websites with microtools instead of standard site builders
Most website owners eventually realise that a site builder can handle the marketing site, but anything beyond that becomes difficult. Editorial workflows, databases with relationships, recurring graphics tasks, custom configurators. This is exactly where we use microtools: small, specialised web components that connect to the existing website and handle one specific job.
The approach matters: we do not replace the website with a heavyweight web app. We let the website remain a website and add a microtool wherever day-to-day work calls for one. For website owners with complex requirements, this is the pragmatic middle ground between "a site builder is not enough" and "we are rebuilding everything".
Typical microtool applications we build for websites:
- Editorial tools for recurring layout tasks, as with Helix
- Configurators and price calculators that generate quotes directly from customer data (see our own price calculator)
- Booking and scheduling tools with custom logic, connected to a CRM or ticketing system
- Internal dashboards for client areas, protected by a login alongside the public website
- Import and sync tools connecting the website and back-office systems
Kernaussage
Websites with complex requirements rarely need a complete web app. They need a solid website plus one or two microtools in exactly the right places.
Why we build tools like this with Lovable
A microtool like this is exactly why we keep Lovable in our toolkit. Standard CMS platforms such as WordPress or site builders such as Webflow take you a long way with a standard website, but custom data models, editorial workflows and tightly integrated tools quickly make things fiddly or expensive.
With Lovable, we build the backend, database, image pipeline and design tool in one go. Directly connected to the website, without relying on plugins or isolated systems that need synchronising. For micro-apps that work closely with a website, it is currently our preferred choice.
We explain in detail which stack we choose and when in our tech stack comparison: Webflow, WordPress, Lovable.
For us, a website is rarely just a website. When a client has day-to-day editorial work to manage, we build a tool that does exactly what they need, rather than forcing them into standard templates.
Which clients benefit from this
A backend tool like Helix's pays off wherever the same layout task recurs with slight variations. Typical examples:
- Event and tournament organisers with changing line-ups
- Sports leagues with regular matchup announcements
- Media companies with frequent publishing schedules and recurring formats
- Cultural organisations with constantly changing programmes, artists and ensembles
- Education and conference organisers announcing speakers
In all these cases, recurring graphics take up a huge amount of time that a custom tool can reduce to a fraction.
Kernaussage
As soon as you carry out the same graphics task with slight variations more than ten times a year, a custom design tool in the backend is worth considering.
If you would like a rough idea of what a website with additional tools would cost with us, our price calculator gives you an initial estimate. Custom microtools require a separate quote, which we scope carefully with you. We are based in Cologne and work as a web design agency in Cologne with clients across the German-speaking region.
Do you run a website with complex requirements and want a properly built microtool rather than a patchwork of plugins? Tell us about your day-to-day editorial work, and we will show you where automation can help.
Projekt besprechenFrequently asked questions
What is a microtool in a website backend?+
A microtool is a small, specialised web app connected directly to a client's website backend. It handles a specific editorial task that standard CMS platforms cannot properly support, in our case exporting graphics directly from content data.
Why not just use WordPress with a plugin?+
Plugins are built for generic use cases. As soon as the data model is custom, such as fighters, fights and sponsors with relationships between them, every plugin becomes a compromise. A custom backend is more precise, easier to maintain and faster to use day to day.
How long does it take to develop a tool like this?+
For a focused microtool like the Helix design tool, we allow four to eight weeks from designing the data model to going live, depending on the number of layouts and the depth of integration with the website.
How much does a custom backend tool cost?+
Custom backend tools start in the mid-five-figure range. The price depends on the complexity of the data models, the number of layout variants and the connections to existing systems such as the website, CRM or ticketing system.
Does the client retain control of the data?+
Yes. The database, backend and storage are all under the client's control. We build and hand over the system; the client owns the data and retains access even if we are no longer involved in the project.
Can a tool like this connect to an existing website?+
Yes. We connect microtools to existing websites via APIs, whether the site runs on WordPress, Webflow or a custom stack. The website reads data or exports directly from the tool.
Why do you build micro-apps like these with Lovable rather than Webflow?+
Webflow is strong for content websites with demanding design requirements. For tightly integrated micro-apps with custom data models and editorial workflows, Lovable is our preferred choice because we can build the backend, database and UI in one go, without plugin limitations.
What is the difference between a website with a microtool and a web app?+
A web app typically replaces the website and becomes the central application. A website with a microtool keeps the website as a marketing and content platform, adding a specialised tool in a specific area to handle exactly one workflow. For most website owners, the microtool approach is leaner, more affordable and easier to maintain.
Which websites benefit from a custom microtool?+
Websites with recurring editorial workflows, custom data models or configurators that standard plugins cannot properly support. Typical examples include event organisers, sports leagues, cultural organisations, media companies and medium-sized businesses with custom quoting or booking processes.
How much does a custom website with a microtool cost?+
Our websites start in the low-to-mid-five-figure range, depending on scope and the level of design work. A custom microtool adds a mid-five-figure amount, depending on the data model and depth of integration. Our price calculator at /preisrechner provides an initial estimate for the website.
#Microtool#Custom Website#Custom Backend#Case Study#Lovable
Author
Josef KujawskiManaging Director & Creative Director at Maluure
Josef leads the strategic and creative development of brands at Maluure. For over a decade, he has guided medium-sized businesses from brand positioning to digital delivery.
Managing Director of Maluure GmbH, Cologne. Specialising in corporate design, brand strategy and digital brand experiences.
Weiterlesen
Web & Design
Website Maintenance: Costs, Services and Why It Pays Off
Updates, backups, security: what website maintenance costs, what should be included, and when you can handle it yourself.
2 min read
Web & Design
WordPress Agency Cologne: When WordPress Fits and When It Doesn't
We support WordPress websites in Cologne, but we don't always recommend WordPress. Here's an honest look at when it fits and when other systems are better.
2 min read
Branding
Packaging Design Agency: What to Look for When Choosing One
From die-cut to print approval: how to recognize a good packaging design agency and what you should budget for in terms of price.
2 min read
Explore more blog topics
Web & Design
Getting an Online Shop Built: Costs, Systems, and Process
From Shopify to Webflow: which systems exist, what a professional online shop costs, and how to get from concept to first sale.
2 min read
Branding
3D Animation for Businesses: Uses, Process, and Costs
3D animation shows what cameras can't: internal workings, processes, prototypes. What it costs, when it pays off, and how production works.
6 min read
Web & Design
Getting a Landing Page Built: Costs, Structure, and What Matters
One page, one goal: what makes a good landing page, what it costs, and how it works together with Google Ads and SEO.
3 min read