"Le processus design chez La Ruche Qui Dit Oui" par François Chay

François Chay
Lead designer
francois@lrqdo.fr
@francoischay

Identité La Ruche qui dit Oui !
Brief Créa
CONTEXTE
Les consomateurs commencent à refuser la commercialisation
de masse. Ils savent qu’ils paient trop chers pour des produits de
piètre qualité et que ce sont les gros industriels qui en profitent.
S’inscrire à une ruche, c’est s’émanciper de ce système. En se
procurant de meilleurs produits, le membre souhaite cuisiner ses
propres plats et mieux contrôler ce qu’il mange. La ruche fournit
la confiance et la transparence dans l’achat de produits frais. Elle
accompagne le consomateur.
Il y a deux aspects : manger mieux (bons produits, bonne cuisine)
et manger juste (meilleurs prix & rémunération).
Qualité de vie et Engagement.
La Ruche, c’est la kermesse du coin et la voisine du des-
sous, c’est quelqu’un qu’on croise et qui est notre égal, c’est
l’affichette dans la rue pour retrouver son chat. La Ruche, c’est
l’amateurisme. C’est pourquoi il faut vraiment se méfier de tout
code graphique qui pourrait paraitre trop travaillé, élitiste, sophis-
tiqué. C’est brut et honnête.
CIBLE
Famille de zone pavillonaire ayant une conscience écologique.
TON
Chaleureux, proche, convivial
Riche
Vivant
MESSAGE
Manger mieux, manger juste
PROMESSE
Vivre mieux, en accord avec soi et son environnement

Univers visuel
ENGAGEMENT AFFICHES VERNACULAIRES SÉRIGRAPHIE

chaleureuse. Détail important : ce sont 2 typos gratuites et libres de droit,
afin de permettre à tous les membres de la communauté de les utiliser pour
créer leurs propres documents.
CARACTÈRE DE TITRAGE CARACTÈRE DE LABEUR
LEAGUE GOTHIC
POUR LES TITRES
Georgia pour le texte courant.
Officiis plabo. Ut quissi optatur rem fugia
pa dolorpo stibusa voluptius mosant.
Ignime minum alitiis ius, ipsa qui
doluptatur, qui doluptae ipsae nimus
pero dolo temquo conectus.

Pour La Ruche qui dit Oui !, le système est basé sur la sérigraphie : utiliser
un nombre limité de couleur et créer les autres par des superpositions ou des
jeux de tramages.
PRINCIPE EXEMPLES D’APPLICATION

la terre, et en refusant les gimmicks des web-apps actuelles (reflets, ombres,
rubans, etc.), La Ruche qui dit Oui ! a une « patte » bien à elle.

DécLAISOnS DE FORMAtS
Logotype > Déclinaisons formats
Logo carré
Logo horizontal
Logo vertical
6
Format vertical
Format horizontal - Uniquement sur fond coloré
Format horizontal Format carré
3cm
11mm
4 cm
Cette version est utilisée en cas de besoin
spécifique lié à l’impression (sérigraphie...).
Elle peut être utilisée avec toutes les couleurs
de la gamme
VERSIOn FILAIRE
Logotype > Logo filaire
Logo générique_Filaire
Logo horizontal_Filaire
Logo vertical_Filaire
7
Cette version est utilisée en cas de besoin
spécifique lié à l’impression (sérigraphie...).
Elle peut être utilisée avec toutes les couleurs
de la gamme

RESPONSABLE
DE RUCHE
PRODUCTEUR
MEMBRE

