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

François ChayLead designer

[email protected]@francoischay

SE CONNAITRE

Identité La Ruche qui dit Oui !

Brief Créa

CONTEXTELes 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.

CIBLEFamille de zone pavillonaire ayant une conscience écologique.

TONChaleureux, proche, convivialRicheVivant

MESSAGEManger mieux, manger juste

PROMESSE Vivre mieux, en accord avec soi et son environnement


Univers visuel

ENGAGEMENT AFFICHES VERNACULAIRES SÉRIGRAPHIE


TypographieElle sert ici à communiquer les 2 faces du projet, l’engagement et la convivialité, avec une linéale condensée brute et une réale plus ronde et 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.


Grand principePour 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


Face aux sites de e-commerce bioEn évitant les teintes vert/bleu et le blanc pour une ambiance plus proche de 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 formatsLogo carré

Logo horizontalLogo vertical

6

Format vertical

Format horizontal - Uniquement sur fond coloré

Format horizontal Format carré

3 cm

11 mm

Tailles minimum pour l’impression

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 filaireLogo générique_FilaireLogo 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

VERSIOn FILAIRE

Logotype > Logo filaireLogo générique_FilaireLogo horizontal_Filaire

Logo vertical_Filaire

7

SE FAIRE CONNAITRE

RESPONSABLEDE RUCHE

PRODUCTEUR

MEMBRE

unE “RuchE” S’ESt OuVERtE pRèS DE chEz VOuS DécOuVREz-LA SuR

www.laruchequiditoui.fr











FRuItS & LéguMES, œuFS, FROMAgE,yAOuRt, VIAnDE, VOLAILLE, pAIn, MIEL, juS DE FRuItS...






c’ESt gRAtuIt Et SAnS Aucun EngAgEMEnt.InScRIVEz-VOuS !






pOuR SE nOuRRIR DE BOnS pRODuItS En DIREct DES pRODuctEuRS

DE VOtRE RégIOn.


DE VOtRE RégIOn.


DE VOtRE RégIOn.


DE VOtRE RégIOn.


DE VOtRE RégIOn.


DE VOtRE RégIOn.

tRActversion 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

28

200 mm

DEVENIR UNE WEBAPP

DEVENIR UNE VRAIE WEBAPP

DEVENIR UNE VRAIE WEBAPPAVEC UNE PETITE ÉQUIPE

Mangiar bene, mangiar giusto

Mangiar bene, mangiar giusto

COMPRENDRE LE TERRAIN

RESPONSABLEDE RUCHE

PRODUCTEUR

MEMBRE

RESPONSABLEDE 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 confi ance à internet. Mais si il achète ses fringues, pourquoi pas ses légumes ?

VALEURSréservévolontaireinformé

CE QU’IL ATTENDavoir la conscience tranquille

APRIL 30, 2015 4:49 PM 3

M E M B R EMATHIEU « JE VEUX BIEN MANGER »

Yvan a la trentaine, il habite dans une grande métropole où il a fait ses études. L’off re 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 fl exibilité selon ses disponibilités / son état. Mais il s’y perd et oublie souvent de commander.

VALEURSépicuriendésinvestiun peu fl ambeur

CE QU’IL ATTENDpouvoir commander rapidement et quand il en a envie

APRIL 30, 2015 4:49 PM 4

MEMBREY V A N

« 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éfi ce, qui sait qui elle est et ce qu’elle apporte ?

VALEURS

CE QU’ELLE ATTENDpartager une expérience avec d’autres gens donner un sens à son implication

APRIL 30, 2015 4:49 PM 5

M E M B R ECAROLINE

« 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éfi ques ne passera pas par lui.

VALEURScurieuxengagéempathique

CE QU’IL ATTENDde la transparence et des informations sur sa consommation

APRIL 30, 2015 4:49 PM 6

M E M B R EJACQUES

« 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 aff aires comme une business-woman. Ce qu’elle est.

VALEURSimpliquéesocialeorganisée

CE QU’ELLE ATTENDPouvoir gérer ses diff érentes ruchesS’organiser avec celles autour

APRIL 30, 2015 4:49 PM 16

L E A D E RCHRISTINE

« 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 fi erté ? Avoir réussi à monter sa petite aff aire qu’elle est bien décidé à bichonner.

