The Cards Viewer project was introduced in New Media Design Interactive II as a way to apply design principles and user interface principles into one prototype. We had two main goals of the project:
Simplify playing cards to have an effective but unique design.
Design a mobile UI that makes viewing, filtering, and sorting the cards intuitive.
My Role
UX Designer
Acted as the UX/UI Designer to design the cards and the UI for add/delete functionality and filtering/sorting functionality.
Tools
Figma
Utilized Figma’s advanced component variants and auto-layout features to design the user interface and prototype the user flow.
Scope
Spring 2023
This project took place during the Spring 2023 semester.
Video Prototype
Watch a video of the prototype.
The Cards
Iterative Process
I wanted to create a design that modernized traditional playing cards while also referencing them.
I began designing the characters for the face cards that had large, round heads and an overall flat aesthetic. I have always been inspired by the juxtaposition of big and small elements next to each other to create contrast, so the large heads with small bodies proved to be an effective choice.
The number cards were more challenging. With so many design iterations that looked satisfying, I had to narrow down what looked aesthetically pleasing but was also effective for all number cards 1-9.
I kept iterating until I felt that I had a design that was effective, fresh, and able to distinguish from one another.
Final Designs
My final design alludes to a rpg-like theme, with a king, queen, and wizard as the face cards. The King and Queen are shown wielding magic from their hands that reflects the suit of the card, while the Jack wizard is shown wielding a magic staff for the suit.
The number cards feature the large icon of the respective suit, while also representing the number as the amount of suit icons vertically stacked in the top right. This again references a big and small juxtaposition theme to create contrast and pair with the face cards aesthetic.
Each card has a "notch" on the left side. This is used to emphasize the suit but also in the UI, where users can grab the notch to view the card. When users are viewing the card, they can then slide the notch to delete it.
The User Interface
Components
View each of the user interface elements as Components and Variants in Figma.
The Final UI
Take a look at the user interface for each of the final main screens and explanations.