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.
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.
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.
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.
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.
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.