PassPal

Introduction

In today’s world, with so many online accounts and so many different ways to steal that information, password management and multi-factor authentication are more important than ever before. This past winter and spring, our team at CodeLab was able to create a mobile app for password management. The app, PassPal, is a multi-factor authentication system that is able to store all of someone’s passwords in an encrypted fashion as well as generate temporary one-time passwords for login purposes. The objective of this product is to create a user-friendly mobile app that seamlessly integrates password storage, encryption, and one-time passkey generation. With the combination of all these features, this app aims to enhance security for users while maintaining accessibility to all their online accounts.

Meet the Team

Lead

Ankita Khatri — Project Manager

Designers

Jolina Huang

Samantha Serrato

Developers

Ishant Gandhi

Suyash Goel

Simon Gooden

Namra Shah

Timeframe

January — June 2024 | 16 weeks

Tools

Design: Figma

Development: MongoDB, Flutter, Express.js, Node.js

Maintenance: Notion, Slack, Jira, Github

The Project

Here is our project demo:

Design

Low-Fidelity

Here are the initial sketches of lo-fi screens in order to explore different design concepts. The initial layout was done based on user research and developer plans in order to prioritize functionality.

Mid-Fidelity

Using Figma, we started some mid-fi designs which focused on our main features. We started with our passbook of our passwords, a QR scanner for temporary passwords, 2FA, a password strength tester, and a password generator.

High-Fidelity

After we had most of our features flushed out, we started our hi-fi designs that the developers would implement into our product. We prioritized designing the passbook, the temporary one time password feature, and ensuring the login user flow was smooth.

Development

The technologies we utilized are MongoDB as our database, Express.js as our backend framework, Flutter for frontend development, and Node.js for our server. The major features we implemented in the development process were user authentication, a passbook that stores a given user’s accounts and allows users to add accounts, and temporary one time passcode (TOTP) retrieval for apps that support it.

Our project allows user authentication through basic login fields that verify credentials from our MongoDB database or third-party authentication through Google, Apple, and Facebook using Firebase. The passbook includes a page to display a user’s stored accounts and includes a button to add another account. Once a user enters an application name, username, password, and optionally, notes, the app is added to their passbook in real-time, such that they will be able to access all of their accounts in future sessions. The app also automatically generates a logo based on an app’s name. Finally, we implemented a feature that allows a user to scan a QR code that allows access to their TOTPs associated with a given account, and we refresh the code every 30 seconds in case it updates using the information encoded by the QR code.

Challenges

Some of the challenges on the development process we faced initially were getting familiar with flutter, getting simulators set up, and JIRA. Some of the design challenges faced were deciding what features to do for the shorter time frame. Overall as the project continued, some of the harder aspects of development were making sure that the user information on the app was a reflection of database and setting up third party authentication. Some of the harder aspects of the design process was the feature communication between developers and designers and conceptualizing how to design the difficult features. Overall, though the process of developing this project was difficult, we worked hard to overcome our challenges.

Takeaways

Over the course of this project, we as a team learned so much both technical and non-technical. On the development side, developers learned how to use flutter and also not to fixate on only one given approach to creating a feature for a mobile app. On the design end, the designers improved their UI/UX skills and learned about the development process. The biggest takeaway for both developers and designers was learning how to work in a cross-functional team dynamic. The developers were able to learn how a user interface design process and feature selection based on user research process work. The designers were able to learn how developers create features and implement designs as well. One important takeaway was feasibility of implementing features on both ends and that was one of the major takeaways from this project. Overall, the PassPal team got so much closer this cohort and we were able to gain much more than just this project.