Affichage de 3 résultat(s)
office-max

Application web, gestion de devis pour une agence web

Crédit photo de couverture : Tookapic / Pixabay

Première page du backoffice (lorsqu’on arrive dessus, page index)

Présentation du projet

Il s’agit du projet sur lequel j’ai travaillé au sein de BGS Associés, une agence digitale / Entreprise de Services du Numérique (ESN) parisienne, avec le Framework Symfony. Cette agence réunit une équipe à taille humaine (soit 11 professionnels).

Une application web de gestion de devis (application métier), qui se divise en deux parties :

  • côté administrateur : un backoffice de gestion des produits et des devis,
  • côté « prospect » (ou lead) = visiteur du site de l’agence : un formulaire rassemblant les informations pour générer le devis

Cette application web permettra notamment à l’agence de récupérer des données afin de continuer à développer sa clientèle. Voici les étapes de ma démarche :

Conception de l’interface

  • Définition et analyse des besoins utilisateurs (briefing)
  • Réalisation d’une analyse benchmark de formulaires de devis d’agences web
  • Définition du parcours utilisateur
  • Identification des fonctionnalités à mettre en place
  • Réalisation des wireframes

Exemples de wireframes avec Adobe XD

Développement

  • Choix des technologies utilisées et adaptées à la durée du projet
  • Modélisation de la base de données
  • Mise en place de la sécurité
  • Exploitation de la documention Symfony et veille technologique
  • Recherches et résolution de problèmes sur des sites fiables bilingues
  • Tests

Parcours utilisateur – côté backoffice

  • Se connecter
  • Accéder au backoffice : différentes pages Produits / Options / Devis
  • Ajouter/supprimer des produits et des options
  • Modifier les produits (y associer des options) et les options (noms des options, tarifs)
  • Accéder aux demandes de devis
  • Consulter un devis
  • Se déconnecter

Examples d’écrans du backoffice

  • Ecran de connexion
  • Homepage
  • Page des produits
  • Page des options

ecrans-app BGS-earnaud
table-mountain-max

Travel website & blog

Crédit photo de couverture : Justasurferdude / Pixabay

Apparition du menu (JavaScript/jQuery)

travel-blog-exemple

Exemple de page d’accueil desktop pour un site/blog de voyage

Technologies utilisées : html, CSS, Bootstrap, JavaScript/jQuery

Visuels utilisés pour cette réalisation :

Crédit photos : « Bryce Canyon » by StockSnap/Pixabay , « Safari Elephants » by Pexels /Pixabay, « La Havane, Cuba » by hoeldino / Pixabay

dating-site-max

AppyLove

Crédit photo de couverture : athree23 / Pixabay

Première page du site (lorsqu’on arrive dessus, page index)

Présentation du projet

  • Quoi ? Aaah ❤️ Appy Love ❤️ Vous avez deviné ? Il s’agit d’un site de rencontres 🙂 réalisé en équipe >> lien du projet sur Github <<
  • La principale fonctionnalité développée du site a été la mise en place d’une conversation (ou chat) privée
  • Qui ? Nous étions 4 développeuses web junior
  • Pourquoi ? Trouver l’amour en ligne ce n’est pas nouveau. Ceci étant dit, devant l’ampleur de la crise sanitaire de 2020, à l’heure du télétravail, des entretiens d’embauche en visio, chercher son âme sœur demande également de s’adapter, voire c’est devenu un vrai challenge. On ne peut plus se rencontrer dans les mêmes conditions, en personne ! C’est dans ce contexte que s’est placé notre projet, que nous avons trouvé, ainsi, encore plus d’actualité.

Technologies utilisées

  • le framework Symfony
  • HTML5/CSS3
  • Bootstrap
  • JavaScript/jQuery
  • MySQL, PHPMyAdmin
  • PHP Storm, l’éditeur de texte pour PHP

Gestion de projet web

  • Trello, gestion de projet en ligne (planning des tâches)
  • GitHub pour gérer les différentes versions du code (versioning ) à plusieurs

Les étapes du parcours utilisateur et fonctionnalités du site

  1. Inscription
  2. Connexion
  3. Affichage des profils inscrits
  4. Possibilité de modifier son avatar = son profil et mot de passe
  5. Recherche et sélection d’un profil selon ses intérêts
  6. Accès à un chat privé et historique de conversation
  7. Déconnexion

(Voir captures d’écran ci-après)

Méthodologie

  • Analyse Benchmarking : Sites comparés : Meetic, Cupid, Lovoo, Tinder, AdopteunMec, Elite rencontre, Fiesta, Stradivarius
  • Réflexions sur l’interface et le parcours utilisateur
    • Approches UX – UI Design
    • Création des wireframes
  • Choix graphiques 
    • Intégration des templates : Roxy, Message chat box, navbar with profile
    • Site du logo :  “https://fr.freelogodesign.org”
  • Création du modèle
    • Réflexion et modélisation du système de base de données
    • Création de la base avec cmder (console) /Symfony
  • Production
    • Lancement du projet Symfony
    • Développement des fonctionnalités dans une conceptualisation Orientée Objet et une architecture MVC
    • Ecriture des lignes de code sous PHP Storm

Captures d’écran

appylove_inscription
appylove_inscription_error
appylove_inscription_ok
appylove_member_accueil
appylove_member_hobby
appylove_member_avatar
appylove_member_profile_edit
appylove_member_profile_updated
appylove_member_profile_mdp_edit
appylove_conversation_rep
appylove_conversation_historique