1. Simplification of Design
To ensure usability and accessibility, the design of the cards was minimalistic. I concentrated on the core elements of a playing card, stripping away unnecessary details to highlight functionality.
2. Character Design
Inspired by Duolingo’s character design system, I reimagined the King, Queen, and Jack with a playful and approachable aesthetic. These character designs added a layer of visual interest while maintaining simplicity and familiarity.
3. User Interface (UI)
The UI was crafted to be intuitive, mirroring familiar app layouts and interactions. For instance:
The collapse of cards mimicked the natural way people hold and fan out a deck.
Buttons and icons were strategically placed to facilitate quick and effortless actions.
4. Icon Resources
Icons for the suits were sourced from The Noun Project, specifically designed by Anggara Putra.
Micro-animations were added for specific actions, such as idle states and card deletion, to enhance feedback and interactivity.
Technical Focus
The project emphasized learning Figma’s advanced features:
Prototyping Tools: Interactive flows were created to simulate adding, removing, and sorting cards.
Components and Variables: Reusable components with variable states allowed for dynamic interactions.
Conditionals: Conditional logic ensured the app responded accurately to user actions, such as updating the card count dynamically.
User Testing
To refine the design, I conducted informal user testing with friends:
Feedback Observations: Participants unfamiliar with the project often struggled with navigation, highlighting areas for improvement.
Insights: Familiarity with similar apps influenced ease of use. This reinforced the importance of designing for a broad audience, not just for those with domain knowledge.
Key Takeaways
Technical Growth:
Improved proficiency with Figma’s vector tools and prototyping features.
Learned how to integrate animations for enhanced user feedback.
User-Centric Design:
Recognized the disparity between my intuition as a designer and user behavior.
Gained insights into designing for diverse user preferences and experiences.
Iterative Process:
Experimentation and user testing revealed the iterative nature of design, where constant feedback drives improvement.
Final Outcome
The final app design achieved its goal of being simple, functional, and visually appealing. The playful character designs and intuitive interactions made the app engaging and user-friendly.
1. Gamification in UI Design
The playful approach to character design and animations can be extended to gamified applications, enhancing user engagement in areas like education or fitness tracking.
2. Dynamic Interfaces
The use of Figma’s conditionals and variables can be applied to other interactive interfaces, such as e-commerce apps, where dynamic product displays and user-driven sorting are essential.
3. User Testing Practices
The insights gained from user testing reinforced the value of iterative design. This practice is crucial for any UI/UX project, ensuring designs meet the needs of diverse audiences.
4. Minimalist Design Principles
The focus on essential elements in the playing card design can inform other projects, such as dashboard interfaces or data visualizations, where clarity and usability are paramount.
Spring 2024
Figma