Contexte & enjeux

LE PROJET A POUR MISSION DE :

Gestion du projet

Web marketing

Community manager

Designer web

Développeur web

Les objectifs du projet

Mise en place de l’identité graphique de la marque.
Création d’un prototype desktop et mobile pour l’interface utilisateur.
Le site doit être responsive (mobile, tablette & desktop).


Déroulement du projet

Etape 1

Trouver un nom de marque

Avant toutes choses nous avons dû trouver un nom qui évoque la sécurité et la protection rapprochée.

Après de multiples recherches notre choix s’est porté sur le symbole de l’ours. Il peut être à la fois doux et rassurant (ourson) mais également protecteur et puissant.

En anglais, « Waybear » signifie « guide », « Way » ce traduit par « chemin » et « bear » par « ours ». 
Une fois notre nom trouvé et validé par tous les membres de l’équipe, j’ai pu m’atteler à la création de la charte graphique.

Etape 2

Création du logo et de la charte graphique

Etape 3

Création de l'arborescence

Le site sera composé de plusieurs pages. Tout d'abord, une page d'accueil, il y aura aussi une page "A propos" qui regroupera des informations pratique concernant les agents. Nous créerons ensuite en place une page "services", qui permettra de mettre en avant les différentes offrent de l'entreprise. Et pour finir une page "Aide", elle comportera une FAQ qui permettra aux utilisateurs de trouver les réponses au questions fréquemment posées.

Une fois connecté à son compte, l'internaute aura accès à une page qui lui permettra de visualiser son historique, il pourra aussi modifier son profil.

Etape 3

Réalisation des prototypes web et mobile

Pour la création des prototypes, j’ai utilisé le logiciel Adobe XD.

J’ai communiqué tout au long du processus du création avec mon équipe mais surtout avec  notre développeur Romain. Cela nous a permis de discuter de la mise en place des différentes fonctionnalités mais également de ce qui était possible de faire dans le temps imparti.

Vous trouverez ci-dessous un aperçue du prototype desktop et mobile de la page d’accueil. 

Desktop

Accueil

prototype

Mobile

Accueil

Prototype mobile
Etape 4

Mise en place d'un design system

Au cours de ce projet, j’ai mis en place un design system. 
J’ai utilisé l’application Adobe XD.

Etape 5

Intégration HTML & css

J'ai utilisé l'application Visual Studio Code qui est un éditeur de code.

HTML
CSS

Effets et conséquences du projet

Monter en compétences sur Adobe XD.

Gagner en confiance et en autonomie.

Travail d’équipe, méthode agile.