Projects - Facepass

INTRODUCTION

FacePass is a new addition to Transpais’ mobile app. “Your face is your ticket pass” is the idea behind this addition, in which clients who previously bought tickets using the app can have an easier way to board their travel unit by just scanning their face on site.

GOAL

Add a new feature to an already existing app, making it an easy and straightforward experience for people by scanning their faces using their own cellphone, and providing information to validate it.

DELIVERABLES

ON DEADLINE

Userflow. Screen designs. Prototyping. Design for mobile use (cellphone and an tablet).

SUPPORT

Minor changes on screen designs.

PROJECT SPECIFICATION

DEADLINE

2 weeks to deliver screen designs and a prototype.

CONSIDERATIONS

Following the already established design guidelines. The need to be an easy process for clients. Clear and few steps to complete the registration process. The project is just an addition to an already finished product.

SOFTWARE USED

Figma Adobe Illustrator

DEVELOPMENT OF THE PROJECT

One of the recurrent clients, Transpais, already had a project developed as a mobile app for cellphones, so for this project, which was to add a new feature for boarding with a digital ticket by using facial recognition, there was a defined color palette and design for the tools they work with. The color palette and graphic guidelines were shared with us after the first iteration of the project. The first iteration was centered around component distribution and the user experience with the goal of having a process that was meant to be easy to understand and navigate. In addition to this new feature on their mobile app, there’s a tablet feature that is used for the facial recognition of the clients when boarding to Transpais’ services, and a desktop site used by administrative teams to oversee the performance and status of active mobile tablets, as well as their pairing in different gates assigned to specific trips.

Once the designs were completed, a prorotyped file was shared with Transpais, who approved the userflow and shared the proper graphic specifications so the project could be within the unified image as the rest of their mobile app. Due time constraints, and because the project was relatively simple, there was the omission of wireframes so high fidelity screens were designed right away.

Colorpalette

Yellow #FFC800
Blue #009CFF
Blue #0071FF
Gradient from Blue #009CFF to Blue #0071FF

COMPONENTS

COMPONENTS

USERFLOW

USERFLOW
Evidence
Evidence

FIRST ITERATION

FIRST ITERATION

Evidence

Evidence

Evidence

Evidence

FINAL PRODUCT

Evidence
Evidence
Evidence
  • DESIGN SYSTEMS
  • PROTOTYPING
  • USERFLOW