Faz App design system - buttons

FAZ App Overview

Platform Description:

FAZ is an engaging MCQ (Multiple Choice Questions) learning game platform designed for Libyan students. The platform combines study modes with interactive gameplay to make learning fun and effective. Students can enhance their knowledge while enjoying a gamified experience.

User Experience and Admin Control:

To ensure a seamless user experience, the admin side of FAZ offers flexibility and clear instructions, enabling system administrators to control quiz settings and add content with ease. The user flow is designed to be intuitive, allowing admins to manage the platform efficiently.

Design System:

The design system for FAZ focuses on setting clear rules for button variations, defining their purposes, and maintaining consistency across the platform's complex structure. The system differentiates between admin-side buttons, app buttons, and CTA (Call-To-Action) buttons.

1. Admin-Side Buttons:

• Purpose: Enable administrators to manage quizzes, settings, and content.
• Design: Simple, clear, and functional with a focus on usability. These buttons are consistent in size and color to ensure a straightforward user experience.

1. App Buttons:

• Purpose: Facilitate navigation and interaction within the student-facing part of the app.
• Design: Engaging and user-friendly, these buttons have a clean look with subtle gradients and interactive animations to enhance the user experience.

1. CTA Buttons:

• Purpose: Attract attention and encourage specific actions (e.g., start a quiz, submit answers).
• Design: Eye-catching with 3D effects and vibrant gradients, these buttons are designed to stand out while maintaining appropriate contrast and interactive animations to provide a game-like feel.

Visual and Interaction Design:

• Contrast and Readability: Ensuring all buttons and text elements have sufficient contrast for readability and accessibility.
• 3D Effects and Gradients: Implemented in CTA buttons to create a dynamic and engaging user experience.
• Interaction Animations: Smooth and intuitive animations to provide feedback and enhance the overall user experience.