A. Modal Stack

The stacked modal navigation bar includes a “Cancel” button for users to exit the modal, a “Scan” title, and a “Flash” Button toggle.

B. Alignment Guide

The alignment guide provides guidance to the user when pointing the camera to a QR code.

C. Chevron

Used to control the visibility state (revealed or hidden) of the scrolling camera roll.

D. Scrolling Camera Roll

Lets users scroll horizontally through their camera roll.

E. Camera Gallery Icon

Lets users open their camera gallery and access their photos and albums.

F. Successful Scan Confirmation Content

Information to let the user know that their scan was successful.

G. Call-To-Action Button

Used to continue on with the onboarding process.

Camera View

Users can scan a QR code by using the camera. Once the QR code is lined up inside of the scan guide and is recognized, the system displays the appropriate feedback.

Permission

The user needs to allow access to their photos via settings if they haven’t already done so in order to use the camera roll controls. Once access is given, the camera roll is revealed.

Scrolling Camera Roll

Users can scroll horizontally through their revealed camera roll. It can be collapsed or expanded by tapping on the chevron.

Camera Rolls Collapse

Users can collapse or hide the scrolling camera roll by tapping or pulling the down chevron. The camera roll control snaps when toggling from expanded to collapsed camera roll. Once the camera roll is collapsed, the down chevron becomes an up chevron.

Camera Gallery

As an alternative to the scrolling camera roll, users can view and select their photos from their camera gallery by tapping the image icon at the bottom of the screen.

Scan Feedback

Unsuccessful Scan: The user has scanned or selected a non-QR code image.

Invalid QR Code: The user has scanned or selected an invalid QR code.

Successful Scan: The user has scanned or selected the valid QR code