SIM CHIA HUEYSIM CHIA HUEY
PéperTree est la boutique officielle de ma marque de stickers illustrés. J’ai imaginé ce projet pour réunir au même endroit tout l’univers de Péper : ses illustrations, ses créations, les actualités de la marque et les premières collections de stickers.
Au-delà de la création d’une boutique, ce projet représentait également un défi personnel. Après trois ans sans utiliser Angular, je souhaitais remettre les mains dans le développement front-end à travers un projet concret qui me permettrait de retrouver mes automatismes tout en créant un véritable outil pour ma marque.
Le résultat est une première version fonctionnelle (MVP) qui permet de découvrir l’univers de PéperTree, de parcourir les collections et de passer commande, tout en préparant les futures évolutions du site.
J’ai réalisé l’ensemble du projet de manière autonome.
J’ai également utilisé l’intelligence artificielle comme assistant de développement pour générer une base de certains composants et mieux comprendre certaines notions Angular lors de ma reprise du framework. Les choix de conception, le développement et les adaptations du projet ont été réalisés par mes soins.
Péper adore inventer, dessiner, coller, photographier, rêver… et surtout partager tout ça avec ses amis. Elle dessine leur quotidien, transforme leurs petites aventures en illustrations et crée des stickers inspirés de leurs personnalités.
Je souhaitais que cette énergie se retrouve dans un site officiel capable de rassembler toute la marque :
L’objectif était de proposer un lieu unique où chacun puisse découvrir l’univers de PéperTree, même sans utiliser les réseaux sociaux.
Le projet répondait à plusieurs objectifs.
Construire le site officiel de la marque et créer un espace centralisant tout l’univers de PéperTree.
Lancer les premières ventes, et permettre aux visiteurs de commander les stickers sans attendre le développement complet d’une boutique e-commerce.
Reprendre Angular après plusieurs années sans pratiquer le framework, ce projet était l’occasion idéale de retrouver mes réflexes de développement dans un contexte réel.
Concevoir une base solide et créer un site facilement enrichissable avec de nouvelles collections, illustrations et fonctionnalités.
L’un des principaux défis du projet était de proposer une première expérience de vente sans développer immédiatement un back-end.
Créer un panier, un système de paiement, une gestion des commandes et un espace client représentait un investissement important en temps et en budget.
Plutôt que de repousser le lancement de la marque, j’ai choisi une approche MVP (Minimum Viable Product) : développer une première version fonctionnelle permettant de présenter les produits et de commencer à recevoir des commandes.
Cette décision m’a permis de concentrer mes efforts sur l’expérience utilisateur, la direction artistique et la qualité du front-end, tout en gardant la possibilité de faire évoluer le projet progressivement.
L’univers de PéperTree s’adresse aux personnes qui aiment les objets créatifs, les illustrations chaleureuses et les petites joies du quotidien.
Je voulais créer une identité visuelle qui donne immédiatement envie de sourire.
L’univers graphique repose sur plusieurs valeurs :
À travers ses dessins, Péper raconte les passions, les petits ratés de la vie, les moments partagés avec ses amis et encourage chacun à accepter les imperfections du quotidien avec bienveillance.
Le violet est devenu naturellement la couleur principale de la marque.
Au-delà du fait qu’il s’agit de ma couleur préférée, je trouvais intéressant d’utiliser une teinte encore relativement peu exploitée comme couleur dominante dans les univers créatifs français.
Cette couleur évoque pour moi :
Elle est également inspirée par Grimace, la mascotte de McDonald’s, dont j’apprécie la silhouette ronde et attachante.
Pour renforcer cette personnalité, j’ai choisi deux Google Fonts complémentaires.
Nunito est utilisée pour les textes courants. Ses formes légèrement arrondies offrent une excellente lisibilité tout en conservant une sensation de douceur.
Cherry Bomb One est utilisée pour les titres. Son dessin généreux, ses formes épaisses et ses courbes renforcent l’aspect ludique de la marque et rappellent les autocollants et les dessins réalisés à la main.
Le site a été pensé simultanément pour desktop et mobile dès la phase de conception.
J’ai commencé par réaliser plusieurs wireframes dessinés à la main avant de concevoir les maquettes haute fidélité sur Figma.
Lors du développement, j’ai d’abord intégré la version desktop avant d’adapter progressivement chaque écran pour les tablettes et smartphones.
Cette méthode m’a permis de conserver une cohérence visuelle entre les différents supports.
Afin de limiter le nombre de pages tout en gardant une navigation fluide, j’ai choisi de présenter les informations détaillées des produits dans une fenêtre modale.
Cette approche permet :
Elle représentait également une solution pertinente pour cette première version du site.
En présentant PéperTree autour de moi, je me suis rendu compte que certaines personnes n’utilisaient pas Instagram.
J’ai donc choisi de republier directement sur le site les illustrations et vidéos publiées sur le réseau social.
Ainsi, chaque visiteur peut découvrir les contenus de la marque sans avoir besoin de créer un compte sur une plateforme externe.
Le projet est développé avec Angular.
Cette réalisation m’a permis de reprendre progressivement mes habitudes avec le framework tout en consolidant mes connaissances.
Le projet est organisé autour :
Cette structure simplifie l’ajout de nouveaux produits et permet de faire évoluer le contenu sans modifier systématiquement les composants.
Le routing Angular a été la première difficulté rencontrée.
Après plusieurs années sans pratiquer Angular, retrouver la logique des routes, des composants et de l’organisation générale du projet m’a demandé un véritable temps de réadaptation.
C’est également le tout premier élément que j’ai développé, ce qui rendait la reprise encore plus exigeante.
Au fil du projet, les automatismes sont progressivement revenus. Chaque fonctionnalité développée renforçait ma compréhension du framework et me permettait d’aborder les problèmes avec davantage de confiance.
Je suis particulièrement fière d’avoir réussi à remettre en place le système de routing ainsi que la gestion des données en JSON, qui simplifie aujourd’hui l’ajout de nouveaux contenus.
Le projet est développé avec Angular.
Cette réalisation m’a permis de reprendre progressivement mes habitudes avec le framework tout en consolidant mes connaissances.
Le projet est organisé autour :
Cette structure simplifie l’ajout de nouveaux produits et permet de faire évoluer le contenu sans modifier systématiquement les composants.
Sans panier ni paiement en ligne, il était important de proposer une solution simple pour permettre les premières commandes.
Le parcours utilisateur est volontairement minimaliste.
Cette solution me permet de gérer les commandes manuellement tout en validant l’intérêt des visiteurs pour les produits, sans attendre le développement complet d’une boutique e-commerce.
PéperTree m’a permis de développer autant mes compétences créatives que techniques.
J’y ai appris à :
PéperTree continue d’évoluer.
Les prochaines fonctionnalités prévues sont :
L’objectif est de faire évoluer progressivement cette première version vers une boutique e-commerce complète, tout en conservant l’identité chaleureuse qui caractérise la marque.
PéperTree est bien plus qu’un simple exercice de développement.
C’est un projet personnel qui réunit ma passion pour l’illustration, la direction artistique et le développement front-end.
En construisant cette première version, j’ai démontré ma capacité à apprendre de manière autonome, à reprendre rapidement en main un framework que je n’avais plus utilisé depuis plusieurs années et à transformer une idée en un produit concret, accessible en ligne.
Aujourd’hui, PéperTree est une base vivante qui continue d’évoluer au rythme des nouvelles collections, des nouvelles illustrations et des compétences que je développe au fil du temps.
