AstroJSAWS

16 Octobre 2023

Atikè: Une boutique en ligne pragmatique

Atikè, page d'accueil
  • En résumé, la refonte de l'e-commerce Wix visait à réduire les coûts d'abonnement tout en offrant une expérience améliorée. J'ai entamé ce projet en étroite collaboration avec les parties prenantes pour cerner les besoins. En utilisant des atelier comme l'event storming et le user story mapping, j'ai défini les fonctionnalités essentielles.

    J'ai opté pour une approche SSG avec AstroJS et AWS pour garantir l'accessibilité, la performance, la légèreté et réduire les coûts. Le développement a suivi une approche agile avec des mises à jour fréquentes pour améliorer l'expérience utilisateur.

J'ai été sollicité pour la refonte d'un e-commerce wix. L'objectif était de réduire les coûts liés à l'abonnement wix. Je me suis lancé dans le projet en travaillant main dans la main avec les parties prenantes.

Analyse du besoin

Avant de commencer à développer tout et n'importe quoi, j'ai dû élaborer une stratégie d'action qui commence par l'analyse du besoin.
J'ai organisé plusieurs ateliers, un event storming et un user story mapping. Grâce à ceux-ci, une idée claire des fonctionnalités nécessaires s'est dessinée.

Event Storming

Le premier atelier que j'ai organisé a été l'event storming qui nous a permis de comprendre et de visualiser les processus, interactions et événements sur l'ensemble du parcours utilisateur.

User Story Mapping

À partir des événements et parcours identifié lors de l'event storming, j'ai réalisé un user story mapping pour développer le site web de manière méthodique.

La photo suivante est un extrait du user story mapping que j'ai fait. À partir des éléments de parcours utilisateur identifiés lors de l'event storming (choisir mes produits) on peut identifier une ou plusieurs épiques (consulter le catalogue) qui elles-mêmes sont découpées en plusieurs tickets (affiner ma recherche par catégorie).

extrait du user story mapping réalisé

Choix de la stack technique

Créer un site e-commerce est une démarche ambitieuse qui nécessite une planification minutieuse et des choix technologiques judicieux. Dans cette section, nous allons suivre le processus de réflexion qui m'a a conduit à choisir AstroJS et AWS pour mon site e-commerce.

Le voyage commence avec un objectif clair: Je veux créer un site e-commerce accessible. L'accessibilité signifie que le site doit être ouvert à tous, y compris les personnes handicapées. Je veux que chaque visiteur puisse parcourir le catalogue, ajouter des produits au panier et finaliser ses achats sans obstacles.

La performance est au cœur de l'expérience utilisateur. Les utilisateurs attendent des sites qui se chargent rapidement, peu importe leur connexion. Une performance optimale favorise la conversion des visiteurs en clients.

Dans une dynamique de numérique responsable, la légèreté est une autre caractéristique essentielle. Les pages légères se chargent plus rapidement et consomment moins de bande passante. Cela signifie que les visiteurs auront une navigation fluide, même sur des appareils mobiles ou des connexions lentes.

Le coût est toujours un facteur clé, c'est d'ailleurs la raison pour laquelle le site a été développé. il faut minimiser les dépenses tout en obtenant les meilleurs résultats. La bonne technologie permettra de réaliser des économies.

Je voulais utliser des technologies qui facilitent mon travail, pour me concentrer sur la création de fonctionnalités exceptionnelles.

J'ai identifié deux combinaisons de technologies prometteuses: Svelte avec AWS et AstroJS avec AWS. Pour prendre une décision éclairée, j'ai décidé de réaliser une preuve de concept (POC) pour chaque option.

Après une analyse approfondie et des tests rigoureux, AstroJS et AWS sont les technologies que j'ai utilisé pour Atikè. Elles répondent à tous nos besoins, de l'accessibilité à l'économie, en passant par la performance, la légèreté et la facilité de développement.

Développement du site

La clé de notre approche a été la mise à jour fréquente du site. J'ai adopté une méthodologie agile, ce qui signifie que j'ai pu réagir rapidement aux commentaires et aux nouvelles opportunités. L'itération constante nous a permis d'affiner continuellement l'expérience utilisateur.

Pour garantir la rapidité et la légèreté du site, j'ai opté pour une architecture de génération de site statique (SSG). j'ai utilisé du JavaScript uniquement là où c'était nécessaire pour optimiser au maximum les performances. Cette approche m'a permis de réduire la charge de travail du navigateur des visiteurs et d'accélérer le chargement des pages.

Un autre aspect essentiel du processus de développement a été la recherche constante de l'excellence en matière de qualité et de bonnes pratiques. J'ai fait appel à mon expertise qualité web pour m'assurer que le site respecte les normes en matière de qualité web. Cela inclut la gestion de la performance, de la sécurité, de l'accessibilité, et de la qualité de code. Et lorsqu'il ne le fait pas, c'est en connaissance de cause en sachant qui cela affecte et comment.