Figma, Adobe Illustrator
UI / UX Design Case Study
New York Digital ID is the translation of a physical ID to mobile. The focus is transforming visual language and design to better leverage the form and function of a digital device display.
Discovering the Problems.
New York Digital Driver's License
New York State’s current digital ID is unrefined and unknown. There is a lack of identity and individuality focus on New York’s infrastructure and symbols. There are no aspects of "enjoyment" or "fun" implemented to keep the user coming back to use the app instead.
No interactions or transitions
Heavily content focused
UI design is “old fashioned”
No options to limit displayed information
The upsides:
Information is clear to differentiate and see
Clear visual hierarchy
Labels and legitimacy
My challenges are…
What features could I add that are unique to the digital screen and are consistent with the physical ID?
How can I get users to use this app in addition to the physical license?
What is the opportunity?
This raises the idea to take this and completely redesign the New York State Digital ID while keeping the same functions as the original and to add other functions that were limited to a physical card.
Though required by a class project, it was an opportunity to learn and strengthen our designs through an iterative process of refinement and feedback.
Therefore, my goals are to create an app that is intuitive and user-friendly.
My goals with this project were to create a simple and unique prototype of New York’s digital ID. I wanted to learn more about the design process, including and importantly, design iterations and feedback. This includes taking into account both experienced and inexperienced users.
DESIGN PROCESS
I start with messy sketches to lay out my initial ideas.
The process of sketching and ideating becomes one in the same, as well as somewhat messy. Here, I lay out my initial ideas and label where and what features I want added to the app, and basic layout and navigation placements.
DESIGN PROCESS
I clean up the sketches by creating a general layout of the information I want on the app.
Though it helped me layout the information, many elements ended up changing due to slight changes in creative directions.
DESIGN PROCESS
The first iteration aligned with my first idea.
Being the first iteration, I wanted to go for the gray blue color that represents the weather around New York.
The full view was meant to look like a card with less information, though a lot of it is enclosed and tight.
Problem Solving and Design Decisions:
The full view (left) is an expandable option to change between the different views. This differentiates what the user will see.
The information separated in a card vs. the bottom half emphasizes the most important driving information
Many elements are similar and familiar to the physical license for the user to easily decipher what each element means
The age view has her age large and behind her so the user can clearly see her age when looking at her face.
DESIGN PROCESS
Fixing the contrast, style, and hierarchy for the second iteration.
Keeping the cards, I continued to use the blue colors, creating an identity for New York.
I continued using the cards to protect the information from the convoluted background and to give information containers that separate from each other
This helps with visibility and organization
Problem Solving and Design Decisions:
Information is protected by a blurred background of the colors because it is easier to read
The colors are darker and added contrast for readability - dark blue is closer to the NY flag color
The content is separated in sections because it is easier for the eye to follow rather than all information floating in the same place
DESIGN PROCESS
Experimenting with different use of background illustrations.
These colors ended up being a bit too washed out and caused the information to be unclear. I tried to integrate photo into background and tried a different approach rather than the cards.
Problem Solving and Design Decisions:
The illustration is incorporated into the the information and design elements because it adds dynamics to the card, giving it personality
DESIGN PROCESS
Going back to the cards idea for a more dynamic look.
This one was almost my final. It ended up being overused with one background, making the illustration lose its "specialness".
I went back to the card information separation because it allowed more movement between information
Movement between cards and easy to get to information would allow the user to have a smooth user experience, making the user less confused and more likely to use the app
Problem Solving and Design Decisions:
The background is of just the city to allow the license information to shine because the purpose of the app is to display the information for New York
The cards are to protect from the heavily illustrated background from the city and blurred behind to allow the background to show allowing the user to know it's for New York
This brings me to the final solution, including final critiques and changes.
FINAL SOLUTION
How did I come to a solution?
End product explanations
Conclusion
What did I learn?
Styleboard
Blue is the color of New York. Blue excelsior and blue flag. I chose these blues because New York is sometimes a beautiful place with not the most beautiful weather.
FINAL SOLUTION
The animations displayed on screen show the movement and navigation to said view.
Final UI Design: Full View
The full view displays all the license information with the option to display the permits and endorsements but either tapping on it or swiping up. The screen will constantly have the user’s name, age, and photo at the top for others to identify who’s license it is.
The cards display information hierarchy and fluid animation. This is to make it pleasing to the eye as well as somewhat unique and familiar way to navigate through the sections in the app.
FINAL SOLUTION
Final UI Design: Age View
This view only displays the user’s age and name. This is intended to verify age for alcohol, tobacco, etc, without having to share all private information.
The top left has verification to make it easier for other users to tell this person's license is of legal age to buy alcohol.
I chose a long name for the user to make sure users with long names can work with the layout without overcrowding it with characters.
FINAL SOLUTION
Final UI Design: QR Code
This page is to share information for others to verify or have it displayed on their device.
The user has the option to share only age and basic information versus all information. This is to separate different occasions such as going through TSA vs. buying alcohol.
FINAL SOLUTION
Final UI Design: Splash Screen
The opening screen displays the cityscape of New York City, presenting the One World Trade Center off centered within the sun. This is to emphasize the importance of the building and a big representation of New York City, with the off-center part giving it an asymmetrical and dynamic setting to the static background.
FINAL SOLUTION
Final Design: Logo
The logos are important symbols to New York State. Inspired by the "I love New York" heart and the Statue of Liberty crown, I used negative space to create the image of both of them together. This is a historical reminder of how we came to America, representing our democratic state and freedom, adding to the tourist part with many merchandise contained " I Love New York" slogan.
CONCLUSION
New York Digital ID is an interactive and functional experience for the user to share and view license information, as well as having a positive user experience. Elements that contain animation and transitions add to the complexity of the screens, though adds “fun” to using the app. The translation of a physical card to a digital license provides further exploration on how we are transitioning to relying on our smartphones.
To reflect on the goal of creating a supplementary app to the physical digital license, using familiar principles to create animations with the illusion of everything being one consistent unit connects to user recognition.
Final Animated Prototype
Corina Lougie
corina.lougie@gmail.com
