Game UI Design | Daily Specials

ui-concepts
ui-concepts
ui-concepts
daily-specials-cover
daily-specials-cover
daily-specials-cover
unity-implementation
unity-implementation
unity-implementation

Category:

UI Design

Client:

Game

Duration:

1 week


Daily Specials Screen Design for a Merge Game

Concept and Design Process

Creating an engaging and effective Daily Specials screen for our merge game involves multiple steps, from initial ideation to final implementation in Unity. Here's a breakdown of the process and the rationale behind our choices.


Concept 1: Market Research-Based Design

  1. Ideation Board: Using market research data, we identified key elements that attract users in similar games.

  2. Asset Creation: Generated initial assets using AI tools, followed by vectorization for crisp, scalable graphics.

  3. Design Elements:

    • Title: "Daily Specials" prominently displayed.

    • Countdown Timer: Urgency created by showing time remaining for the offers.

    • Packages:

      • Three different packages offered daily.

      • One package labeled with a "Best Value" badge to highlight the best deal.

    • Contents: Each package contains energy, gems, and a mystery gift.


Concept 2: Psychology-Based Design

  1. Color Psychology: Selected colors based on psychological impact to evoke emotions and prompt user action.

  2. Asset Creation: Similar to Concept 1, initial assets were AI-generated and then vectorized for quality.

  3. Design Elements:

    • Title: Designed with colors and fonts that invoke excitement and urgency.

    • Countdown Timer: Bold and attention-grabbing to emphasize limited-time nature.

    • Packages:

      • Same structure as Concept 1 with a "Best Value" badge.

    • Contents: Each package includes energy, gems, and a mystery gift, with an emphasis on visual appeal.


Implementation in Unity

Preparation

  1. Ideation to Vector Conversion: Took AI-generated assets and vectorized them using tools like Adobe Illustrator.

  2. Unity Preparation:

    • Atlas: Organized all assets into a texture atlas for efficient rendering.

    • Prefab Creation: Created prefabs for reusable components like buttons, badges, and package layouts.

    • Fonts: Selected and imported appropriate fonts to match the design theme.

Implementation Steps

  1. Unity Setup:

    • Imported all vector assets, atlases, and fonts into Unity.

    • Set up a new scene specifically for the Daily Specials screen.

  2. Creating the Panel:

    • Hierarchy Setup: Organized the scene hierarchy with clear labels for easy navigation (e.g., Title, Timer, Package1, Package2, Package3).

    • Title and Timer: Positioned at the top of the panel with appropriate scaling and positioning to ensure visibility.

  3. Packages Setup:

    • Prefab Usage: Used prefabs for each package to maintain consistency and ease of updates.

    • Best Value Badge: Dynamically assigned to one of the packages using a script for flexibility.

    • Contents Display: Arranged energy, gems, and gift icons within each package, ensuring they are visually appealing and informative.

  4. Interactivity:

    • Buttons: Added interactive buttons to each package for user engagement.

    • Animations: Implemented subtle animations to make the screen more dynamic (e.g., countdown timer tick, package hover effects).

Optimization:

  • Atlas and Prefabs: Ensured all assets were optimized for performance by using atlases and reusable prefabs.

  • Fonts: Verified font rendering quality and performance.


Summary and Impact

By focusing on the psychology of colors and leveraging market research, we created a Daily Specials screen that is not only visually appealing but also strategically designed to drive user engagement and purchases. Implementing this in Unity involved a collaborative effort and careful optimization to ensure a smooth and attractive user experience.

This methodical approach to design and implementation showcases our commitment to creating high-quality game interfaces that resonate with players and encourage in-app activity.