Dev

Case Study: How Building an HTML-First Site Doubled User Numbers

A utility company, after a React form failure, doubled its users overnight by switching to an HTML-first site using Astro.

4 min read Reviewed & edited by the SINGULISM Editorial Team

Case Study: How Building an HTML-First Site Doubled User Numbers
Photo by Ilya Pavlov on Unsplash

A case has been reported of a public utility company that was forced to remove its React-based single-page application just three days after launch, only to later rebuild it as an HTML-first site using Astro and see its user numbers double overnight. This example clearly demonstrates the dangers of excessive JavaScript dependency and the practical value of robust, HTML-based design.

Background of the Problem

The client was a regulated public utility company, subject to hefty fines if customer satisfaction fell below 96%. For service applications, they forced users to choose between an old ASP form or more costly manual procedures. Improving digitalization was urgent, and two previous expensive redesign projects had already failed.

In the most recent attempt, an overseas contractor built a React application. Within three days of going live, the app was flooded with customer complaints and immediately taken down. The root of the problem lay in the application’s design itself.

Problems with the React App

After the author took over the project, he found the React app riddled with technical flaws. Loading spinners and global JavaScript state management were overused, and accessibility was not considered. The most critical issue was that, for a form requiring image uploads, it tried to store all form data and images in localStorage. However, localStorage has a 5 MB limit, which is quickly reached for any practical form containing image data.

With this design, it was obvious that data loss or inoperability would occur when users had poor browser environments or network conditions.

Shift to HTML-First

The author decided to adopt Astro and build an HTML-first site from scratch. JavaScript was used only in the form of Web Components, to progressively enhance a site that worked completely without JavaScript.

The underlying principles of the design were: this is a public service, it must work on any machine, it must function even with poor connections, and form data once entered must never be lost. To meet these requirements, a robust HTML-based design was essential.

The Philosophy of Public Service

The author says he was strongly influenced by a story Terence Eden told about a London housing benefits office. A woman in the waiting room was holding a PlayStation Portable, not playing a game but browsing the GOV.UK housing benefits page. The PSP’s web browser was extremely limited, but because GOV.UK was built with simple HTML, she could access the information.

This public service ideal of “usable by everyone” defined the design philosophy of this project. The form had to work on everything from the latest smartphones to decade-old low-end devices and unreliable mobile connections.

Derived Requirements

Concrete requirements included assigning a unique ID to each session and implementing a mechanism to reliably save data at every step of the form. The HTML-first approach made it possible to proceed with the form and persist data even with JavaScript disabled.

As a result, after the site relaunch, the number of users doubled overnight. The dropouts caused by the React app’s inoperability and data loss were eliminated, allowing users in all environments to complete the process without stress — likely fueling this rapid growth.

Editorial Opinion

Short-term impact: This case highlights once again the risks of over-adopting frontend frameworks. Especially for highly public services or products that must accommodate diverse user environments, a rethinking of SPA supremacy is likely. In existing React/Angular/Vue projects, the editorial team expects a gradual shift toward HTML-first principles and increased use of SSR/SSG.

Long-term perspective: The spread of lightweight tools like Web Components and Astro will lead to a reevaluation of progressive enhancement. Over a span of one to three years, the robustness of framework-agnostic HTML could be recognized as directly impacting user acquisition costs and maintenance expenses. It also aligns with the trend toward stricter accessibility and performance regulations.

Question from the editor: The fact that a React app was pulled after just three days forces a fundamental question: how much are we considering the diversity of user environments when selecting technology? Can your own product pass the “does it work on a PSP?” test? It seems the time has come to re-evaluate the HTML-first approach — not as a mere trend, but as a foundation for a sustainable web.

Reference

Frequently Asked Questions

What exactly is the HTML-first approach?
It's a design method that bases everything on HTML, using JavaScript only for additional enhancements. Core functions such as form submission and data persistence work completely even without JavaScript. Typical implementations use Astro and Web Components.
What were the main causes of the React failure in this case?
The main causes include trying to store form data (including image uploads) in localStorage (which has a 5 MB limit), complexity from loading spinners and global state management, and lack of accessibility. The critical mistake was not considering users' diverse browser environments and network conditions.
What factors likely contributed to the doubling of users?
The elimination of form inoperability and data loss, plus the fact that the form now works reliably even on low-end devices and poor connections, likely attracted user segments that previously could not access it. This demonstrates the effectiveness of HTML-first design for public services.
Source: Lobsters

Comments

← Back to Home