Overview
This case study is a concept redesign of the marketing homepage for online-qr-generator.com, aimed at making it feel like a high-quality B2C SaaS product.
Deliverables
Problem
The existing homepage competed with itself on CTAs, used low-contrast card layouts, and presented product previews that were hard to read. Navigation and mid-page showcase patterns added friction instead of guiding visitors toward creating a QR code.
Research
Visual design & layout (UI)
| Identified issue | Agreed fix & strategy |
|---|---|
| Low background-to-card contrast - Pale mint background makes white cards blend together, creating a flat layout. | Shift to a neutral off-white background (#F8FAFC or solid #FFFFFF). Use crisp 1px borders (#E2E8F0) with soft drop shadows to give cards visual depth and clear separation. |
| Ambiguous navigation icon - Unlabeled speech bubble icon next to Log In causes user confusion. | Remove the icon entirely. Navigation keeps direct, explicit text items (such as FAQ and Log In). |
| Illegible dashboard previews - Hero graphics use low-res screenshots with unreadable tiny text. | Replace screenshots with clean vector/skeleton UI illustrations representing dashboard metrics (customization controls, scan analytics graphs) to keep the focus clean and legible. |
| Typography inconsistency - Centered italicized text and abrupt font scaling break readability. | Establish a strict font hierarchy (bold H1s, semibold H2s, regular 16px body text) and eliminate centered italicized paragraphs. |
Usability & user experience (UX)
| Identified issue | Agreed fix & strategy |
|---|---|
| Unclear interactive showcase - The mid-page vCard example lacks framing or interactive context. | Transform into a tabbed showcase grid (vCard, Website, PDF, Wi-Fi, etc.). Unselect cards by default, explicitly inviting users to click tabs to preview dynamic mockup screens (e.g. smartphone frame for vCards). |
| Redundant CTA repetition - Multiple competing green buttons like Register and Create QR create visual noise. | Standardize on a single primary CTA: Create QR Code. Treat Sign Up / Sign In as simple text links or seamless inline steps after the user clicks to generate. |
| Fragmented FAQ interaction - Dual FAQ sections and mixed “Read more” links create cognitive overload. | Consolidate into one streamlined accordion featuring the top 4 questions, followed by a clear secondary button linking to a dedicated FAQ page (View All FAQs →). |
| Pricing transparency - Unclear dynamic vs. static limits can cause onboarding friction. | Keep explicit pricing tables off the homepage. Instead, add a dedicated Static vs. Dynamic QR Codes comparison section to educate users upfront without distracting from the primary flow. |
Solution
Before
Current homepage hero and product framing on online-qr-generator.com:
After
Redesigned hero with a single primary CTA, clearer hierarchy, and a legible product mockup:
Tabbed QR-type showcase with clearer framing and one primary CTA:
Outcome
- One primary CTA (Create QR Code) across hero and navigation
- Stronger contrast and card separation on a neutral surface
- Tabbed QR-type showcase instead of an unclear mid-page example
- FAQ consolidated into a single accordion pattern
- Static vs. dynamic education without putting a full pricing table on the homepage
Learnings
- Competing Register / Create CTAs dilute the first-viewport job; one primary action reads more clearly for B2C SaaS.
- Hero product imagery fails when screenshots are too small to read - skeleton / vector UI keeps the promise without illegible chrome.
- Educating static vs. dynamic QR capability on the homepage can reduce pricing friction without turning the page into a pricing page.