Design Process & Principles

1. Figma as Our Core Tool

• Early Adopter: Blurple is among the early adopters providing feedback for new Figma features, leveraging its capabilities to enhance our workflows.
• Comprehensive Usage: We use Figma not only for UX/UI design but also for creating presentation documents, design principles, and system guidelines, ensuring everything is centralized.

---

2. Structured Design File Workflow

When we transition from research to the design phase, we work with three Figma files to ensure clarity and structure:

1. Design File:
   • This is the internal file where our design team creates and iterates on designs.
   • It contains low-fidelity and high-fidelity wireframes, initial UI elements, and experiments.
   • This file is not shared with the client and remains an internal workspace for the team.
2. Showcase File:
   • This file is used to share finalized design outputs with the client.
   • Feedback is gathered through Figma comments or Coda, and the designs are iteratively updated until approved.
   • It serves as the bridge between the internal design process and client collaboration.
3. Hand-Off File:
   • After the designs are approved, they are consolidated into this final file.
   • The Hand-Off File includes grouped project screens organized as pages, along with the design system for seamless developer collaboration.
   • Developers and clients can easily navigate this file to access finalized and documented design outputs.

---

3. Figma Pagination System

Within every design file, we organize pages for better clarity:

• Design Principle Page: Documents explaining the design principles established for the project.
• Design Output Pages: Organized folders containing UI outputs structured as pages, including:
  • Colors
  • Typography
  • Grid & Spacing
  • Iconography
  • Components (e.g., Alerts, Buttons, Input Fields, Modals, Tabs, etc.)

---

4. Proactive Design Documentation

• Sticky Note-Based Documentation:
  • Each screen in Figma includes FigJam sticky notes that provide concise explanations of the screen’s purpose and functionality.
  • For complex projects, these notes are connected with arrows and visual guides for deeper clarity.

---

5. Principles That Guide Our Design Process

• Start with a Design System: Every project begins with the creation of a design system, ensuring consistency and scalability from the start.
• Research-Led Design: We never begin designing without a thorough understanding of user needs and data-driven insights.
• Component-Driven Approach: Designs leverage auto-layout and component structures, ensuring reusability and efficiency.
• Accessibility and Inclusivity: All designs comply with W3 accessibility standards, ensuring usability for diverse user groups.
• Testing and Validation: Iterative testing is conducted throughout the process, from wireframes to final UI designs.

---

6. Global User Testing Integration

We integrate advanced testing methods by partnering with a global user experience company to:

• Conduct user testing in over 55 countries, gathering rapid insights from diverse user groups within the same day.
• Validate wireframes and UI designs through targeted user tests, enabling iterative improvements.

---

7. Delivering for Scalability and Collaboration

• Embedded Design Systems: Design systems are embedded directly within project files to ensure updates and collaboration are seamless.
• Handoff for Development: Developers receive fully documented and organized design files, ensuring a smooth transition from design to implementation.