Let's re-engineer the UX of an existing website

• the goal is to produce two wireframes: one for smarphones, and one for desktop PC/Mac

• and then to produce the smartphone mockup

• images are displayed at the bottom of this page

• this app helps a user to select the right gift depending on the profile of the personn who will receive the present

• differents criterias, to find the right gift, are suggested on the mockup

• we used pencil https://github.com/prikhi/pencil to create the html and png outputs

• the buttons on the html mockup are the dynamic parts i.e. they link the different pages

Re-ingénierie de l'UX d'un site existant

• L'objectif est de produire les wireframes: une pour smarphone, et une pour PC de bureau / Mac

• Et ensuite de proposer une maquette de smartphone

• il y a des images à la fin de ce document

• Cette future application Web aidera l'utilisateur à sélectionner le bon cadeau en fonction du profil de la personne qui reçoit le cadeau

• Différents critères, pour afficher les bons cadeaux, sont proposés sur la maquette

• Nous avons utilisé le logiciel Pencil https://github.com/prikhi/pencil pour créer la sortie html et les .png

• Les boutons de la maquette html sont les parties dynamiques, c'est-à-dire qu'ils relient les pages de l'application Web

Users story

Le design est basé sur les users story (méthode agile) suivants:

• En tant qu'utilisateur, je veux pouvoir accéder à un catalogue d'idées cadeaux.

• En tant qu'utilisateur, je veux pouvoir filtrer les idées en répondant à un questionnaire centré sur le destinataire du cadeau.

• En tant qu'utilisateur, je veux évaluer la pertinence d'une idée cadeau afin d'améliorer les résultats du filtrage.

• En tant qu'utilisateur, je veux accéder à des sites vendant les idées cadeaux qui me plaisent.

• En tant qu'utilisateur, je veux proposer une nouvelle idée cadeau.

• En tant qu'administrateur, je veux valider ou supprimer une proposition d'idée cadeau afin qu'elle soit ajouter ou non dans le catalogue.

• En tant qu'administrateur, je veux ajouter des idées au catalogue.

• En tant qu'administrateur, je veux associer des sites commerçant à chaque idée du catalogue.

Ce travail est basé sur un cours de Jérémie Pardou https://github.com/jrmi

Wireframes

• For smartphones

• For desktop

Mockups / maquettes statiques

ps: le mockup dynamique est disponible en téléchargeant le repertoire cadeaux, et en ouvrant le fichier index.html: https://github.com/pifpafpof-thomasL/Frontend-mockup-cadeau-existing-website/tree/master/cadeaux

Aperçus: