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.
This project is to discover mobile visual hierarchy, prototyping interactions, and different forms of communication.
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…
How can I make the app so it is preferred over the physical license (make it second nature)?
What features could I add that are unique to a digital screen?
How can I get users to use this app in addition to the physical license?
Due to these features, the use of this app is limited and users would rather use their physical license because it is more convenient to take out, and less confusing to the user itself, rather than the person who is supposed to read it. My opportunity is to encourage a user to favor using their digital ID rather than their physical one.
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 Research
I took this time to look at different animation styles and interactions to learn animation timing and familiarity. I wanted to include colors that go with New York and shapes that were easy to understand.
https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659
https://m1.material.io/patterns/navigational-transitions.html#
DESIGN PROCESS
My process from…
Sketches,
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
to wireframes,
Wireframes became obsolete the further down the design process I went. Though it helped me layout the information, many elements ended up changing due to slight changes in creative directions.
DESIGN PROCESS
the first iteration,
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 card view 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
DESIGN PROCESS
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
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
third iteration,
Washed out and dreary colors. 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
fourth iteration,
This one was almost my final. It ended up being too distracting 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
DESIGN PROCESS
and branding iterations.
First Iteration
Using the shape of New York to integrate into the logo, I attempted to use the text as the top half of the state.
Text font is friendly and static
Second Iteration
The rose is the state flower, no one would know this information. The shape was a little complicated and didn't match with the theme.
Third Iteration
For the illustration to not be too overbearing, I used a regular sans-serif font to pair with it.
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. Though, the state is still pleasing to be in the fall, though even the colors are slightly dull, the design is vibrant to offset and characterize New York as a state of pride and joy.
FINAL SOLUTION
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
I love to make things pretty, but the most important part of a design is that it functions for the user.
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.
Final Animated Prototype
What I Learned
Digital ID is an interactive user experience. Each aspect of the experience must reflect on real life or similar interactions that are familiar to the user. I learned:
Screens are not static, prototypes are dynamic
Visual hierarchy, to not overwhelm the user with overbearing illustration or content
Content organization: splitting large amounts of information into an easier to read and parse sections
Simplicity: Elements of the design are aesthetically pleasing and must be functional at the same time
A user must be able to enjoy and use the app.
Each element was carefully rendered to have specific animations such as fading or scaling to make it more natural. This would prevent the user to be shocked at fast movements and recognize that this app is interactive rather than static.
Corina Lougie
corina.lougie@gmail.com
