BARCODE SCANNER APP

FOR PRYSMIAN CABLE

By
Guru Anamalli
Mad Focus Design
OBJECTIVES FOR THE DESIGN

The primary function of the app is to allow verified users to scan

barcodes on Prysmian Cables and retrieve, view and edit corresponding
data.

The app has 3 major sections:

1. User Verification
2. Scanning the barcode
3. View, Edit and Save Data

The app was designed to meet the following objectives:

● Integrate seamlessly into user’s workflow

● Maintain Prysmian visual identity
USER VERIFICATION
Country code is auto-populated from device
info on Sign-In Screen

Integrated keypad for cohesive design on OTP

Input Screen

Cursor moves to next field after each input

Auto-submit code after entering 4th digit

Skewed graphics, color palette and fonts from

Prysmian visual identity

*Logo is only placeholder

Splash Screen Sign-In Screen OTP Input Screen

SCANNING THE BARCODE
App opens in Scan Screen mode by default to
allow for quickest access (after user verification)

Manual look-up text-field provided as overlay

Floating connection status indicator

Visual guide on scan screen for accurate and

quick scanning

App pauses scanning after specified timeout or

if entering manual input to conserve battery

Vibrate and beep after successful scan

Keyboard opens in ALL CAPS mode to enter

Cable ID

Scan Screen Scan Screen - Manual Scan Screen - Inactive Color palette and fonts from Prysmian visual
Input after time-out identity
VIEW, EDIT AND SAVE DATA (1/2)
Flexible design to allow for adding more data
fields and editable fields quickly

Edit screen has relevant keyboard open

permanently

Floating connection status indicator on Cable

Details screen

Save button also acts as “Status Indicator” on

the Edit Detail Screen

Clear messaging and Status Indicator play

significant role in assuaging user anxiety about
saved data

Cable Details Screen Edit Detail Screen Edit Detail Screen -

Status: Saved
VIEW, EDIT AND SAVE DATA (2/2)
Save button functions as a status indicator after
pressing it

Status Indicator has 3 states; Saving, Saved or

No connectivity

Conveys the status of his data clearly.

App will also push a system notification after

successfully uploading data

Edit Detail Screen - Edit Detail Screen - Edit Detail Screen -

Status: Saving Status: Saved Status: No Connectivity
OFFLINE MANAGEMENT
The app is designed to function with as little
interruption as possible even if there is no
connectivity

The app will store scans and edits locally when

there is no connectivity and upload it after the
connection resumes

The app is designed to always notify the user

when connectivity is lost

On the Scan Screen the floating status

indicator shows connection status

The status indicator It also displays info about

data saved locally when connectivity is lost

Similarly, the app has a status indicator

integrated into the Save button on the Edit
Prominently notifies Scans are saved locally Connectivity Status
Screens
when there is no when offline indicator present on “Edit
connectivity Detail” screen
The app also pushes a system notification
when backed up data is uploaded safely
OTHER DESIGN DETAILS

Indication shown when Screen shown when Error message on Sign In Notification Permission
unrecognised barcode is Location Access is not Screen asked only when needed.
scanned granted App can funtion without
access also.
VIEW PROTOTYPE