unE “RuchE” S’ESt OuVERtE
pRèS DE chEz VOuS
DécOuVREz-LA SuR
www.laruchequiditoui.fr
pRèS DE chEz VOuS
DécOuVREz-LA SuR
pRèS DE chEz VOuS
DécOuVREz-LA SuR
pRèS DE chEz VOuS
DécOuVREz-LA SuR
pRèS DE chEz VOuS
DécOuVREz-LA SuR
pRèS DE chEz VOuS
DécOuVREz-LA SuR
FRuItS & LéguMES,
œuFS, FROMAgE,yAOuRt,
VIAnDE, VOLAILLE,
pAIn, MIEL, juS DE FRuItS...
FRuItS & LéguMES,
VIAnDE, VOLAILLE,
FRuItS & LéguMES,
VIAnDE, VOLAILLE,
FRuItS & LéguMES,
VIAnDE, VOLAILLE,
FRuItS & LéguMES,
VIAnDE, VOLAILLE,
FRuItS & LéguMES,
VIAnDE, VOLAILLE,
c’ESt gRAtuIt Et
SAnS Aucun EngAgEMEnt.
InScRIVEz-VOuS!
c’ESt gRAtuIt Et
InScRIVEz-VOuS!
c’ESt gRAtuIt Et
InScRIVEz-VOuS!
c’ESt gRAtuIt Et
InScRIVEz-VOuS!
c’ESt gRAtuIt Et
InScRIVEz-VOuS!
c’ESt gRAtuIt Et
InScRIVEz-VOuS!
pOuR SE nOuRRIR
DE BOnS pRODuItS
En DIREct DES pRODuctEuRS
DE VOtRE RégIOn.
pOuR SE nOuRRIR
DE BOnS pRODuItS
DE VOtRE RégIOn.
pOuR SE nOuRRIR
DE BOnS pRODuItS
DE VOtRE RégIOn.
pOuR SE nOuRRIR
DE BOnS pRODuItS
DE VOtRE RégIOn.
pOuR SE nOuRRIR
DE BOnS pRODuItS
DE VOtRE RégIOn.
pOuR SE nOuRRIR
DE BOnS pRODuItS
DE VOtRE RégIOn.
tRAct
version monochrome
Lorsque les tracts sont en
monochrome, on peut jouer
sur l’opacité des blocs pour
créer un rythme et de la
hiérarchie dans le document.
Tract >
Tract_Monochrome
19
Les tracts étants imprimés
sur du papier Cyclus 120 g/m2
,
qui est un papier offset,
il convient donc d’utiliser
les pantones offset (U)
tABLIERS
Pantone 1805 C Pantone 109 C
Tablier >
Tablier rouge_pantone 1805C
Tablier jaune_pantone 109C
200mm

DEVENIR UNE VRAIE WEBAPP
AVEC UNE PETITE ÉQUIPE

RESPONSABLE
DE RUCHE
PRODUCTEUR RUCHE-MAMA
MEMBRE

