UX/UI Design,
Développement front-end

Learning Across Borders (LAB)

Janvier 2019

Learning Across Borders (LAB) est un organisme éducatif à but non lucratif proposant un programme destiné aux étudiants et aux éducateurs de divers pays de la région Asie-Pacifique. Le projet consistait à re-concevoir leur site Web et à le rendre plus fonctionnel, facile à naviguer et en le gardant conforme à la marque. Par ailleurs, le client désirait y intégrer une partie média incluant des vidéos, une carte présentant les écoles partenaires ainsi que des liens vers les réseaux sociaux.

Le challenge: reconcevoir le site en le rendant fonctionnel et facile à naviguer

 

Les utilisateurs du site étant pour la plupart des étudiants et des éducateurs issuent d’écoles de l’ASEAN et d’Asie, la première approche était de concevoir un site simple (une page défilante) pour que l’utilisateur puisse avoir une vision globale et une idée rapide de ce qu’est et ce que propose LAB. De plus, les informations présentées étant relativement peu nombreuses, la navigation entre les sections du site en faisant défiler la page de haut en bas m’a semblé être la meilleure.

L’intégration de nouveaux éléments au site tels que des vidéos, une carte interactive, des liens vers les réseaux sociaux … m’ont permis de structurer la page en sections distinctes donnant une lisibilité claire du site à l’utilisateur.

Ancien site

Nouveau site entièrement reconçu

Concevoir le site en gardant l’identité de la marque

Après avoir collecté les contenus du client (logo, images …), j’ai présenté différents essais de polices à utiliser pour le site. Mes choix se sont basés sur la police du logo existant et sur le guide de l’organisation présenté dans le site. Je voulais en effet garder une homogénéité entre les textes présents dans le site. Nous nous sommes mis daccord avec le client sur la meilleure combinaison de polices à implémenter.

Pour les couleurs, je suis également parti sur les celles du logo qui sont l’identité de la marque. Le vert du logo étant agressif visuellement et ne désirant pas avoir un fond blanc basique et fade, j’ai proposé une variante pâle de cette couleur verte en fond de page afin de ressortir les textes et les images.

Enfin, l’objectif principal du site étant de permettre aux étudiants et éducateurs de s’inscrire au programme de l’organisation, j’ai conçu les boutons d’inscription en les plaçant à divers endroits visuellement accessibles (haut de page, à côté du formulaire de contact …) et en contrastant la couleur (orange par rapport au vert) pour un effet optimal.

Essais sur différentes polices d’écriture

Schéma des couleurs utilisées

Menu de navigation de la page avec bouton d’inscription

Pied de page incluant liens vers réseaux sociaux

Essais sur différentes polices d’écriture

Schéma des couleurs utilisées

Menu de navigation de la page avec bouton d’inscription

Pied de page incluant liens vers réseaux sociaux

Améliorations apportées au site

 

Un élement qui me semble primordial et qui manquait dans le site précédant était la présence d’un formulaire de contact. Il est en effet important de permettre à l’utilisateur de pouvoir contacter le responsable de l’organisation en cas de questions ou demandes particulières.

Dessinant les premiers sketches et ayant désormais une bonne idée du site à créer, j’ai utilisé Adobe XD pour présenter et valider les designs avec le client.

Durant le développement du site que j’ai réalisé avec WordPress, j’ai également implémenté plusieurs codes et données pour améliorer le classement du site dans les moteurs de recherches et permettre une meilleure visibilité du site la toile.

Formulaire de contact

Apparence de recherche sous Google

CONTACTEZ MOI

Phone  +66 81 817 2562

Baan Chan Condo, Thonglor 20, Sukhumvit 55, Klongon Nua, Wattana, 10110 Bangkok, Thailand
(uniquement sur rendez-vous)



 
 

 
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

 

Baan Chan Condo, Thonglor 20, Sukhumvit 55, Klongon Nua, Wattana, 10110 Bangkok, Thailand
(uniquement sur rendez-vous)






This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.