Updated: November 30, 2020

QR Code Scanner

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.

Structure

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

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

C. Camera Roll Controls

• Chevron: Used to control the visibility state (revealed or hidden) of the scrolling camera roll.
• Scrolling Camera Roll:
Lets users horizontally scroll through their camera roll.
• Camera Gallery Icon:
Lets users open their camera gallery and access their photos and albums.

D. Successful Scan Confirmation Content

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

E. Call-To-Action Button

Used to continue on with the onboarding process.

 

Behavior & Interaction

Camera Scanner

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 will display the appropriate feedback.

Permission

The user will have 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 will be revealed.

Camera Rolls Horizontal Scroll

Users can scroll horizontally through their revealed camera roll.

Camera Rolls Visibility

Users can hide the scrolling camera roll by tapping or pulling the down chevron. The camera roll control snaps when hiding and revealing the camera roll. Once the camera roll is hidden, the chevron becomes an up chevron.

Camera Gallery

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

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

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

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

Resources