« JE NE VEUX PAS AVOIR À ME POSER DE QUESTIONS »
Mathieu est habitué aux marchés
dont il apprécie l’ambiance, mais il
voit bien que certains maraîchers
proposent des produits hors-saison
et en quantité suspecte. Il ne veut
pas retrouver ce sentiment de
honte qu’il a quand il va acheter des
légumes au supermarché alors qu’il
sait très bien que le système écrase
les producteurs. Il s’est bien proposé
comme bénévole dans une AMAP
mais le producteur s’est révélé
odieux et il était encore coincé pour
6 mois de navets.
Il a entendu parler de La Ruche qui
dit Oui ! et est assez séduit par le
principe mais il ne sait pas si il peut
faire confiance à internet. Mais si il
achète ses fringues, pourquoi pas ses
légumes ?
VALEURS
réservé
volontaire
informé
CE QU’IL ATTEND
avoir la conscience
tranquille
APRIL 30, 2015 4:49 PM 3
M E M B R E
MATHIEU « JE VEUX BIEN MANGER »
Yvan a la trentaine, il habite dans
une grande métropole où il a fait ses
études. L’offre culturelle et le réseau
qu’il y a développé ont fait qu’il est
resté naturellement mais il n’oublie
pas la campagne où il a grandit.
Il gagne bien sa vie et même si il
n’aime pas se l’avouer, il est très
bourgeois-bohème. Il s’engage, mais
via des pétitions en ligne, il aime
dire qu’il cuisine, mais c’est surtout
depuis Top Chef.
Il est très connecté, possède un
smartphone et une tablette en plus
de son portable.
Il sort souvent avec ses amis, du
coup il a rejoint plusieurs Ruches
pour garder une certaine flexibilité
selon ses disponibilités / son état.
Mais il s’y perd et oublie souvent de
commander.
VALEURS
épicurien
désinvesti
un peu flambeur
CE QU’IL ATTEND
pouvoir commander
rapidement et quand il
en a envie
APRIL 30, 2015 4:49 PM 4
MEMBRE
YVAN
« JE VEUX ME SAVOIR UTILE »
Caroline est dans sa trentaine,
elle a déménagée sur Paris pour
trouver du boulot mais elle n’a pas
réussi à se faire un nouveau groupe
d’ami dans cette grande ville. Ça
l’a déprimée, elle s’est sentie très
isolée mais depuis qu’elle a rejoint
sa Ruche elle s’éclate ! Toujours
volontaire pour dépanner à une
distribution, toujours partante pour
une expédition, toujours entousiaste
pour les nouvelles idées.
Elle s’investit à fond, commande
à fond, et se sent extrêmement
impliquée dans le projet. Par contre
elle commence à avoir l’impression
que c’est une relation qui ne va que
dans un sens. Elle s’investit mais
pour quel bénéfice, qui sait qui elle
est et ce qu’elle apporte ?
VALEURS
CE QU’ELLE ATTEND
partager une expérience
avec d’autres gens
donner un sens à son
implication
APRIL 30, 2015 4:49 PM 5
M E M B R E
CAROLINE
« MA CONSOMMATION DOIT SUIVRE MES CONVICTIONS »
Jacques approche de la retraite et
depuis toujours il refuse de baisser
les bras face à ce qui le révolte.
Il s’est engagé dans plusieurs
associations et a notamment fait
parti d’une AMAP pendant plusieurs
années.
Cependant, il n’aimait pas l’idée de
perdre son panier quand il était en
vacances avec ses petits-enfants, il
s’est alors inscrit dans une Ruche.
Mais attention, il ne laissera rien
passer si il sent la moindre dueperie
dans cette entreprise.
Il s’est mis à l’ordinateur pour rester
en contact avec ses enfants et s’est
surpris à aimer l’outil sans pour
autant devenir expert. Le portable et
ses ondes maléfiques ne passera pas
par lui.
VALEURS
curieux
engagé
empathique
CE QU’IL ATTEND
de la transparence et
des informations sur sa
consommation
APRIL 30, 2015 4:49 PM 6
M E M B R E
JACQUES
« MON MÉTIER, C’EST RESPONSABLE DE RUCHE »
Christine est mère de trois enfants.
Jusqu’à récemment elle donnait des
coups de main à droite à gauche
mais passait le plus clair de son
temps à s’occuper de sa famille.
Quand elle a découvert les Ruches,
elle a sauté sur l’occasion en pensant
que ça lui donnerait l’occasion
de rencontre d’autres gens et de
l’occuper un peu. Elle a pris goût à
construire sa communauté, à rentrer
en contact avec les producteurs,
elle s’est passionnée pour les enjeux
jusqu’à devenir une référence dans
sa région. Aujourd’hui elle a ouvert
deux autres Ruches, s’est organisée
pour sa famille et gère ses affaires
comme une business-woman. Ce
qu’elle est.
VALEURS
impliquée
sociale
organisée
CE QU’ELLE ATTEND
Pouvoir gérer ses
différentes ruches
S’organiser avec celles
autour
APRIL 30, 2015 4:49 PM 16
L E A D E R
CHRISTINE
« J’AI CONSTRUIT QUELQUE CHOSE »
Sophie habite dans une région rurale
et travaille à trois-quart temps
dans un cabinet médical. Elle ne
souhaitait pas exposer son jeune
enfant aux produits industriels et
s’est donc intéressée aux sources
alternatives d’approvisionnement.
Elle a décisé d’ouvrir sa Ruche et
est maintenant bien occupée. Elle
connaît tout ses membres et attache
beaucoup d’importance à ce que
tout le monde soit le plus satisfait
possible. Sa plus grande fierté ?
Avoir réussi à monter sa petite
affaire qu’elle est bien décidé à
bichonner.
VALEURS
CE QU’ELLE ATTEND
Du social plus que du
commercial !
APRIL 30, 2015 4:49 PM 15
L E A D E R
S O P H I E
« ÇA MARCHE PAS. »
Robert a 50 ans dont 30 passés en tant
qu’éleveur dans la ferme familiale (il est
la 3e génération !).
Il a fournit des AMAPs mais ça l’emmerde
de devoir tout expliquer à ces citadins.
Il vend à des supermarchés mais ça
l’emmerde de se faire exploiter par des
costumes-cravates. Il est un peu bougon.
Le concept l’a séduit même si internet
c’est pas trop son truc, il vient de
s’inscrire. Au début, il était pas sur d’être
bien inscrit mais il a proposé ses produits
à une Ruche, pour voir. Ses ventes ne
décollent pas, y a personne dans sa
Ruche et toute façons les gens achètent
quasiment rien comparé à la Biocoop.
Pourtant il fait des bons produits, y
en a des moins bons qui vendent plus,
pourquoi personne lui explique ?
Bon bah tant pis...
VALEURS
Volontaire
Méfiant
Apeuré
CE QU’IL ATTEND
Être convaincu que le
système marche
Être accompagné pour
améliorer ses affaires
APRIL 30, 2015 4:49 PM 11
PRODUCTEUR
R O B E R T
« ON M’A DIT QUE »
René n’est pas inscrit à La Ruche qui
dit Oui. D’ailleurs ça ne l’intéresse
pas.
Il fait ses légumes et après il les vend
dans des AMAPs et des Biocoop et
ça marche. Pas très bien mais ça va,
pas besoin d’enrichir encore d’autres
opportunistes. Non parceque les
bobos parisiens qui viennent se
sucrer 20% en faisant rien, il en veut
pas.
La Ruche il en a entendu parlé, il est
pas allé sur le site, mais il sait que
c’est encore rien que mecs qui se
croient plus intelligents, qui te font
payer et où toi tu gagnes rien.
En même temps, ses voisins qui
participent ont l’air content...
VALEURS
Réfractaire
Distant
Têtu
CE QU’IL ATTEND
Faire ses produits
sans avoir à jouer à la
marchande
Ne pas être poursuivi
pour rentrer dans ce
nouveau système
APRIL 30, 2015 4:49 PM 12
PRODUCTEUR
R E N É
« J’AI DES OBJECTIFS, JE DÉVELOPPE MON BUSINESS »
Issu d’une famille d’agriculteurs,
Pierre a vu ses parents se faire
écraser par les grosses corporations
internationales. Il refuse de rentrer
dans ce shéma et se dirige très
vite vers les réseaux courts en
multipliant les services.
Il a senti qu’il y avait un marché qui
existait et est bien décidé à prendre
sa part. La Ruche qui dit Oui ! lui
a d’abord permis de centraliser
toutes ses activités mais il a aussi
détourné le système en vendant les
produits de ses voisins. Il dégage
ainsi un plus grand chiffre d’affaire
tout en proposant une large gamme
de produits le plaçant comme un
producteur phare du réseau.
VALEURS
ambitieux
commerçant
malin, tendance filou
CE QU’IL ATTEND
Des outils pour gérer son
réseau de producteurs et
son large catalogue
APRIL 30, 2015 4:49 PM 10
PRODUCTEUR
P I E R R E