VALEURS

CE QU’ELLE ATTENDDu social plus que du commercial !

APRIL 30, 2015 4:49 PM 15

L E A D E RS 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...

VALEURSVolontaireMéfi antApeuré

CE QU’IL ATTENDÊtre convaincu que le système marcheÊtre accompagné pour améliorer ses aff aires

APRIL 30, 2015 4:49 PM 11

PRODUCTEURR 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...

VALEURSRéfractaireDistantTêtu

CE QU’IL ATTENDFaire ses produits sans avoir à jouer à la marchandeNe pas être poursuivi pour rentrer dans ce nouveau système

APRIL 30, 2015 4:49 PM 12

PRODUCTEURR 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 chiff re d’aff aire tout en proposant une large gamme de produits le plaçant comme un producteur phare du réseau.

VALEURSambitieuxcommerçantmalin, tendance fi lou

CE QU’IL ATTENDDes outils pour gérer son réseau de producteurs et son large catalogue

APRIL 30, 2015 4:49 PM 10

PRODUCTEURP 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

APRIL 30, 2015 4:49 PM 7

DIAGRAMME DE FBM

LIGNE D’ACTION

TRÈS MOTIVÉ

MONIQUEPIERRE

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 13

DIAGRAMME DE FBM

LIGNE D’ACTION

COOR RR TRAITE UNE DEMANDE D’OUVERTUREA faire toutes les semaines

Analyse pertinencede la localisation

Accueil Admin ListeQuestionnaires

Filtre par “Area”et “To review”

Page Questionnaire

Va chercher la ville surla carte de la Home

Analyse de la motivation et du projet

Va regarder les distances

sur Mappy

Mail d’entretien téléphonique


Marque comme“reviewed”


Entretientéléphonique

Envoi un mailde mise en relationentre les deux RR

Mail de refus

Mail de refus

Déjà �ltré par pending

La distanceest acceptable ?

No

Yes

Le projet semble-il toujours intéressant

No

Yes


Yes

No

Le porteuraccepte-t-il

de changer de localisation

Yes

No

Le projetest intéressant

No

Yes

Est-elle proched’une autre Ruche

Yes

No

Est-ce qu’il y a déjà des Ruches autour ?

Yes

No

Ruche crééeet marquée

“init”

Questionnairemarquée comme

“validated”

Mail d’acceptation

au porteur


“init”


au porteur

Questionnairemarquée “refused”

Mail de refus

au porteur

Validela demande

Validela demande

Refusela demande

COOR RR TRAITE UNE DEMANDE D’OUVERTUREA faire toutes les semaines

Analyse pertinencede la localisation

Accueil Admin ListeQuestionnaires

Filtre par “Area”et “To review”

Page Questionnaire

Va chercher la ville surla carte de la Home

Analyse de la motivation et du projet

Va regarder les distances

sur Mappy





Entretientéléphonique

Envoi un mailde mise en relationentre les deux RR

Mail de refus

Mail de refus

Déjà �ltré par pending

La distanceest acceptable ?

No

Yes


No

Yes


Yes

No

Le porteuraccepte-t-il

de changer de localisation

Yes

No

Le projetest intéressant

No

Yes

Est-elle proched’une autre Ruche

Yes

No

Est-ce qu’il y a déjà des Ruches autour ?

Yes

No


“init”

Questionnairemarquée comme

“validated”


au porteur


“init”


au porteur

Questionnairemarquée “refused”

Mail de refus

au porteur

Validela demande

Validela demande

Refusela demande

RECUEILLIR LES REMONTÉES

PRODUIRE

COMMUNIQUER

MAIN PRINCIPLES

PAGE HEADER

ACTION BAR

LAYOUT

� Upper level TITLE

.page-headerThe page header usually takes the context’s color as background-color but it can be used also to display a large picture.

.action-barThe action bar contains action buttons, progress bars, search, etc. that will affect what’s in the view.

The viewThe actual content of the page

� Distributions DISTRIBUTION DU 30 JUILLETWe 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 > ProductIf we are in a different case, it shouldn’t appear.

Additional info related to the view state can appear in an action-bar footer.

If the action-bar is occupied by a progress bar, the actions are placed in the action-bar footer.

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.

12 items selected

