Timeline
5 weeks
Tools Used
Figma
Illustrator
Role
Product Designer
Illustrator
Overview
  • This project is a simple app thats focus is prototype and displaying a desk of Cards
Goals
  • Designing 6 cards to be display in the app
  • Add interactivity to the deck of cards
  • Track the number of cards displayed
Research Methods
Research
Brainstorming Cards Designs
Mind Map
  • The designs for the deck of cards could be taken in any direction. So to spark new ideas and concepts, I created a mind map to explore different possibilities.
Main Insight
A Simple Design is Key!
  • I want a design characters that were simple and playful in shape but still breathing with personality!
Research
Inspiration
Duolingo Characters Effectively Use Simple Shape
  • Duolingo effectively uses shapes like circles, squares, and triangles to shape the character's personality
Classic Royal Face Card
  • These cards have been redesigned countless times over the years, so I thought it’d be fun to try my own take on them
Main Insight
Simplify the classic Face Card
  • Redesign the classic face card
  • Use simple shape of effectively design a character
Ideation
Sketches
Version 1
  • The first sketch ideas were a homeless king theme, but when I ask for feedback about my sketch
Feedback I got for the card:
  • The design were too complicated
  • Too much is happening in the design
Version 2
Making the Hands Huge
I noticed many designs feature small hands, so I decided to do the opposite by giving the characters oversized hands, creating a unique yet simple design.
I decided to base each character on a specific shape: the King would be a square to symbolize order &  security, the Queen a circle to symbolize kindness & motherly, and the Jack a triangle to symbolize power & energy!
Final Card Design
Ideation
Brainstorming App Layout
  • I brainstormed various layouts to make the cards more user-friendly
Takeaway:
  • The cards should be in the middle
  • The amount of cards count should be display in the top
  • Have bread-crusts to see what cards the users in on
Ideation
User Flow
  • I had a simple user flow  to have the option to delete cars , add cards, and see all the card the user has
Ideation
Exploring Different Solutions
Solution
Final Cards Designs App
Interactive Deck of Cards
  • Swipe right and left to seamless browsing though the cards
  • Swipe on the right button to collapse all the card to better navigate through the collection of cards
Card Management
  • Add & Remove Cards
  • Displays the total number of cards
  • The color of the button and background will change to indicated if the mode is adding or deleting
Error Prevention
  • A pop up will be display to warn the user that no more than 6 cards can be added and the last card can’t be delete
  • The background color change to indicate that it is in adding or deleting mode
Project Takeaway
Learning to Use Variables
I learned to use variables effectively, saving hours in prototyping and freeing up time to refine the design
Advancing Prototyping Skills
This project taught me to stay organized to avoid getting lost in complex connections and helped me iterate to link frames more effectively
Creating Illustrations
I gained valuable experience in creating illustrations and learned that simplicity is key over elaborate designs