WEBINALSemaine 1 · Maquette et direction artistique
Présenté par WEBINAL
Objectif de cette étape : choisir l'identité de la future boutique. Trois déclinaisons Select sont retenues (Cobalt, Grille, Pro), chacune avec sa page d'accueil, son catalogue, sa fiche produit et son panier. Le catalogue des sept produits OMMY est identique pour faciliter la comparaison. Le choix retenu servira de base au catalogue en test de la semaine 2.
Déclinaison 1
La version de référence, modulaire et efficace
Bandeau bleu profond, recherche au centre de l'en-tête et accueil en mosaïque : une grande accroche et deux catégories mises en avant. Catalogue dense avec ajout rapide au panier.
Typographie : Archivo · IBM Plex Sans
Déclinaison 3
La recherche d'abord, lignes nettes
Accueil construit autour d'un grand champ de recherche, puis une grille stricte de catégories. Angles droits, filets fins noirs et bleu électrique : très lisible, très structuré.
Typographie : Space Grotesk · IBM Plex Sans
Déclinaison 6
Place de marché complète, dense
Organisation de type place de marché : colonne des catégories toujours visible sur l'accueil, bannière principale et bloc avantages. La plus dense, prête pour un catalogue large.
Typographie : Outfit · IBM Plex Sans
Aucune version préférée pour l'instant. Ce choix est conservé uniquement dans ce navigateur, aucune donnée n'est envoyée.
Modifications possibles : couleurs, typographie, ordre des sections ou éléments d'une version à l'autre peuvent être ajustés ou combinés selon vos retours.
Personnalisation · démonstration intégrée
Sur l'accueil, « Recommandé pour vous par l'IA » s'adapte aux produits consultés et aux recherches. Sous chaque fiche, « Produits recommandés IA » propose des alternatives ou des compléments sans reprendre le produit ouvert. Les exemples ci-dessous sont des captures réelles de la maquette ; la même logique s'applique aux trois directions graphiques.
Cartes au même format que la boutique, prix en CHF et explication « IA » sous chaque produit.
« Produits recommandés IA » sous la fiche, explications conservées.
Le même principe, habillé selon chaque direction graphique.
La vitrine générique vue par un nouveau visiteur ; les idées deviennent personnalisées dès que le parcours s'étoffe.
Le visiteur décrit son besoin ; le modèle compare le catalogue côté serveur et classe les options.
Gourde et coussin de nuque consultés, recherches « gourde » et « voyage », puis idées liées au parcours.
Le visiteur consulte la gourde et le coussin de nuque, puis recherche « gourde » et « voyage ». L'IA compare le catalogue et explique le lien de chaque suggestion avec ce parcours. La sélection peut varier à chaque nouveau calcul.
Le modèle fonctionne côté serveur. Les références sont vérifiées dans le catalogue, sans inventer de produit. « Décrire mon besoin » ouvre le Conseiller pour affiner la sélection.
Le Conseiller utilise 1 des 20 crédits de démonstration partagés. Les sélections de l'accueil et des fiches ne les décomptent pas, mais leurs calculs consomment des crédits IA de l'espace de travail. Le parcours est conservé dans ce navigateur et son résumé utile est transmis à l'IA.
Écrans de principe pour le compte client, la fidélité, le portefeuille, l'assistant IA, l'administration et la préparation logistique. Simulations destinées à valider l'ergonomie des étapes suivantes.
À remplir pendant la présentation. Les réponses restent dans ce navigateur.
Prochaine étape
S2 · Catalogue en test
À partir de la direction retenue : intégration du catalogue réel, recherche interne et filtres par catégorie, prix et disponibilité. Paiements en S3, boutique V1 en test en S4, puis administration, fidélité, compte rechargeable et IA selon le planning.
Présentation imprimable