Par Léa Lepioufle • Pour MediaDesignTeam 🤍
BABKA
SYSTEM
Librairie
UI KIT
Composants
Modules
Composants
Modules
Gain de productivité
5 jours de production totale vs 1 mois pour une Carte Rose classique.
Harmonisation des Cartes Roses
Charter les structures et les composants pour obtenir une harmonie entre la France et l'Inter.
Fluidifier la conception
Grâce à une base solide pré-établie, le site se dessine dès le premier call client.
Améliorer l'expérience client
La cohérence entre les sites permet une meilleure compréhension chez les consommateurs.
Optimisation
du temps
En réduisant les délais de production, les équipes peuvent se consacrer à d'autres missions.
Développeur
Responsable d'OP
Agence Inter
Créa
* La Carte Rose (Pink Brand) est un site one-page permettant aux marques partenaires de prendre la parole sur leur dernière campagne, leurs produits phares ou des offres exclusives.
Ces sites, les Pink Brand, existent également à l'étranger, dans les pays où Veepee - dit Privalia - propose ses services.
Pour Qui
et
Pour Quoi
?
Ce design system est utilisé par l’équipe média de Veepee s’occupant du service
Carte Rose France et International.*
?
Du responsable d’opération au développeur, en France comme en Allemagne, le Babka System a dû s’adapter aux différentes demandes afin d'améliorer les performances globales :
01.
FONDATION
Regrouper les Cartes Roses françaises et internationales ayant des similitudes ou des exigences de marque.
Déterminer les problématiques de déclinaisons (traductions, exigences particulières ..)
02.
IDÉATION
Durant un atelier dit "6 to 1", imaginer et décliner en équipe divers variants d'un même composant.
Repérer les éléments importants et modulables pour aboutir sur un composant final.
03.
CONCEPTION
Suite à la synthèse des recherches, vient la création des composants et la mise en place d'un UI KIT.
Un fois conçus et déclinés, le développement commence en respectant des règles établies.
04.
FORMATION
Chaque composant comprend des règles d'application et d'utilisation (design, animations, etc.)
Les équipes France et Internationales discutent et explorent ces règles.
Couleurs
Primary
#EC008C
Darker • TAP
#D90082
Lighter • HOVER
#EA51A3
Grey 10
#FFFFFF
Grey 30
#E1E1E4
Grey 40
#C8C8CA
Grey 70
#464650
Grey 80
#22222B
Grey 100
#000000
Élévations / Ombres
Léger
Modéré
☁️
🌱
🪐
Élevé
Pour les alertes et pages modales.
ℹ️
Pour les éléments interactifs à mettre en avant (boutons, bulles informatives, etc.)
ℹ️
Pour les composants principaux sans interactivités (cartes, visuels, etc.)
ℹ️
Iconographie
Mobile
Desktop
Grilles
Typographie
HK GROTESK
Fonte Principale
Aa
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
0123456789
VP CONDENSED NEXT
Fonte Secondaire
Aa
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
0123456789
Create Component
Layout Grid
Elevations
Spacings
#Composants
Actions
Communication
Conteneurs
Navigation
Sélection
Saisies
#Templates
Preview
Name
Property
Device
All componants
282
Design System
Composants / Actions
Label
Veepee Buttons
36 variants
Label
CTA
42 variants
Label
Secondary Bu...
12 variants
Label
Labels
12 variants
CODE
Copy Code
8 variants
Icons Buttons
36 variants
Top Button
2 variants
Opinions Bu...
22 variants
App Buttons
8 variants
TEAM CRÉA
Léa L.
UX | UI
Référente
France & Inter
Émilie P.
UX | UI
Alex R.
UI Designer
DA
Azza R.
UI Designer
Animations
TEAM DEV
Greg G.
Dev
Référent
France & Inter
Johan G.
Dev Front
Valentin P.
Dev Front
Gwen L.
Creative
Developpeur
Merci l'équipe !
🚌