UX Design Overview

Arda’s user experience is designed in Figma and organized around a set of building blocks that cover interactions, workflow elements, scanning, and data capture. The canonical hi-fi mockup file is the single source of truth for visual and interaction design.

Design Entry Point

The primary Figma file is Arda MVP 2.0 - Hi-Fi Mockups:

Arda MVP 2.0 - Hi-Fi Mockups

Figma operates in two modes relevant to this project:

• Design mode — where the design work is done: laying out screens, specifying colors, typography, and spacing.
• Prototype mode — where interactions are wired to simulate real app behavior, enabling click-through review and user testing.

How to Navigate the Figma File

Basic Navigation

All design content lives under the MVP 2.0 page (visible at the top of the left nav panel). When reviewing mockups, look for the large orange title pages that identify each feature area. Workflow screens are arranged left to right from the title page.

Screenshot reference: ./assets/figma-example-basic-nav.png

Interaction Design Layout

The screen layout below each feature title uses color coding:

• Indigo background — a collection of constituent components used in the pages above.
• Gray background — a collection of modals and popovers used in the pages above, wired for prototype interactions.

Screenshot reference: ./assets/figma-example-interaction.png

Entering Prototype Mode

To enter prototype mode for any page:

1. Select the Frame for the page.
2. Click the play button in the top-right corner of the Figma window.

Screenshot reference: ./assets/figma-example-prototype-mode.png

UX Building Blocks

The UX specification is organized into four areas. Each has its own section within the Figma file and in the technical documentation:

• Interactions — how users interact with UI elements (hover, click, keyboard navigation, drag).
• Workflow Elements — reusable UI patterns for common workflows (detail panels, side panels, action bars).
• Scanning — the QR scan flow for desktop and mobile devices.
• Capture — data entry patterns for creating and editing entities.

Feature-Specific Design Links

Individual feature specifications include direct links to their Figma designs in both their GitHub tickets and their documentation pages. When reviewing a feature implementation, always check its specification document for the most current Figma link.