12 items selected

30

30

Action

Select all

Select all

Unselect all

Unselect all

Action

12

12

12

12

12

12

12

12

12

12

12

12

basic

with info

with progress bar

Search

Search

Search

Search

Step 1

Step 1

Step 2

Step 2

Step 3

Step 3

Next step �

Next step �

FORMS

MAIN COMPONENTS

Input sizes & marginsIn 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 butonsEventhough the box appears only 18px wide, the active area includes the 12px margin and the label.

Placeholder

Placeholder Placeholder

Placeholder

Placeholder

Placeholder

Placeholder

Placeholder

Wrong

Value

Placeholder

Yeah

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

normal

normal

:focus

error

normal

checked

checked disabled

half-checked

with value

disabled

success

missing

disabled

INPUT STATES

REQUIRED INPUT

CHECKBOX STATES

RADIO STATES

A checkbox can act as an on/off button but can also reflect the state of an inferior level.This level doesn’t necessarely follow a yes/no pattern but can be part yes/part no (for instance: only half the products of a provider are selected)

On small screens, the REQUIRED mention is reduced to REQ.

Radio buttons use the same styles as the checkboxes. The only difference being they are circles.

LABEL

LABEL

LABEL

LABEL LABEL

LABEL

LABEL LABEL

LABEL

LABEL

BUTTONS

Button ButtonButton

Button Button Button

normal

normal

unselected

unselected selected

.btnThe go-to button

MAIN PRINCIPLES

BUTTONS

TYPES

COLORS

GROUPS

WITH ICONS

.btn-successA button that goes with a positive action (add, validate, etc.)

.btn-groupA group of buttons is used to alter a content (filters). You can make it multi-choice or single-choice.

switchA 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-dangerTo use for an action with dangerous consequences (delete).

.btn-primaryTo use if a page has one main important unique action.

just an icon

with an icon

.btn-linkFor a secondary action. Padding stays the same, but we remove background and border

.btn-lg

.btn-blockMostly use on mobile, the length is not set by the inner text.

.btn-smIn 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

positive

:active

no ok ok

:active

negative

disabled

disabled

Button

Button

BUTTON BUTTON BUTTON BUTTON

ButtonButton

Button

Oui

Button

Non

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Oui Oui

ButtonButton ButtonButton

Non Non

Button

�

�

� Button

� Search Search

Button �

48

48

36px

Button

18 18

14px

17px

Button

Button

Button

12

12

12 12 1212

12

12

12

12

18

12

126

6

18

18

12

12

18

Minimal sizeIn order to be easily reached whatever the pointing device is (mouse or touch), every button has to be at least 48×48px

IconsFor any size above smartphone, never use a button with just an icon. It’s hard to understand and slow the interactions.

9

18 18

9

18

18


BUTTONS

Button ButtonButton


normal

normal

unselected

unselected selected

.btnThe go-to button

MAIN PRINCIPLES

BUTTONS

TYPES

COLORS

GROUPS

WITH ICONS

.btn-successA button that goes with a positive action (add, validate, etc.)

.btn-groupA group of buttons is used to alter a content (filters). You can make it multi-choice or single-choice.

switchA 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-dangerTo use for an action with dangerous consequences (delete).

.btn-primaryTo use if a page has one main important unique action.

just an icon

with an icon

.btn-linkFor a secondary action. Padding stays the same, but we remove background and border

.btn-lg

.btn-blockMostly use on mobile, the length is not set by the inner text.

.btn-smIn 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

positive

:active

no ok ok

:active

negative

disabled

disabled

Button

Button

BUTTON BUTTON BUTTON BUTTON

ButtonButton

Button

Oui

Button

Non

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Oui Oui

ButtonButton ButtonButton

Non Non

Button

�

�

� Button

� Search Search

Button �

48

48

36px

Button

18 18

14px

17px

Button

Button

Button

12

12

12 12 1212

12

12

12

12

18

12

126

6

18

18

12

12

18

Minimal sizeIn order to be easily reached whatever the pointing device is (mouse or touch), every button has to be at least 48×48px

IconsFor any size above smartphone, never use a button with just an icon. It’s hard to understand and slow the interactions.

9

18 18

9

18

18


Merci

Merci

ON RECRUTEDesign, dev, PM