Project Overview
Client: Internal Game Development Project
Industry: Game Design & Development
Project Type: Customizable Card Game Design System
Role: Lead Designer
Project Summary
I was tasked with building a customizable card game design system using Figma that enabled designers and developers to efficiently create and edit cards, ensuring visual consistency while allowing for rapid iterations as the game evolved. The system needed to accommodate the growing content of the game, making it easy to add new cards or modify existing ones without starting from scratch each time. Using Figma’s robust design and component features, I created a scalable and flexible system that balanced creativity with design efficiency.
Goals & Objectives
The primary objective was to design a scalable, modular system that allowed for efficient card production while maintaining visual consistency across all cards. Specific goals included:
- Efficiency in Card Creation: Enable quick, easy card design and edits without requiring extensive design input for each new card.
- Consistency Across Designs: Ensure that all cards maintained a cohesive look, regardless of who created or modified them.
- Customization Flexibility: Allow for diverse card attributes (imagery, text, effects) while preserving the game’s overall aesthetic.
- Scalability for Future Expansion: Build a system that could easily grow with the game, supporting an expanding library of cards and mechanics.
- Ease of Use for Non-Designers: Make the system user-friendly for game developers and content creators with minimal design experience.
Research & Discovery
User Research & Persona Development:
To create a design that resonated with luxury travelers, I conducted extensive research into the target audience for Villas of Distinction. Through client interviews, feedback from previous customers, and competitive analysis, I developed a detailed persona for the typical Villas of Distinction customer:
Persona Bio:
The average Villas of Distinction customer is a 40-65-year-old affluent professional or retiree. They are accustomed to high-end accommodations and prefer personalized experiences when booking luxury vacations. They are likely traveling with family or a small group of friends and want to ensure their stay is seamless, relaxing, and memorable.Goals:
The primary goal for this persona is to find the perfect villa that meets their specific needs for location, amenities, and privacy. They are looking for an easy, hassle-free booking process, and they want detailed information about the villa and surrounding areas, including activities, dining options, and other services.Needs:
They need high-quality images, clear descriptions of amenities, and reviews from other travelers to feel confident in their choice. Convenience is key, so the website should offer straightforward navigation, simple search and filtering tools, and seamless online booking with transparent pricing.
Competitive Analysis:
I also analyzed several competitors in the luxury villa rental space, including Airbnb Luxe and OneFineStay, to identify trends and features that could be adapted or improved upon for Villas of Distinction. This research revealed several key opportunities:
- Focus on High-Quality Imagery: Competitors leveraged large, visually striking images of villas to draw users in and highlight the luxury experience.
- Streamlined Booking: The booking process needed to be simple and transparent, ensuring that users could easily navigate from villa discovery to payment without friction.
- Detailed Villa Information: Users required comprehensive villa descriptions, including floor plans, local attractions, and guest services, to fully understand the value of the property.
Design & Strategy
The design strategy for the card game system focused on building modular, reusable components that allowed for easy customization while maintaining consistency across the card library.
1. Base Card Template Creation
Objective:
Create foundational card templates that provided consistency across all card types, ensuring that each card shared the same basic structure.
Design Approach:
I built base templates for card frames, title areas, image placeholders, effect text boxes, and stat icons. These templates were created as Figma components, ensuring that any updates made to the base elements would automatically apply across all cards.
Key Features:
- Consistent card frames, ensuring uniform dimensions and structure.
- Designated title, image, and text areas with fixed typography for consistency.
- Space for customizable stat icons to represent card mechanics.
2. Customization and Variants
Objective:
Provide flexibility in card design while maintaining a consistent framework across all cards.
Design Approach:
I built multiple card variants (e.g., creature cards, spell cards) using Figma’s components and instances, allowing for easy customization of artwork, text, and stats. This system enabled team members to quickly create unique cards by overriding specific elements without altering the base structure.
Key Features:
- Customizable artwork placeholders for unique imagery.
- Text and stat overrides for easy card creation.
- Variants for different card types, allowing flexibility in layout and mechanics.
3. Typography and Iconography
Objective:
Standardize typography and icons across all cards to maintain readability and visual consistency.
Design Approach:
I selected legible fonts for card titles and effect text, ensuring readability even on small screens. A custom icon set was developed for stat indicators, providing clear and recognizable symbols for card mechanics.
Key Features:
- Bold, legible title fonts for quick identification.
- Consistent text sizes for effect descriptions.
- Custom icon set for gameplay stats and mechanics.
4. Iterative Design and Testing
Objective:
Ensure the card design system was flexible and scalable by testing it across various card designs.
Design Approach:
I worked closely with game developers and designers to test the system’s usability. Based on feedback, I made iterative adjustments, such as adding guides to help non-designers use the system and adjusting layouts for better visual balance.
Key Features:
- Feedback-driven refinements for improved usability.
- Internal testing to ensure the system was easy to use and efficient.
- Guides and documentation embedded in Figma to support non-designers.
Implementation & Development
Once the design system was built, I ensured it was fully documented and ready for use across teams.
Component Creation in Figma:
I built all templates, components, and variants in Figma, allowing designers and non-designers alike to create cards quickly and efficiently.Documentation:
To support the team, I created comprehensive documentation within Figma, outlining how to create new cards, customize templates, and maintain design consistency.User Training:
I provided training sessions for developers and content creators to ensure they understood how to use the design system, enabling collaboration across teams.
Outcome & Results
The customizable card game design system significantly improved the card creation process:
Increased Efficiency:
The system allowed for faster card creation, reducing the time needed to produce new cards by 30%, enabling the team to focus on creative and strategic tasks.Consistency Across Cards:
All cards maintained a cohesive visual style, thanks to the use of base templates and standardized typography, ensuring that the game felt unified despite contributions from different team members.Flexibility and Scalability:
The system was flexible enough to accommodate new card types and designs, with the ability to easily expand as the game grew.Easy Iteration:
Updates to the base templates were automatically applied to all cards, allowing for rapid iterations and design improvements without manual rework.Collaboration Across Teams:
The design system’s documentation and ease of use enabled non-designers to contribute to the card creation process, improving collaboration and speeding up production.
Lessons Learned & Reflections
The success of this project highlighted the value of creating scalable design systems that balance flexibility with consistency. By building a modular system in Figma, we were able to accommodate the evolving needs of the game while maintaining a cohesive visual language. One key takeaway was the importance of thorough documentation and training, which ensured that all team members could use the system effectively.
Moving forward, I would recommend continuing to refine the design system as the game evolves, ensuring that it remains flexible and scalable for future needs.