TRÈS MOTIVÉ
JACQUES
CAROLINE
MATHIEU
YANN
PEU MOTIVÉ
TRÈS APTEPEU APTE
FACILITATEURS
très motivé
peu apte
ÉTINCELLE
peu motivé
très apte
SIGNALEMENT
très motivé
très apte
IL 30, 2015 4:49 PM 7
IAGRAMME DE FBM
LIG
N
E
D
’ACTIO
N
TRÈS MOTIVÉ
MONIQUE
PIERRE
PEU MOTIVÉ
TRÈS APTEPEU APTE
FACILITATEURS
très motivé
peu apte
ÉTINCELLE
peu motivé
très apte
SIGNALEMENT
très motivé
très apte
ROBERT
RENÉ
APRIL 30, 2015 4:49 PM
DIAGRAMME DE FBM
LIG
N
E
D
’ACTIO
N

COOR RR TRAITE UNE DEMANDE D’OUVERTURE
A faire toutes les semaines
Analyse pertinence
de la localisation
Accueil Admin
Liste
Questionnaires
Filtre par “Area”
et “To review”
Page
Questionnaire
Va chercher la ville sur
la carte de la Home
Analyse de la motivation
et du projet
Va regarder
les distances
sur Mappy
Mail d’entretien
téléphonique
Mail d’entretien
téléphonique
Marque comme
“reviewed”
Marque comme
“reviewed”
Entretien
téléphonique
Envoi un mail
de mise en relation
entre les deux RR
Mail de refus
Mail de refus
Déjà filtré par pending
La distance
est acceptable ?
No
Yes
Le projet semble-il
toujours intéressant
No
Yes
Le projet semble-il
Yes
No
Le porteur
accepte-t-il
de changer de
localisation
Yes
No
Le projet
est intéressant
No
Yes
Est-elle proche
d’une autre Ruche
Yes
No
Est-ce qu’il y a déjà
des Ruches autour ?
Yes
No
Ruche créée
et marquée
“init”
Questionnaire
marquée comme
“validated”
Mail
d’acceptation
au porteur
Ruche créée
et marquée
“init”
Mail
d’acceptation
au porteur
Questionnaire
marquée
“refused”
Mail
de refus
au porteur
Valide
la demande
Valide
la demande
Refuse
la demande
Analyse pertinence
de la localisation
Va chercher la ville sur
la carte de la Home
Va regarder
les distances
sur Mappy
Mail d’entretien
téléphonique
Marque comme
“reviewed”
Envoi un mail
de mise en relation
entre les deux RR
La distance
est acceptable ?
No
Yes
Le projet semble-il
No
Le projet
est intéressant
No
Yes
Est-elle proche
d’une autre Ruche
Yes
Est-ce qu’il y a déjà
des Ruches autour ?
Yes
No
Questionnaire
marquée
“refused”
Mail
de refus
au porteur
Refuse
la demande

