Connecticut
Mobile ID
Project Overview
Project Goal
Create a streamlined and user-centric mobile ID that replaces the traditional physical card.
Project Goal
While physical IDs serve their purpose by providing consistent information in a compact format, the evolving needs of a digital world demand a more adaptable solution.
Solution
Deliver a modern and professional mobile ID with a clean, intuitive design that prioritizes easy access to essential information, while reflecting the state’s unique aesthetic.
Wireframes
Beginning with high-fidelity wireframes to refine the layout and placement of key elements.
Design System
Utilizing a cohesive design system that ensures consistency across the mobile ID and allows for the state brand to be expressed.
Typography -
Color -
Primary
#324A58
Logos -
Grid Space -
Deactivated
#D6DADD
Accent
#D6833C
Text
#000000
UI Screens -
Here are the final designs, featuring a user-friendly mobile ID that prioritizes ease of use, security, and a representation of Connecticut’s identity.
Splash Screen
The splash screen prominently features Connecticut’s primary color, the most iconic color of the state. It also showcases Connecticut’s slogan, “Connecticut, Make it Here,” reinforcing the state's identity.
This screen can only be accessed via Face ID or fingerprint authentication, providing an extra layer of security for personal information such as the user’s address and date of birth.
A cardinal, Connecticut’s state bird, is displayed, serving as both a mascot and logo for the app, adding a unique visual connection to the state.
Age View
The age view is designed for quick readability, ensuring users can easily find and verify their age at a glance.
The layout is clean and organized, providing a straightforward presentation of information without unnecessary distractions.
Important information is prominently displayed, with a clear hierarchy that makes essential details stand out for immediate recognition.
Playful “widget”-like boxes are integrated throughout the design, adding a touch of visual interest while enhancing the overall user experience.
QR Code Scan
The layout is designed to be simple and uncluttered, providing a clear focus on the QR code and its functionality.
The QR code section is the largest and most contrasted element, ensuring it captures the user’s attention immediately.
A preview of the information to be scanned is displayed, giving users a clear indication of what to expect and enhancing their confidence in the scanning process.
Full ID
The full ID view effectively utilizes hierarchy to prioritize key information, making it easy for users to identify important details at a glance.
The design features a straightforward and uncluttered layout, enhancing readability and user experience.
A change in layout mid-way through the design adds visual interest and keeps the user engaged while navigating the information.
The layout mirrors a physical ID card, providing familiarity and comfort to users as they interact with the digital version.
Filtering Information
Disabled buttons are effectively utilized to indicate unavailable options, enhancing user clarity and preventing confusion.
The filtering process is straightforward and intuitive, guiding users seamlessly through their choices.
The design allows for quick scanning and identification of options, ensuring users can efficiently filter their information.
A consistent application of box elements throughout the design maintains visual cohesion and aids in organizing the information effectively.