UI/UX Protocol

1. INTRODUCTION

This document defines the standard operating procedures for Product Design at Moustachir Com. It applies to all UI/UX Designers, whether internal team members or external partners.

---

2. ONBOARDING CHECKLIST

Goal: Get you design-ready in 24 hours.

1. Tool Access:
   • Figma: Accept invitation to the Moustachir Team workspace.
   • Notion: Access to the Design Board.
2. Environment Setup:
   • Install Figma Desktop App (Browser version is discouraged for heavy work).
   • Install Font Family: Ensure you have the corporate fonts installed locally (e.g., Inter, Roboto, Outfit - check Design System).
3. Knowledge Transfer:
   • Review the Moustachir Design System file.
   • Read the latest Product Requirements Document (PRD) for context.

---

3. DAILY WORKFLOW & METHODOLOGY

3.1 The Design Process

We follow a structured approach to ensure consistency and usability:

1. Discovery: Understand the user problem. Read the PRD/Ticket. Ask questions in Discord.
2. Wireframing: Low-fidelity sketches to validate logic (Figma). Don't skip this.
3. UI Design: High-fidelity design using the Design System.
4. Prototyping: Connect screens to demonstrate flow and interactions.
5. Review: Present to the PM and Team Lead for feedback.
6. Handoff: Prepare the file for developers.

3.2 Figma Etiquette

• File Organization:
  • Cover: Every file must have a cover thumbnail with the project name and status.
  • Pages:
    • Cover
    • playground (Messy work)
    • UX / Flows (Logic)
    • UI / Hifi (Final Screens)
    • Archive (Old versions)
• Components:
  • ALWAYS use instances from the Master Design System.
  • NEVER detach instances unless you are creating a new variant that will be added to the system later.
• Naming:
  • Frames: Section/ScreenName - State (e.g., Auth/Login - Error).
  • Layers: Clean up layer names before handoff. No Frame 12321.

3.3 Handoff to Engineering

• Annotation: Use the "Redlines" or annotation kit to explain behavior (hover states, animations, error logic).
• Assets: Ensure all icons and images are exportable (SVG for icons, PNG/WebP for images).
• Communication: Post a link to the specific Figma frame in the Notion ticket.

---

4. EXIT & HANDOVER

When a project ends or a designer leaves:

1. Cleanup: Move all "Playground" explorations to "Archive" or delete them if irrelevant.
2. Merge: Ensure all final components are merged into the main library if applicable.
3. Documentation: Write a brief "ReadMe" frame in the file explaining the current state.
4. Access: Sign out and confirm access revocation with the IT Director.