Refonte créative d’une boutique de café de spécialité

Le projet en bref

Client
Fika Roasters
Secteur
Restauration
Localisation
Lyon, France
Prestation
Branding · Refonte UX/UI · WordPress · Elementor · WooCommerce
Durée
2 mois
Statut
Visuels du projet

Aperçus du site Fika Roasters.

le site de fikaroasters sur laptop
le site de fikaroasters sur tablette
le site de fikaroasters sur mobile
fikaroasters features
le site de fikaroasters sur elementor
le site de fikaroasters sur laptop
Le client

Qui est Fika Roasters ?

Fika Roasters est une maison lyonnaise spécialisée dans la torréfaction de cafés de spécialité.

La marque sélectionne des cafés provenant de différents terroirs et les torréfie afin de révéler leurs caractéristiques aromatiques. Son catalogue permet aux amateurs de découvrir plusieurs origines, méthodes de traitement et profils gustatifs, depuis les cafés fruités et floraux jusqu’aux références plus chocolatées ou gourmandes.

Fika Roasters ne se limite toutefois pas à la vente de café en ligne. L’entreprise propose également des services destinés aux particuliers et aux professionnels, notamment autour du coffee shop, du conseil, de l’événementiel et de l’accompagnement dans l’univers du café de spécialité.

Le site devait donc refléter cette double identité : une boutique e-commerce performante et une marque créative disposant d’une expertise plus large dans le domaine du café.

Le contexte

Pourquoi Fika Roasters avait besoin d'un nouveau site ?

L’ancien site de Fika Roasters proposait déjà une boutique WooCommerce et présentait les principaux produits de la marque. Son identité reposait sur une palette rose et turquoise accompagnée d’un motif ondulé très présent.

Cette première version permettait de commander les cafés et de découvrir quelques informations sur la torréfaction. Elle restait néanmoins proche d’un site e-commerce classique, principalement structuré autour des produits.

La direction artistique manquait également de cohérence avec l’évolution de la marque. Les photographies, les couleurs, les packagings et les différentes sections ne formaient pas encore un univers suffisamment distinctif pour transmettre le caractère artisanal, contemporain et premium de Fika Roasters.

Le projet a donc consisté à repenser complètement le branding et l’expérience du site. Une nouvelle palette, de nouveaux éléments graphiques, de nouvelles photographies de produits et des contenus vidéo premium ont été développés afin de créer un univers plus expressif.

La structure a également été enrichie pour ne plus présenter uniquement les cafés. Le nouveau site valorise désormais l’histoire de la torréfaction, les profils aromatiques, les engagements de la marque, les avis clients et les services complémentaires proposés par Fika Roasters.

L’ensemble a été construit sous WordPress, Elementor et WooCommerce afin que l’équipe puisse administrer les pages, les produits et les contenus sans intervenir dans le code.

Les défis

Les défis identifiés — ce qu'il fallait résoudre.

Défi 1

01

Créer une identité totalement différente sans perdre la marque

Le premier enjeu consistait à faire évoluer profondément l’univers visuel de Fika Roasters.

L’ancien site utilisait une palette rose et turquoise ainsi qu’un motif ondulé très reconnaissable. La nouvelle identité devait s’éloigner de cet univers tout en conservant l’énergie, la créativité et l’accessibilité de la marque.

Le travail a porté sur la palette chromatique, les typographies, les illustrations, les motifs, les packagings, les compositions photographiques et la manière de présenter les produits. L’objectif était de construire une identité plus mature et premium, sans adopter les codes trop sombres ou conventionnels fréquemment utilisés dans l’univers du café.

Défi 2

02

Transformer une boutique classique en expérience de marque

L’ancien site accordait une place centrale au catalogue, mais racontait encore peu l’univers de Fika Roasters.

La refonte devait créer une expérience capable de transmettre la passion de la torréfaction, la sélection des cafés, la richesse des origines et les différentes manières de consommer les produits.

Le visiteur devait pouvoir acheter un café, mais également comprendre la philosophie de la marque, identifier les profils aromatiques qui lui correspondent et découvrir les autres activités proposées.

Défi 3

03

Mieux articuler produits, contenus et services

Fika Roasters ne propose pas uniquement des sachets de café. Son activité comprend aussi des prestations autour du coffee shop, du conseil et de l’événementiel.

Le défi consistait à intégrer ces offres dans le site sans détourner l’attention de la boutique en ligne. Les produits, les engagements et les services devaient former un parcours cohérent, dans lequel chaque activité renforce la crédibilité de l’autre.

Défi 4

04

Préserver l’autonomie et la continuité de la boutique

La nouvelle direction artistique reposait sur des compositions plus élaborées, des contenus vidéo, des visuels de produits et des éléments graphiques personnalisés.

Malgré cette complexité, le site devait rester facilement administrable par l’équipe. Les pages, produits, prix, textes et visuels devaient pouvoir être modifiés depuis WordPress et Elementor.

