Next case study
ezRSVP
A wedding RSVP SaaS — one link per family, every RSVP counted.
04 — UI/UX assessment for Rightmo
QR GeneratorShow the code first.
A 48-hour UI/UX engineer assessment for Rightmo: a redesign of a QR code generator’s homepage and the Step 2 editor of its PDF QR flow, built on a token-driven design system in Figma.
View design file ↗- My role
- UX audit, UI design, design system
- Timeframe
- 48 hours
- Scope
- Homepage + PDF QR flow, Step 2
- Platforms
- Desktop 1440 · mobile 390
online-qr-generator.com
- Brief to handoff
- 48 h
- Component sets
- 43
- Line icons
- 64
- Upload states designed
- 5
The brief
The product worked, but it asked for effort before it showed any value.
The live homepage promised “We make QR codes easy” without showing a single code. Styling sat a step away from content, so people couldn’t judge the result while they typed, and Step 2 was one long form where required and optional fields looked the same.
The task was to redesign the homepage and Step 2 of the PDF QR flow at 1440, keeping the product’s structure and content. I audited the live product first, then added 390 mobile layouts on top of the brief.
The flow
One example, from hero to editor
What the hero collects is never asked for again: Step 2 opens with the content filled in.
- 01
Hero
Paste a link and generate, or jump to PDF, vCard, Wi-Fi or menu codes.
- 02
Choose type
Every QR type as a visual card, led by Website/URL.
- 03
Content & design
A split editor with a live preview pinned beside the form.
- 04
Export
Download PNG, SVG or EPS, or save it to track scans.
01 — Homepage
Show the result, not the promise
The hero takes a link in one field and shows the finished code on a phone, with cards for scans this week, editing after printing, logo and colours, and print-ready files.
- One field and one filled “Generate QR code” above the fold
- Free forever, no sign-up and file formats stated up front
- Three hero versions explored; the final one shows the result
online-qr-generator.com
02 — Step 2 editor
A split workspace with a live preview
Inputs sit on the left and a sticky preview on the right, so every change shows at once. Fields are grouped into four numbered accordions, with optional settings collapsed and marked.
- Document · Landing page branding · QR design · Settings
- Collapsed accordions show a summary and a status badge
- Switch between the landing page and the styled QR card
online-qr-generator.com/create/pdf
03 — Homepage sections
Each section answers the next question
Below the hero: how it works, QR types, a features bento, use cases, pricing with one recommended plan, then the FAQ.
- QR types led by Website/URL, plus “And 11 more”
- Monthly/yearly pricing with one “Most popular” plan
- FAQ and footer keep the live site’s support content
online-qr-generator.com/#features
Mobile
Designed for 390 as well
Mobile wasn’t required by the brief. I added the homepage and Step 2 at 390, with their own type scale.
Homepage
The same hero, stacked: one field, one button, the result below.
Step 2 editor
The accordions stack, with the preview one tap away.
Design system
Tokens first, so one change updates every screen
Every frame is built from variables, styles and components, with Auto Layout and semantic layer names such as Step2/LeftPanel/Accordion-Branding.
- Colour
- Primitive ramps and semantic tokens, plus a landing/* set that keeps the customer’s brand apart
- Spacing
- 8 px scale; radius from none to full
- Type
- Plus Jakarta Sans, desktop and mobile collections
- Components
- 43 component sets and 64 line icons
- Effects
- Shadows XS–LG and focus rings
Upload states, all designed
- Default
- Drag-over
- Uploading
- Success
- Error
Accessibility & next steps
Built to be accessible, honest about what’s untested
- Focus
Visible focus
Default and error focus rings on every interactive component.
- Errors
Errors in words
Visible labels and helper text; errors never rely on colour alone.
- Selection
Not by colour alone
Selected swatches get a ring, a white gap and a check mark.
- Targets
40–48 px controls
Buttons and toggles sized for easy use on desktop.
- Testing
A plan to validate
Five to eight moderated sessions per page, then an A/B test of the hero.
- Metrics
What to measure
Time to first code, Step 2 completion and upload errors.
Read case study →
06 — Let’s talk
Hiring, or have something to build?Let’s talk.
I’m open to full-time frontend roles and freelance projects. Tell me what you’re working on and I’ll get back to you soon.