Back to work Case study

Website Design & Development

A free, no-signup QR code generator for Malaysian small businesses, redesigned from a stock component look into its own brand.

Role
Design & development
Year
2026
Type
Live product
Languages
English · Bahasa Melayu
Stack
Nuxt 3 · Vue 3 · Pinia · Tailwind CSS · qrcode · libphonenumber-js · Netlify · Claude Code
QR Laju homepage: navy hero with the headline “Generate QR Codes. Instantly, for Free.” above the generator tabs

Most free QR generators ask you to sign up, hide the download behind a paywall, or quietly expire the code later. QR Laju does one job: type a link or a number, get a PNG, done. Nothing is stored.

01The brief

A QR code in seconds, with no strings attached.

Small business owners here print QR codes on menus, banners and name cards. They mostly need three things: a link to their website, a phone number to call, or a WhatsApp chat to open. They don’t need an account, analytics or a subscription to do that.

So the rules were simple. The generator runs entirely in the browser, nothing is saved on a server, there is no signup, and the result is a plain PNG you can send straight to the printer. The whole interface is available in English and Bahasa Melayu.

3
QR types: link, phone, WhatsApp
2
languages, switchable anytime
0
accounts needed
02Redesign

From a component library to a brand.

The first version was built quickly on Vuetify. It worked, but it looked like any admin panel: a purple gradient bar, stock Material inputs and three buttons of different colours competing for attention. Nothing about it said “fast” or “free”, which are the two reasons anyone would pick it.

For v2 I removed Vuetify completely and rebuilt the UI in Tailwind CSS with a custom theme. The page now opens on a dark navy hero with the promise in the headline, and the generator sits in a single white card right below it, with one orange button.

v1 · Vuetify
First version of QR Laju with a purple header and stock Material form fields, shown on laptop and phone
v2 · live
Redesigned QR Laju homepage with a navy hero and orange accents

Same generator underneath. v2 leads with the promise, then gets out of the way.

  1. 01

    One primary action

    v1 showed Generate, Download and Reset side by side in three colours. v2 has one orange Generate button; Download only appears once there is something to download, directly under the QR.

  2. 02

    Tabs instead of guessing

    Link, phone and WhatsApp each get their own tab with the right fields, so a phone QR never asks for a URL.

  3. 03

    The promise up front

    “Forever free · No signup required” sits above the headline, because that is the question people arrive with.

03Visual system

Navy, cream and one loud orange.

  • Navy#071224 · Hero, footer
  • Navy dark#040C18 · Depth
  • Cream#F2EDE4 · Content bands
  • Cream dark#EBE5DA · Alt band
  • Orange#F97316 · Brand, CTA
  • Orange hover#EA6C10 · Pressed
DisplayPlus Jakarta Sans 800Instantly, for Free.
BodyPlus Jakarta Sans 400Create custom QR codes for websites, phone numbers, and WhatsApp.

The palette lives in the Tailwind config as three named colours, so the markup reads bg-navy, bg-cream and text-accent instead of raw hex values. Orange is kept for the brand bar, the headline’s second line and the one button that matters.

One typeface does all the work. Plus Jakarta Sans at extra-bold, with tight tracking, gives the headline weight; the same family at regular weight keeps the form calm and easy to read.

Six feature cards on a cream background: Forever Free, Long URL Support, Add Logo, Mobile Responsive, PNG Download, Fast Generation

Below the fold the page switches to cream, so the navy hero and the generator stay the focus.

04Details

Small fixes that make a code actually scan.

A QR generator is easy to build and easy to get subtly wrong. Most of the work after launch was in details people only notice when they fail, usually in front of a printer or a customer’s phone.

  1. 01

    Built to survive a logo

    Codes use the highest error-correction level, so a logo can sit in the middle at about 20% of the size, on a white pad, and the code still reads.

  2. 02

    Room to breathe

    Some phones failed to read codes that sat too close to the image edge. I added a wider quiet zone around every code.

  3. 03

    Caption in the file

    The optional caption is drawn onto the canvas, so it’s part of the downloaded PNG and prints with the code.

  4. 04

    Forgiving inputs

    Links work with or without https://. Phone numbers are validated per country with libphonenumber-js, and WhatsApp messages are capped at 140 characters to keep the code dense enough to scan.

Bahasa Melayu, not an afterthought

Every string lives in one Pinia store as an English and a Malay version, and the language switch re-renders the whole page in place, including labels, hints and error messages.

QR Laju homepage in Bahasa Melayu: “Jana Kod QR. Serta-merta, Percuma.”

The same page in Bahasa Melayu.

05Mobile

Generate, then land on the result.

On a phone the form and the preview stack, so the QR used to appear somewhere below the fold without any sign that anything happened. Now the page scrolls to the preview as soon as you tap Generate, and the Download button sits right under the code. The tab labels become icons so all three fit in one row.

06Outcome

A small tool that stays small.

1
orange button to press
0
data stored for the free generator
2
languages, one store

QR Laju runs on its own domain with a sitemap and analytics, and the redesign turned it from a demo into something that looks worth trusting with your shop’s menu.

Next up is an optional account for people who want saved, editable QR codes they can repoint after printing. The free generator stays exactly as it is: no signup, nothing stored.