Turning PDF QR Setup from Guesswork into Flow

Overview

This case study is a UX redesign of the PDF QR type flow on online-qr-generator.com. The focus was making QR creation clearer, smoother, and more seamless while keeping the same core content and functionality.

To reach the page: create an account → Step 1 of the generator → select the PDF QR type.

Deliverables

• Figma Make
• Live prototype
• Gemini thread (heuristics)
• Gemini thread (usability)

Problem

Step 2 asks users to upload a PDF, set landing-page options, and continue - but status, labels, and controls make the path hard to follow. Upload feedback is weak, the skip-landing checkbox is unclear, the preview toggle is ambiguous, and the Next action is easy to miss.

Heuristic evaluation

1. Visibility of system status

• Progress indicator exists, but placing it in the main navigation is unusual.
• Upload success confirmation would be handy.
• Show filename and file size after upload.
• Preview | QR Code toggle is unclear - what changes, why switch, and which view is active are hard to tell. Landing Page | QR Code might help.
• Show file upload progress in the same area and show the thumbnail on the same page.

2. Match between system and real world

• Add short helper text instead of relying on tooltips.
• Better error messages (reason, solution, retry action).
• Directly show the PDF file checkbox is unclear. Try: Open PDF immediately after scanning (Skip landing page) and a tooltip.

3. User control and freedom

• Need a reset option after changing colors of pre-made themes.

4. Consistency and standards

• Use consistent iconography, backgrounds, and spacing.

5. Error prevention

• Disable Continue until requirements are satisfied.

6. Recognition rather than recall

• Instead of long forms, progressively disclose options. Hide options in Advanced Settings.

7. Flexibility and efficiency of use

• The Next button at the bottom-right might not be noticed on taller screens. A sticky footer might work.

8. Aesthetic and minimalist design

• Section subtitles have color contrast and size issues.

9. Help users recognize, diagnose, and recover from errors

• Display specific messages (e.g. “File exceeds 20 MB limit”, “Password-protected PDFs aren't supported”) with recovery suggestions.

10. Help and documentation

• Try having help links along with the errors.

Usability testing

Usability testing was done with 2 potential users.

Tasks

1. Upload a PDF - Can users identify where to upload? Do they try drag & drop? Do they notice the file size limit? Do they expect other file formats?
2. Skip the landing page - Can users find the checkbox? Do they understand what it means? Do they hesitate?
3. Change the colour theme - Do users click colour palettes? Do they edit HEX codes? Do they notice colour swapping?
4. Add PDF information - Do users notice the collapsed section? Can they find it quickly? Do they understand why it exists?
5. Change the font - Can users locate the Fonts section? Is it obvious that it is expandable?
6. Review the preview - Do users notice the preview? Do they attempt to interact with it? Do they understand it is a preview?
7. Continue - Can users locate Next? Do they hesitate before clicking?

Follow-up questions after each task

1. What did you expect to happen?
2. Was anything confusing?
3. Did anything take longer than expected?
4. Was there any information you were looking for but couldn't find?
5. How confident are you that you completed the task correctly?

Metrics

Findings

General

• Help popup opens each time the user goes to step 2. Ideally help texts should be attached to the related UI element.
• Users may miss the Next button after finishing edits.
• The 3-step progress indicator on the top navigation is almost invisible.
• Section subtitle texts are too small and weak in color contrast.

File upload

• Users tried drag & drop.
• Uploading UI elements pop up and disappear. Progress in the same upload component would be nice.
• Users don't know accepted PDF restrictions until upload.
• Showing uploaded file names with the size would be useful.
• The button to edit or replace the file is unclear.
• The grey background in checkboxes and input fields is irritating.
• Directly show the PDF file is unclear. Users did not notice it. Hesitated to click and see.

Preview

• Users are confused about what preview this is. Landing page would be clearer.
• Users tried to interact. Clicked on the PDF and were confused why it opens in a separate page.
• Preview shows all available options first but they are gone once a PDF is uploaded. Placeholders would be nice.

Change the colour theme

• Users did not realize that these are color templates which they can click.
• Users did not notice the swap button.

Add PDF information

• Users did not understand the usage.
• Some users missed the whole panel.
• It is hard to understand the purpose of the input fields and how they are related until the user starts typing.

Solution

Before

Current Step 2 (PDF QR) on online-qr-generator.com:

After

Redesigned Step 2 - clearer step label (Landing Page), drag-and-drop upload with constraints upfront, rewritten skip-landing copy, theme presets with helper text, and a labeled live preview with QR preview:

Outcome

• Task completion improved from 71% to 92.85%
• Average completion time improved from 3.20 min to 2.5 min
• Errors and hints required decreased; satisfaction and confidence increased
• Skip-landing and preview labeling made clearer for first-time users

Learnings

• System status belongs next to the work (upload progress, filename, size) - not as a fleeting popup.
• Plain-language labels beat clever ones: Open PDF immediately after scanning outperformed Directly show the PDF file.
• Preview needs to say what it is (Landing page / QR code) so users do not treat it as the live destination.
• Progressive disclosure and a sticky primary action reduce missed Next clicks on tall Step 2 layouts.