MAIN PRINCIPLES
PAGE HEADER
ACTION BAR
LAYOUT
∠ Upper level
TITLE
.page-header
The page header usually takes the context’s
color as background-color but it can be used
also to display a large picture.
.action-bar
The action bar contains action buttons,
progress bars, search, etc. that will affect what’s
in the view.
The view
The actual content of the page
∠ Distributions DISTRIBUTION DU 30 JUILLET
We don’t override the browser
back button. The back button
should only bring you to the
upper level of a top to bottom
tree. For instance:
Providers >
Provider Profile > Product
If we are in a different case, it
shouldn’t appear.
Additional info related to the view
A basic action bar contains
buttons, input and/or filters that
affects the view.
It’s placed so that the page
header bottom arrives at its
middle.
30
30
Action
Action
12
12
12 12
basic
with info
SearchSearch
SearchSearch
FORMS
MAIN COMPONENTS
Input sizes & margins
In order to be easily reached
whatever the pointing device is
(mouse or touch), every input has
to be at least 48px high
Checkbox and radio butons
Eventhough the box appears
only 18px wide, the active area
includes the 12px margin and the
label.
PlaceholderPlaceholder
PlaceholderPlaceholder PlaceholderPlaceholder
PlaceholderPlaceholder PlaceholderPlaceholder
WrongWrong
ValueValue
YeahYeah
LABEL LABEL
LABEL REQUIRED
LABEL REQ.
LABEL REQUIRED
LABEL REQ.
LABEL
LABEL
LABEL
LABEL
126
12
12
612
12
12
12
12
12
12
12
12
48
42
42
16
16
16
16
normal
:focus
error
normal
with value
disabled
success
missing
INPUT STATES
REQUIRED INPUT

normal
unselected
unselected selected
COLORS
GROUPS
WITH ICONS
.btn-success
A button that goes with a positive
action (add, validate, etc.)
.btn-group
A group of buttons is used to
alter a content (ﬁlters). You
can make it multi-choice or
single-choice.
switch
A switch is used when there’s
a choice to be made. It’s a
btn-group composed of a
btn-success and a btn-danger
.btn-danger
To use for an action with
dangerous consequences (delete).
.btn-primary
To use if a page has one main
important unique action.
just an icon
with an icon
stays the same, but we remove
background and border
.btn-block
Mostly use on mobile, the length
is not set by the inner text.
:hover
positive
:active
negative
disabled
Button
Button
BUTTON BUTTON BUTTONBUTTON BUTTON
ButtonButton
OuiOui
ButtonButton
NonNon
Button
Button
Button
Button
Button
Oui Oui
ButtonButton ButtonButtonButton
Non Non
Button
Button Button ∠
Button
18
9
18 18
9
18
18
BUTTONS
Button ButtonButtonButton
Button Button ButtonButton
normal
normal
.btn
The go-to button
MAIN PRINCIPLES
BUTTONS
TYPES
COLORS
.btn-success
A button that goes with a positive
action (add, validate, etc.)
.btn-primary
.btn-link
For a secondary action. Padding
stays the same, but we remove
background and border
.btn-lg
.btn-block
Mostly use on mobile, the length
is not set by the inner text.
.btn-sm
In some cases we can use a small
button, but the hit area must still
be 48px high. A 6px margin has
to be respected above and under
the button.
:hover
:hover
:active
no ok ok
:active
disabled
disabled
Button
ButtonButton
ButtonButton
Button
Button
Button
Button
Button
Button
Button
Button
Search Search
48
48
36px
Button
18 18
14px
17px
Button
Button
Button
12
12
12 12 1212
12
12
12
12
18
12
12
6
6
18
18
12
12
18
Minimal size
In order to be easily reached
whatever the pointing device is
(mouse or touch), every button
has to be at least 48×48px
Icons
For any size above smartphone,
never use a button with just an
icon. It’s hard to understand and
slow the interactions.
Button Button ButtonButton

Merci
ON RECRUTE
Design, dev, PM

"Le processus design chez La Ruche Qui Dit Oui" par François Chay

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to "Le processus design chez La Ruche Qui Dit Oui" par François Chay

Similar to "Le processus design chez La Ruche Qui Dit Oui" par François Chay (20)

More from TheFamily

More from TheFamily (20)

"Le processus design chez La Ruche Qui Dit Oui" par François Chay