A scan that went nowhere interesting
The original TRAKID visitor screen was a stock welcome graphic, a language menu and a name field, the same at every venue, and staff couldn't change it without a developer. The goal was to let a zoo educator or museum coordinator build an on-brand experience, attach it to a code and schedule it on their own.
Every editor shares one layout
Collapsible sections sit on the left (Main Image, Logo, Content, Design, Results) and a phone preview on the right updates as you type. Staff learn the pattern once, and the preview always answers their real question: what will a visitor see? Dots under the preview step through the screens that follow, like the answer and results pages.
Eight content types, one library
Content falls into eight types, each with its own icon, and the template picker groups them by goal: interactive, navigation and multimedia. Everything lives in one library, so a single poll or link tree can sit behind many codes and be updated in one place.
Custom codes that still scan
Venues wanted codes that matched their signage, so the editor exposes body shape, eye frames, colors, a text frame and three saved presets. More freedom means more ways to break a code, so when colors hurt contrast the product flags it in place and asks again at save.
One code, different content by date
A sign stays up for months but programs change weekly. Each code keeps its primary content and can swap in scheduled content, such as a Thursday evening exhibit, for set dates and times, chosen from the library and placed in a calendar drawer.
Surveys and donations in the same shell
When the product grew past single prompts, I kept the new tools inside the patterns staff already knew.
- A survey builder with Form and Design modes and a grouped picker of 15 field types
- A results page that leads with views, starts, completion rate and time
- Stripe payment links themed with the same logo uploader and color pickers
The states nobody asks for
Most of the system work was making each component hold up in its empty, filled, error and edge-case states, then checking the build against Figma.
- Color ramps, an Inter type scale and button sets as shared styles
- Preset colors venues can edit, reset and reuse in every editor
- A sidebar that collapses to a rail so editor and preview fit a laptop
- Pixelay overlays of development builds to catch spacing slips before release
Rusty drafts, staff decide
Writing a good question and six good answers is hard for a busy coordinator. An assistant called Rusty lives in the header and suggests copy in context, and long descriptions get a one-click Shorten. A "Coming soon" state let the entry point ship before the feature did.
Things to improve
- Contrast checks while picking. The scan warning appears after colors are chosen. A live contrast meter beside the pickers would steer people away from unscannable codes sooner.
- Two ways to ask a question. Open Response and the survey builder overlap, so staff have to guess which one to use; one builder with a single-question mode would settle it.
- Fewer look-alike templates. Call to Action and Image + Text use nearly the same editor and description, and could merge into one template with options.
- Editing away from a desk. The collapsed rail helps on laptops, but staff standing at an exhibit with a tablet or phone still can't edit comfortably.
- Scans with context. The dashboard shows total scans per code. Trends over time and by placement would tell venues which signs actually work.
Available for work