La restructuration nécessitait également de rediriger les anciennes URLs vers les nouvelles destinations afin d’éviter les liens cassés et de préserver la continuité de navigation.

Notre approche

Comment on a construit le site.

Cinq phases distinctes, validées une à une par le client. Chaque phase a son livrable, ses objectifs et son timeline.
01
Phase 1

Audit de l’ancien site et définition du nouveau positionnement

Le projet a débuté par une analyse de l’ancienne boutique : identité visuelle, architecture, catalogue WooCommerce, parcours d’achat, contenus existants et présentation des services.

Cette étape a permis d’identifier les éléments à conserver, les sections devenues insuffisantes et les nouvelles informations nécessaires pour traduire le positionnement souhaité.

Une nouvelle direction a ensuite été définie autour de trois objectifs : renforcer la personnalité de la marque, mieux valoriser les produits et présenter Fika Roasters comme un acteur plus global du café de spécialité.

02
Phase 2

Création du nouveau branding et des contenus visuels

La direction artistique a été entièrement repensée avec une nouvelle palette plus chaleureuse, principalement construite autour de tons crème, noirs et de touches colorées.

Des formes graphiques personnalisées, inspirées de gestes picturaux et de l’univers du café, ont été créées pour accompagner les pages sans surcharger la lecture.

Les anciens visuels ont été remplacés par de nouvelles photographies de produits, de torréfaction et de préparation. Des vidéos premium ont également été intégrées afin de rendre l’expérience plus vivante et de montrer concrètement le savoir-faire de la marque.

03
Phase 3

Refonte de l’architecture et de l’expérience utilisateur

La structure du site a été élargie pour présenter successivement l’univers de Fika Roasters, le savoir-faire de la torréfaction, les cafés disponibles, les profils aromatiques, les avis clients, les engagements et les services.

La navigation et les appels à l’action ont été repensés afin de faciliter le passage entre la découverte de la marque et l’achat d’un produit.

Les visiteurs peuvent désormais explorer les cafés selon leur origine ou leurs caractéristiques, comprendre les différentes saveurs et accéder plus facilement aux informations relatives à la livraison, aux paiements et aux engagements de la marque.

04
Phase 4

Photographies et vidéos premium

Le nouveau site a été construit sous WordPress avec Elementor et WooCommerce.

Des modèles réutilisables ont été créés pour harmoniser les pages, les sections éditoriales et les éléments commerciaux. Les produits ont été intégrés dans une présentation cohérente avec la nouvelle identité, tout en conservant les fonctionnalités essentielles de la boutique : choix des options, prix, panier, favoris et paiement.

L’ensemble du site reste modifiable depuis l’interface WordPress. L’équipe peut remplacer une photographie, modifier une section, mettre en avant un nouveau café ou actualiser une offre sans intervention sur le code.

05
Phase 5

Présentation des services et des engagements

La nouvelle structure a nécessité une vérification des anciennes pages et adresses.

Les URLs modifiées ont été associées à leurs nouvelles destinations afin de mettre en place les redirections nécessaires et d’éviter les erreurs pour les visiteurs utilisant d’anciens favoris ou liens externes.

Les fondamentaux techniques ont également été contrôlés lors de la mise en ligne : structure des titres, métadonnées principales, indexation, compatibilité mobile, fonctionnement de WooCommerce et cohérence des parcours d’achat.

Solutions livrées

Ce qu'on a livré concrètement.

La vraie question, ce n’est pas « pourquoi un site web ». C’est pourquoi nous confier ce projet plutôt qu’à un freelance pas cher ou une agence qui sous-traite tout à l’étranger.
01
Livrable 01

Nouvelle identité visuelle

Création d’un nouvel univers de marque comprenant une palette chromatique, des compositions graphiques personnalisées, une hiérarchie typographique et une direction visuelle plus créative et premium.

02
Livrable 02

Refonte complète sous Elementor

Reconstruction des pages sous WordPress et Elementor avec des sections entièrement modifiables, des modèles réutilisables et une adaptation aux ordinateurs, tablettes et smartphones.

03
Livrable 03

Boutique WooCommerce modernisée

Nouvelle présentation des cafés, intégration des options produits et amélioration des parcours entre les collections, les fiches produits, le panier et la commande.

04
Livrable 04

Photographies et vidéos premium

Intégration de nouvelles photographies pour les produits, la torréfaction et l’univers de la marque, accompagnées de contenus vidéo destinés à créer une expérience plus immersive.

05
Livrable 05

Présentation des services et des engagements

Création de sections et de pages consacrées aux services professionnels, au coffee shop, au consulting, à l’événementiel, aux engagements de la marque et aux caractéristiques des cafés proposés.

06
Livrable 06

Migration et redirections

Reprise de la boutique existante, contrôle des produits et contenus, redirection des anciennes URLs vers la nouvelle structure et vérification des fonctionnalités essentielles avant la mise en ligne.

Points forts du site

