Intro
The welcome screen with scan uses a QR code scanner as another way to onboard. Before starting the activation process, the user must be provided with a QR code to scan. Users can scan a QR code by using a camera or by scanning via images saved on their phone camera roll/gallery.
QR code scanner examples
Anatomy
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.
Scan with expanded camera roll and successful scan anatomy
Behavior and Interaction
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.
Successful scan with camera view
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.
Giving permission for photos access
Scrolling Camera Roll
Users can scroll horizontally through their revealed camera roll. It can be collapsed or expanded by tapping on the chevron.
Horizontal scroll on expanded scrolling camera roll
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.
Collapsing the scrolling camera roll
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.
Opening photos gallery
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
Scan feedback examples