Fidelity Prototypes

Our UI design process followed an iterative approach, progressing from low-fidelity sketches to high-fidelity interactive prototypes. This section documents both stages and how they informed the final implementation.

📝 Low-Fidelity Prototype

• Tool: Figma (Wireframe Mode)
• Purpose: Focused on basic layout, core functionality, and user flow
• Pages Designed:
  • Upload Page
  • History Page
  • Admin Portal

Screenshots
(Insert screenshots or link to lo-fi Figma file here)

🎨 High-Fidelity Prototype

• Tool: Figma
• Design Focus:
  • Visual consistency and accessibility
  • Clear information hierarchy
  • Simple color palette and intuitive layout
  • Desktop-first with responsive considerations

Key Screens:

• Upload Page: File selection, language and format dropdowns, email input
• History Page: List of tasks with status and download options
• Admin Portal: Full task overview with expiration dates and user emails

Screenshots or Link
(Insert screenshots or link to hi-fi Figma prototype here)

🔄 Design vs Implementation

Most features from the high-fidelity prototype were implemented with minor revisions:

• ✅ Layout and Components: Maintained as per Figma
• ✅ Status & Expiration Features: Adjusted backend logic to match UI design
• ⚠️ Minor Adjustments: Button spacing, mobile responsiveness simplified
• ✅ Consistency: Verified that interface flow matches prototype interactions

🔗 Resources

• Link to Low-Fidelity Prototype (Figma)
• Low-Fidelity Prototype.PDF can download here
• Link to High-Fidelity Prototype (Figma)
• Low-Fidelity Prototype.PDF can download here