Ce qui rend ce site différent.

Point fort 1

Un branding immédiatement reconnaissable

La nouvelle direction artistique donne à Fika Roasters un univers visuel beaucoup plus distinctif.

Les aplats crème, les touches de bleu, jaune, rouge et vert, les formes graphiques personnalisées et les nouvelles photographies créent une identité qui se démarque des boutiques de café utilisant principalement des codes bruns, noirs ou minimalistes.

Cette personnalité visuelle peut désormais être déclinée sur les pages, les produits, les contenus sociaux et les futurs supports de communication.

Point fort 2

Une boutique qui raconte le produit

Les cafés ne sont plus uniquement présentés par leur nom, leur prix et leur pays d’origine.

Le nouveau site met également en avant leurs notes aromatiques, leurs méthodes de préparation et les différents univers gustatifs : chocolat, fruits, fleurs ou fruits secs.

Cette approche accompagne les visiteurs qui connaissent encore peu le café de spécialité et les aide à sélectionner un produit correspondant à leurs préférences.

Point fort 3

Une activité présentée au-delà de l’e-commerce

La refonte positionne Fika Roasters comme une marque et une expertise, et non uniquement comme un vendeur de café en ligne.

Le site présente désormais le savoir-faire de la torréfaction, les engagements, les prestations professionnelles, le consulting et l’événementiel. Cette structure permet de s’adresser simultanément aux particuliers, aux entreprises et aux partenaires potentiels.

Point fort 4

Une direction premium entièrement administrable

Malgré une direction artistique plus élaborée, les principales sections restent modifiables avec Elementor.

L’équipe peut gérer les produits depuis WooCommerce et actualiser les contenus éditoriaux depuis WordPress. La créativité du design n’a donc pas été obtenue au détriment de l’autonomie ou de la facilité de maintenance.

Résultats & impact

Ce qu'on a livré concrètement.

01

Une transformation complète de l’image de marque

Le site est passé d’une boutique très marquée par un motif rose et turquoise à un univers plus éditorial, chaleureux et premium.

La nouvelle identité reflète davantage la créativité de Fika Roasters et offre un cadre cohérent aux produits, aux photographies, aux vidéos et aux services.

02

Une expérience e-commerce plus riche

Les visiteurs peuvent désormais découvrir les cafés à travers leurs origines, leurs notes aromatiques et leur univers visuel avant d’accéder aux options d’achat.

Les produits sont mieux intégrés au récit de la marque, ce qui rend le passage entre la découverte et la commande plus naturel.

03

Une offre de services devenue visible

Le nouveau site ne se limite plus au catalogue WooCommerce.

Les activités liées au coffee shop, au consulting, à l’événementiel et aux professionnels disposent désormais d’une place clairement identifiable, permettant à Fika Roasters de valoriser l’ensemble de son expertise.

04

Une plateforme autonome et évolutive

L’équipe peut gérer les produits, les prix, les images et les contenus directement depuis WordPress, Elementor et WooCommerce.

La nouvelle structure peut accueillir de futurs cafés, collections, services, contenus éditoriaux et campagnes sans nécessiter une reconstruction du site.

Ce que ce projet illustre

La refonte de Fika Roasters a transformé une boutique en ligne relativement classique en une véritable expérience de marque consacrée au café de spécialité.

Le projet a commencé par la création d’un branding entièrement différent. Une nouvelle palette, des éléments graphiques personnalisés, de nouvelles photographies de produits et des vidéos premium ont permis de construire un univers plus créatif, chaleureux et haut de gamme.

L’architecture du site a ensuite été élargie. En complément de la boutique WooCommerce, la nouvelle plateforme présente désormais la torréfaction, les profils aromatiques, les engagements, les avis clients et les services proposés aux particuliers et aux professionnels.

Le site a été reconstruit sous WordPress avec Elementor et WooCommerce afin de préserver l’autonomie de l’équipe. Les produits et les contenus peuvent être actualisés sans modification du code.

Enfin, les anciennes URLs ont été redirigées vers la nouvelle structure et les principaux fondamentaux techniques ont été repris lors de la mise en ligne.

Fika Roasters dispose aujourd’hui d’un site qui ne se contente plus de vendre du café : il raconte une identité, transmet un savoir-faire et valorise l’ensemble de l’expérience proposée par la marque.

Aller plus loin

Un projet similaire pour votre entreprise ?

Vous avez un projet de création ou de refonte de site web professionnel ? On applique la même rigueur — architecture de l’information, design orienté conversion, SEO technique, performance mobile — à chaque projet, quel que soit votre secteur.

Création de site web professionnel à Casablanca

Découvrez notre service de création de sites web sur WordPress — vitrines, e-commerce, landing pages.

Référencement SEO à Casablanca

Un site web sans SEO, c’est une voiture sans carburant. Découvrez notre approche SEO.

Voir tous nos projets

Explorez d’autres réalisations — e-commerce, sites vitrines, refontes, landing pages.