Case study · Product design

CheQRboard

Venues put QR codes on signs, exhibits and tickets. CheQRboard lets their own staff decide what happens after the scan: a poll, a quiz, a video, an event, a link hub. I redesigned the UI and design system for the admin platform that builds those experiences and the mobile screens visitors land on.

Client

Zero Copy Labs

Product

Web app + mobile visitor UX

Role

UI & design system

Live product

xplorerquest.com

Two states of the Add QR Code screen: a scan-risk warning modal, and the editor with color, frame and preset controls beside a live preview. — **The QR code editor.** Every choice updates the live preview on the right, and the product warns you before you save a code that may not scan.

The problem

A scan that went nowhere interesting

The original visitor experience was a generic welcome graphic, a language menu and a name field. It looked the same at every venue, and staff couldn't change it without help.

The goal was to hand that control to the venue. A zoo educator or museum coordinator should be able to build an on-brand experience, attach it to a QR code and schedule it, without a developer.

The original visitor welcome screen: a stock welcome flag graphic, language selector, name field and Let's Go button. — **Before.** One template for every venue.

After. Welcome screen settings for the Army Aviation Museum, from empty state to a branded preview with the venue's photo, logo, languages and colors.

The core pattern

Build on the left, see it on the right

Every editor in the product shares one layout: collapsible sections on the left (Main Image, Logo, Content, Design, Results), and a phone preview on the right that updates as you type.

Staff learn the pattern once and reuse it everywhere. The preview also answers the question they care about most: what will a visitor see?

Three stages of the Open Response editor, from empty form to a finished prompt with photo and custom colors in the preview. — **Open Response, in three stages.** Empty state, content added, then brand colors applied.

Five stages of the Create a Poll editor, ending with a live results screen that ranks red panda name options. — **Polls** run from question to a results screen, so visitors see how their vote compares.

Content system

Eight content types, one library

The product organizes content into eight types, each with its own icon, and groups the templates by what the venue is trying to do. Content lives in a library, so one poll or video can be attached to many QR codes and updated in one place.

Content type icons: Image + Text, Multiple Choice, Open Response, Direct Link, Upcoming Events, Video, Audio and Poll.

Interactive

Call to action, multiple choice, open response and polls. Built for trivia, feedback and scavenger hunts.

Navigation & info

Direct links, link trees and upcoming events. The scan goes straight to a URL or a hub of links and socials.

Multimedia

Video and audio for behind-the-scenes tours, self-guided walks and instructional content.

The Content Library table, its row actions, and the Choose a Template screen with templates grouped by purpose. — **Content Library and template picker.** Each template shows a live example before you pick it.

Link Tree editor for a music festival, with link buttons, social icons and custom colors. — **Link Tree**, with a social icon set drawn for dark and light backgrounds.

Multiple Choice editor stages ending in a That is correct confirmation screen. — **Multiple Choice** ends on a custom answer screen that teaches a fact about the subject.

QR design

Custom codes that still scan

Venues wanted codes that matched their signage. The editor exposes body shape, eye frame, eye ball, colors, a frame with top and bottom text, and three saved presets.

More freedom means more ways to break a code. When the color choices hurt contrast, the product says so in place and asks for confirmation before saving.

QR Codes dashboard listing codes with attached content, content type tooltips, scan counts and a row actions menu. — **The QR Codes dashboard** puts scans, attached content and content type in each row. The row menu covers edit, preview, download, archive and translations.

Attaching primary content to a QR code, picking from the content library, and scheduling an event in an Add in Calendar drawer. — **Scheduling.** One code can show its primary content most of the time and swap in scheduled content, such as a Thursday evening exhibit, for set dates and times.

Details

The states nobody asks for

A lot of the work was the unglamorous part of a component library: making every piece hold up in its empty, filled, error and edge-case states.

An image uploader with zoom, rotate, crop and portrait or landscape for logos and main images
A collapsible sidebar and fluid columns so the editor fits a laptop screen
A warning before a user switches organizations with unsaved edits
Multi-language setup with a default language and per-visitor language switching

Image uploader component states for square and circular logos and landscape or portrait main images. — **Image uploader** states for logos and main images.

A modal warning that unsaved changes will be lost when leaving the current organization. — **Switching organizations mid-edit** gets a clear warning before any work is lost.

The Add QR Code screen with the sidebar expanded and collapsed to icons. — **Expanded and collapsed navigation.** The collapsed rail keeps the editor and preview side by side on smaller screens.

AI assistant

Rusty drafts, staff decide

Writing a good question and four good answers is hard work for a busy coordinator. The redesign adds an assistant, Rusty, that lives in the header and suggests copy in context, plus a one-click Shorten action on long descriptions.

The entry point also has a "Coming soon" state, so it can appear in the product before the feature is live.

The Create a Poll screen with the Rusty chat panel open and suggesting four red panda names, plus button states for the AI entry point. — **Rusty** suggesting names for a zoo's new red panda, with the entry-point button states beside it.

Handoff

Design QA against the real build

I compared development builds against the Figma frames with Pixelay overlays, so spacing and alignment issues were caught before release.

Pixelay comparison of the development build and the Figma design for the Add QR Code screen. — **Pixelay comparison** of the development build and the design.

Want to talk through this project?

Let's make it happen

Get in touch