Style guide showing designs (mock-ups) for responsive mobile security and authentication app created for client. Collaboration, design, and front-end development were a team effort. My work involved initial requirements gathering, research, establishing user and process flows , translating mockups into a working user interface, defining in-app user navigation and interactions via interactive, Adobe XD prototypes. I handled all design proofing and review efforts through XD's prototyping share features.
Once the client was happy with the overall look and feel, I converted the functional prototype into HTML5, CSS3, and JavaScript app using the Bootstrap UI framework as my foundation to demonstrate how a small number of page templates could support the app’s interface, navigational, and input validation needs.
The project was delivered to the client via Git repo so their team could connect the back-end logic and integrate biometric technologies into the final, published app they called SimplifIDe.
Objective: Design UI for new mobile two-factor security application that incorporates biometric input to authenticate and verify users. Allow this early UI work to function as a working prototype to provide the client with a demonstrable product. Random sample user testing provided valuable feedback empowering the team to iterate through a v2 demo as well as establishing the first version of a UI style guide.
Team: UX/UI Dev: Ryan Smith, Design: J. Ruesch
Tools: Adobe Creative Suite, HTML/CSS, PHP
Released: 1/30/2016
Tools: Adobe Creative Suite, HTML/CSS, PHP
Released: 1/30/2016
USER STEPS: Create Account and Biometric Capture
CREATE ACCOUNT... Collect the bare essential user data to create a unique customer account in the system's database. This is the foundation of our two-factor authentication process.
CAPTURE BIOMETRIC... After the user creates their account, and confirms their email address, we bring them to the Capture Biometric screen. Here, the app interfaces with the mobile device’s camera to capture a selfie. Once the user is happy with their photo, the software scans it, identifies unique facial features, and draws a point-line-point facial map over the photo. During this process, a background task checks the facial map against all known customer accounts. If a match is found, this step will fail as it proves the user already has an account in the system. Otherwise, if no match is found, the system will verify the biometric scan, and allow the user to finalize their new account.
ADMIN STEPS: Review and Verify New Accounts
ICONOGRAPHY
