Puerto Rico Digital ID App
A digital ID is desirable for its convenience. There is a lower risk of losing a digital ID on one’s phone compared to a physical plastic card. With a digital ID, there is more flexibility in presenting the information in a clean, organized manner, enhancing digestibility and legibility.
Thus, this class-assigned project challenged us to provide a concept app for our home state and put our skills to the test.
Role: Motion + Prototyping + UI/UX
Duration: 6 weeks
Software: Illustrator + Figma + After Effects
Process work
The goal was to create a digital ID that is simple, clear, visually stunning, and that effectively represents Puerto Rico.
1. Current Challenges
The current ID does not adequately represent or reflect Puerto Rico’s culture and lifestyle. It is also difficult to read and identify. There is no sense of identity on the current ID.
2. Why is this solution unique?
This project will incorporate colorful graphics specific to the Puerto Rican culture, through fauna, flora, and color. Additionally, the project will focus on concise wording and clear typography for better readability.
What else is out there?
Pros of Google's/Apple’s Digital ID:
Easy access to IDs on Android/Apple devices, offering greater convenience and efficiency.
Strong security protocols to protect personal information, including encryption and possibly biometric authentication.
Clear name and visual identity.
Cons of Google's/Apple’s Digital ID:
Limited availability and regional support, with initial adoption varying by location.
Dependence on device, risking access issues in case of device failure or battery depletion.
No other important/relevant info on the front of the ID, such as age, blood type or organ donor.
Puerto Rico's current Digital ID App:
- This is a screenshot of the UI of PR’s current digital ID app. It is not completely bad, it does work and has a bit more personality into it.
- Logs in with face ID, or passcode. It doesn’t remember each user for privacy reasons.
- The screen displaying ID isn’t as flexible for the user to access since the phone has to be horizontal to view.
Power On Conference ID 2023
- I really enjoyed the playful use of color and shapes to create a truly unique ID
- Information is legible without sacrificing style.
- The gradients are so ugly, that they work. It makes this piece visually interesting, and does not overpower the person’s photo.
Early Sketches
Figure 1a.
- Information is displayed on the side.
- PR can be displayed on the background for consistency.
- Full photo of person.
Figure 1b.
- Photo of person is bigger and takes up more space.
- Animated floral elements.
- Age and state.
- Other info
Figure 2a.
- Playing with different versions of type.
- Coqui frog drawing.
- Future implementations.
- Native Hibiscus flower.
Initial Wireframes
Version 1
- Full body picture of user sliding in.
- Important information displayed as a slide in feature.
- Barcode with ‘State’ behind it.
Version 2
- Name and last name.
- Can make photo bigger, photo is also in the shape of hibiscus flower.
- Important info made bigger when clicked on.
Spacing Layout
I followed an 8-point grid system, similar to Figma’s UI system.
A lot of iterations...
Animated Prototype
Functionality towards project’s goals:
- Information is presented in a clean and organized manner, enhancing digestibility and legibility.
- An added level of security and simple design.
- There is a sense of identity that adequately represents and reflects Puerto Rico’s culture and lifestyle.
Takeaways
- I went through so many iterations to get to this final design.
- I learned that it’s important not to cling to certain initial elements and to discard what isn’t working. I clung to numerous decorative features that didn’t benefit the user.
- I was focused on a specific aesthetic that wasn’t representative of the client, and although it looked nice, it didn’t align with my project goals. Therefore, I learned to keep my initial goals in mind as I work and not lose track by veering in another direction.
Dramatic Product Shots
