Refonte total du site OZZAK

En tant que développeur full stack chez Ozzak, une startup spécialisée dans la vente de places de cinéma à tarifs réduits, j'ai participé activement à la refonte complète de la plateforme (Ozzak v2). Ce projet, encore en cours, vise à moderniser significativement l’expérience utilisateur, améliorer la collecte stratégique des données, et implémenter une approche totalement responsive et orientée API.

Objectifs du projet :

• Moderniser et optimiser l'expérience utilisateur à travers une interface entièrement repensée.
• Collecter précisément les données sur les parcours utilisateurs afin de répondre aux besoins spécifiques d’Ozzak et de ses cinémas partenaires.
• Mettre ces données stratégiques à disposition de certains clients via une API performante grâce à API Platform.

Design réalisé par Carré Sauvage :

La refonte graphique a été confiée à l'agence spécialisée Carré Sauvage, qui a conçu une nouvelle identité visuelle ainsi qu'une expérience utilisateur intuitive et moderne.

Choix technologiques :

• Next.js pour la partie front-end, choisi en raison des compétences internes et de la volonté de capitaliser sur une technologie déjà maîtrisée par l'équipe.
• Symfony & API Platform côté back-end, garantissant une gestion efficace des données et fournissant une API REST robuste et performante.
• CapacitorJS pour générer rapidement une application mobile Android et iOS, permettant de gagner du temps tout en garantissant une expérience multiplateforme optimale.

Importance stratégique des données utilisateurs :

La collecte approfondie des données utilisateurs constitue un enjeu majeur car ces données, actuellement limitées dans l'industrie cinématographique, sont cruciales pour adapter les offres et anticiper les attentes des spectateurs.

Grâce à API Platform, Ozzak peut fournir ces données stratégiques à ses cinémas partenaires et à certains clients privilégiés, facilitant une prise de décision éclairée.

État d'avancement du projet :

Ce projet est actuellement en cours. De août à décembre, j'ai personnellement pris en charge l'intégration complète des maquettes fournies par Carré Sauvage, travaillant en autonomie et renforçant ainsi considérablement mes compétences techniques et en gestion de projet.

Pour garantir la fiabilité du projet, j'ai également mis en place des tests end-to-end (E2E) en utilisant Playwright, assurant ainsi la qualité et la stabilité des fonctionnalités clés.

Ci-dessous, vous pouvez voir un aperçu des différentes pages du nouveau site. 

La nouvelle page de recherche permet de trouver facilement un film précis, une fonctionnalité essentielle qui manquait à la version précédente d'Ozzak, provoquant parfois de la frustration chez les utilisateurs. Désormais, il est possible de filtrer les films selon plusieurs critères (genre, âge, langue) ou encore de consulter les séances disponibles dans son cinéma favori, le tout actualisé en temps réel.

La page d'un film permet quant à elle de filtrer efficacement les séances par date proche. Plus besoin de consulter la programmation à très long terme, puisque les cinémas mettent à jour leur programmation chaque mardi. Grâce à un slider interactif, on peut facilement trier les séances par date, ville, cinéma ou langue, ce qui rend la recherche rapide et intuitive.

J'ai également travaillé sur la nouvelle interface de la rubrique actualité. Le design global de cette section n'a pas fondamentalement changé, car l'approche actuelle était déjà très efficace. Cependant, la page dédiée aux articles a bénéficié d'une refonte complète, apportant une expérience de lecture plus moderne et agréable, tout en conservant l'utilisation de Strapi pour la gestion des contenus.

Une toute nouvelle page dédiée au profil utilisateur a été créée, permettant à chacun de personnaliser facilement son expérience et de centraliser toutes ses informations : cinéma favori, billets achetés, séances à venir et préférences personnelles.

Pour optimiser la collecte des données utilisateurs, nous avons mis en place des questionnaires interactifs. Ces derniers sont proposés soit après une séance, soit à des moments ciblés du parcours utilisateur. Ils offrent une expérience visuelle agréable et incitative, facilitant ainsi la participation et la collecte d'informations précieuses.

De plus, la documentation interactive de notre API générée automatiquement par API Platform (Swagger UI), permet de tester directement les différentes routes grâce à l’interface fournie. L’ensemble de ces routes est sécurisé par des tokens JWT pour assurer une sécurité optimale.
La grande force de cette solution réside dans la stabilité du backend : il reste en grande partie inchangé. Le principal travail consiste simplement à créer et paramétrer les différents modèles de données transmis à l’API, notamment grâce à l’utilisation d’ApiResource (documentation ici).

Ces développements ont cependant nécessité un effort important d’apprentissage, la documentation d’API Platform étant communautaire et accessible à tous, mais pas toujours immédiatement intuitive. Il m’a fallu visionner de nombreuses heures de conférences sur API Platform pour bien comprendre son fonctionnement global.

Voilà pour ce projet ! Il y aurait encore beaucoup à raconter, mais je ne peux pas tout dévoiler ici, il faudra patienter encore un peu pour découvrir la version finale ! Cette expérience a été pour moi extrêmement enrichissante : j'ai eu l'occasion de travailler seul sur un projet colossal entièrement from scratch, en relevant les défis liés à la prise en main de nouvelles technologies.

Résultats et perspectives :

À ce stade intermédiaire, le projet a déjà permis :

• Une refonte visuelle complète, offrant une expérience utilisateur plus intuitive et performante.
• La mise en place d'une infrastructure solide pour collecter et exploiter les données utilisateur.
• La préparation d'une API solide, prête à être déployée pour les cinémas et partenaires stratégiques.

Le projet continuera à évoluer au cours des prochains mois pour atteindre pleinement ses objectifs finaux.