FACEPASS
UI/UX PROJECT - Mobile - Tranpaís
INTRODUCTION
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
COMPONENTS

USERFLOW



FIRST ITERATION





FINAL PRODUCT



- DESIGN SYSTEMS
- PROTOTYPING
- USERFLOW