Overview

Women’s WorldWide Web (W4) est une plateforme de crowdfunding rassemblant des projets associatifs dédiés à l’émancipation des femmes dans le monde. W4 est ouvert à tous : chacun peut faire un don, investir dans un projet et créer sa campagne.

Projet

Refonte graphique et technique du site 

Client

Women’s Worldwide Web

Notre rôle

UX Design, UI Design

Brief

Problème

W4 ne proposait qu’un seul type de projet à financer : les projets associatifs. Ils sont à but non lucratif et sont créés par des associations. Or un autre type de projet mérite des campagnes de crowdfunding : les projets professionnels, des projets lancés par des entreprises à but lucratif.

Challenge

L’implémentation d’un nouveau type de projet justifiait la refonte globale du site. En plus de cet ajout fonctionnel, l’engagement des contributeurs devait être maintenu et l’incitation au don plus intuitif. Tout cela en rafraichissant l’UI existante.

Exploration

Personas

Architecture

Structure

Nous avons structuré les rubriques en trois sections : les liens principaux qui constituent le coeur du site, les liens secondaires destinés à des utilisateurs plus déterminés dans leur navigation et des raccourcis toujours acessibles.

User flows

Une fois la structure du site posée, nous avons pu établir les différents écrans nécessaires aux principales navigations des utilisateurs. Sans s’arrêter sur le détails des éléments des pages, nous avons listé les possibilités d’actions des utilisateurs et avons défini le parcours le plus intuitif.
Nous nous sommes concentrés sur les deux principales actions : le don à un projet et la création d’un projet.

Wireframing

Wireframes

Chaque bloc pensé lors des user flows est découpé en écrans liés par des interactions. Pour ne pas limiter la créativité, les sketchs sur papier sont indispensables.

UI Design

Style guide

La couleur principale de W4 était le rouge. Nous sommes repartis d’elle pour imaginer la nouvelle image du site. Dans le but de donner toute son importance au rouge, nous l’avons associé aux principales entités du site : les projets et les dons. Pour accompagner la couleur principale, nous avons coloré les autres éléments de teintes violettes.

#E75040

#5B57A5

#34344F

#46C177

Lato Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Lato Regular

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Lato Light

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Conception

Projet

La page projet est le point central du site. C’est depuis cette page que l’utilisateur passe de simple lecteur à donateur. Toutes les informations sont disposées dans le but de le sensibiliser au projet mis en oeuvre.
La page contient une zone fixe avec les informations principales du projet puis quatre onglets permettant à l’utilisateur d’aller plus loin dans les détails de la campagne.

La page Projet et ses différents onglets

Projets associatifs et entrepreneuriaux

W4 présente deux types de projets : associatifs, menés par des associations à but non lucratif, et entrepreneuriaux, poussés par des entreprises sociales.
Lors de l’exploration des projets, nous avons retranscrit cette différence : la présentation des projets associatifs est plus illustrative car elle raconte avant tout une histoire humaine alors que les projets entrepreneuriaux se concentrent sur les indicateurs financiers de la campagne.

Projets Associatifs

Projets Entrepreneuriaux

Éditeur de projet

La création de projets doit être simple, intuitive et sans zone d’ombre. La mise en place de notre éditeur favorise au maximum l’autonomie des utilisateurs dans le lancement de leur campagne.
L’éditeur est structuré en deux zones : un formulaire pour entrer les données du projet et un guide qui apporte des conseils de création de façon permanente.

Étape 01 : Informations principales

Étape 02 : Histoire

Étape 03 : Contreparties

Étape 04 : Équipe

Étape 05 : Organisation

Aperçu du projet