← All projects

August 2018 · InMédia / BiblioMondo

Designing and Implementing a Mobile-First UI for BanQ

Mobile-first redesign for Bibliothèque et Archives nationales du Québec — delivered while VP R&D at InMédia / BiblioMondo.

Designing and Implementing a Mobile-First UI for BanQ

Context

BanQ (Bibliothèque et Archives nationales du Québec) was delivered in 2018 while I was at InMédia / BiblioMondo (VP R&D era). It sits in the institutional knowledge-platform world: public cultural organizations that need multilingual access, accessibility, and interfaces that work for citizens — not just staff.

This project was not a brochure site. It was a mobile-first redesign of a national library and archives experience, led end to end from UX through implementation.

Overview

I crafted an intuitive mobile-first user interface for BanQ, secured stakeholder approval, and led the development team through delivery. Every major use case was tested and refined so the result was both usable on phones and tablets and robust enough for a public institution.

Key Features

  • Intuitive mobile-first design: Optimized for smartphones and tablets without abandoning the depth institutional users expect.
  • Citizen-facing UX: Research and iteration focused on real patron journeys across catalogues and services.
  • Stakeholder alignment: Close collaboration with BanQ stakeholders before and during implementation.
  • Led implementation: Translated approved designs into a production UI with the development team.
  • Rigorous testing: Use-case validation so accessibility and reliability kept pace with visual polish.

Technologies Used

  • Material UI: Consistent, modern component language for a large institutional surface.
  • UI/UX prototyping: Iteration before committing engineering capacity.
  • Responsive / adaptive layouts: Mobile-first without breaking desktop workflows.

Challenges and Learnings

Balancing aesthetic clarity with the functional density of a national library portal — while aligning a diverse user base and institutional stakeholders — required continuous testing and tight design–engineering coupling. Leading implementation meant the design never left the room when constraints appeared.

Outcome

BanQ shipped a mobile-first interface that improved the citizen experience and held up under institutional expectations. It remains a concrete example of product leadership inside the broader knowledge-platform context: public-sector UX, multilingual reach, and delivery that survives real users.

© 2026 Toufic Hajj · Senior Full-Stack & Cloud Platform Engineer
Montreal, QC