


centre famille
haute-ville
2025
2024
design web
UI/UX
Dans ce projet, nous avons réalisé la refonte complète du site web du Centre Famille Haute-Ville, un organisme communautaire de Québec dédié à soutenir les familles ayant des enfants de 0 à 5 ans. Bien qu’il joue un rôle essentiel dans son quartier, son site web présentait plusieurs limites : une navigation confuse, l’absence d’outils d’adhésion ou de réservation, ainsi qu’un contenu difficile à mettre à jour.
Notre démarche a commencé par une analyse approfondie de l’organisation et de son contexte d’affaires via un business model canvas. Nous avons consulté les rapports annuels, réalisé une entrevue avec la direction et effectué une observation sur place. Cette immersion nous a permis de comprendre leurs défis et de mieux cerner les besoins concrets des familles qu’ils accompagnent.
Conception des maquettes web — Mary-Pier Laliberté
Conception des maquettes mobiles — Juliette Larochelle
Direction artistique — M. Laliberté et J. Larochelle
Recherche UI/UX — M. Laliberté, J. Larochelle, C. Angelini, L. Formichelli, G. Demers
Conception des maquettes web
— Mary-Pier Laliberté
Conception des maquettes mobiles
— Juliette Larochelle
Direction artistique
— M. Laliberté et J. Larochelle
Recherche UI/UX
— M. Laliberté, J. Larochelle, C. Angelini,
L. Formichelli, G. Demers
2024
2024
design d'édition
mise en page
Dans ce projet, nous avons réalisé la refonte complète du site web du Centre Famille Haute-Ville, un organisme communautaire de Québec dédié à soutenir les familles ayant des enfants de 0 à 5 ans. Bien qu’il joue un rôle essentiel dans son quartier, son site web présentait plusieurs limites : une navigation confuse, l’absence d’outils d’adhésion ou de réservation, ainsi qu’un contenu difficile à mettre à jour.
Notre démarche a commencé par une analyse approfondie de l’organisation et de son contexte d’affaires via un business model canvas. Nous avons consulté les rapports annuels, réalisé une entrevue avec la direction et effectué une observation sur place. Cette immersion nous a permis de comprendre leurs défis et de mieux cerner les besoins concrets des familles qu’ils accompagnent.niques d’édition et de raffinement typographique.
Conception des maquettes web
— Mary-Pier Laliberté
Conception des maquettes mobiles
— Juliette Larochelle
Direction artistique
— M. Laliberté et J. Larochelle
Recherche UI/UX
— M. Laliberté, J. Larochelle, C. Angelini,
L. Formichelli, G. Demers
québec science



DIRECTION ARTISTIQUE
TYPOGRAPHIE
Pour orienter nos décisions de design, nous avons mené une recherche utilisateur auprès des parents, les principaux usagers du site. En combinant recherche secondaire, observation, entrevue et création de personas, nous avons pu identifier des attentes claires : une navigation simple, une information facile à repérer et un moyen efficace de s’inscrire aux activités ou de devenir membre du centre.
À partir de ces constats, nous avons revu la structure de l’information afin de créer une arborescence plus intuitive, mieux adaptée aux tâches réelles des parents. Nous avons ensuite produit des maquettes filaires, tant en version mobile que desktop, pour tester la hiérarchie visuelle et les parcours proposés. Les tests utilisateurs réalisés sur ces premièress maquettes nous ont permis d’affiner la structure, les libellés et la clarté des interactions. Du côté du prototypage fonctionnel via Figma, j’ai pris en charge la conception des maquettes en version desktop pour illustrer précisément les comportements d’interface et la mise en page finale.
Sur le plan visuel, nous avons développé un style graphique qui combine des couleurs franches rappelant l’univers de la petite enfance avec une esthétique sobre pensée pour les parents. La typographie contrastée reflète la dualité entre professionnalisme et proximité humaine, tandis qu’un système d’icônes vient soutenir la lisibilité et simplifier les actions clés du site.
Cette refonte propose une expérience plus chaleureuse, intuitive et durable pour les familles en incorporant une navigation claire, un contenu organisé, un système d’adhésion et de réservation intégré, et un univers visuel à la fois moderne, accessible et fidèle à la mission du centre.


prototypage figma
recherche utilisateur
Pour orienter nos décisions de design, nous avons mené une recherche utilisateur auprès des parents, les principaux usagers du site. En combinant recherche secondaire, observation, entrevue et création de personas, nous avons pu identifier des attentes claires : une navigation simple, une information facile à repérer et un moyen efficace de s’inscrire aux activités ou de devenir membre du centre.
À partir de ces constats, nous avons revu la structure de l’information afin de créer une arborescence plus intuitive, mieux adaptée aux tâches réelles des parents. Nous avons ensuite produit des maquettes filaires, tant en version mobile que desktop, pour tester la hiérarchie visuelle et les parcours proposés. Les tests utilisateurs réalisés sur ces premièress maquettes nous ont permis d’affiner la structure, les libellés et la clarté des interactions. Du côté du prototypage fonctionnel via Figma, j’ai pris en charge la conception des maquettes en version desktop pour illustrer précisément les comportements d’interface et la mise en page finale.
Sur le plan visuel, nous avons développé un style graphique qui combine des couleurs franches rappelant l’univers de la petite enfance avec une esthétique sobre pensée pour les parents. La typographie contrastée reflète la dualité entre professionnalisme et proximité humaine, tandis qu’un système d’icônes vient soutenir la lisibilité et simplifier les actions clés du site.
Cette refonte propose une expérience plus chaleureuse, intuitive et durable pour les familles en incorporant une navigation claire, un contenu organisé, un système d’adhésion et de réservation intégré, et un univers visuel à la fois moderne, accessible et fidèle à la mission du centre.





