QR Scanner check-in redesign

The problem

CDS needed to modernize its onsite lookup-and-print page — the screen attendees use to scan their badge and enter an event. The business wanted new capabilities like mobile check-in and facial recognition, but the existing hardware was outdated and limited. Clients pulled in different directions, too: some wanted kiosks (better for facial recognition), others preferred tablets to cut logistics costs and simplify the onsite setup. My job was to design one solution that served all of those needs while keeping a reliable desktop fallback.

Issues & goals

The legacy page suffered from dated imagery and UI, weak typography, and no mobile support. The brief was clear: a modern, less-cluttered interface; cleaner typography and alignment; and a layout that rendered properly on both desktop and tablet hardware.

Research

Most "scanner" design references showed a user scanning a product's QR — not the reverse, where the attendee presents a code from their phone or printout. That guidance still mattered, especially for attendees outside the millennial/Gen-Z group. The real problems were how dated the assets were and where they sat on the page — an iPhone 4S, a pixelated scanner, and a too-perfect stock hand. Some attendees struggled with the scanner onsite; others forgot to print or save their confirmation email. The design needed to address all of that with minimal hand-holding.

Before, exploration & after

The result

We rebuilt the page to modern standards. The old "click me now" graphic became a proper hero section, and subtle CSS transitions replaced the awkward stock-hand visual. The new scan features were added and tested on our tablet-kiosk prototypes, where they rendered perfectly. The event-services team was thrilled with the upgrade, and the prototypes went off to the developers for production — ultimately feeding the onsite scanner/kiosk product that cut logistics costs and lifted onsite revenue.