Rapport du stage

d’initiation

Effectué du 01/07/2022 à 31/07/2022

Réalisé par :
Mesbah Nada

NADA MESBAH EST GI

 Remerciement
Je profite par le biais de ce rapport, qui n’a pu voir le jour que grâce au

concours et soutien d’un grand nombre de personnes, pour exprimer mes

remerciements les plus sincères à toute personne ayant contribué de près ou de

loin à l’élaboration de ce modeste travail.

Premièrement, un grand merci au corps professoral dont la compétence et

la disponibilité font honneur à l’Est Fès. Un grand merci à cette même école

qui nous a formés, et qui a contribué à forger notre personnalité.

Je ne peux pas passer sous silence sans remercier M. Mohamed Naoufel

ENNAHIBI, le CEO et directeur de la société MOENN TECHNOLOGIES,

pour l’effort précieux qu’il a fourni afin de nous offrir un encadrement

professionnel, complet et parfait.

J’exprime tous mes remerciements pour les efforts fournis par tout

individu travaillant au sein de la société MOENN pour leur contribution durant

la période de mon stage, de leur encadrement et de leurs précieuses

informations et conseils.

NADA MESBAH EST GI

1
 Page |2

Introduction

Personne ne peut nier le rôle primordial du stage en milieu professionnel

dans notre pays. Il est considéré comme le premier contact de l’étudiant avec
l’entreprise. En effet, il assure aux stagiaires une formation de base solide et
qui leurs permet d’exploiter et approfondir sa formation en pratiquant les
compétences, les informations et les connaissances théoriques acquises durant
son cursus académique.

Le stage en milieu professionnel permet aux stagiaires d’avoir une idée

concrète sur les taches qui l’attendent dans l’avenir et aussi apprendre à être
responsables dans la vie professionnelle en les mettant en directe avec les
réalités du monde de travail.

Visant l’amélioration de la formation, l’Ecole supérieur de technologie

organise une période de stage au cours de la 1ème année pour ses étudiants afin
faire évoluer leurs compétences et qualités. Ainsi pour s’approfondir dans le
marché d’emploi et de travail. Tout cela pour permettre à ses apprenants de
tester leurs informations acquises et d’utiliser leurs idées théoriques vis à vis
l’exercice pratique.

Pour atteindre ce but, j’ai choisi la Société MOENN TECHNOLOGIES

pour passer le stage du 01 juillet 2022 au 31 juillet 2022 (1 mois). Cette période
m’a permis de recueillir des idées et enseignements utiles pour enrichir mes
connaissances, faire face à ma future vie professionnelle et valoriser mes
acquises scolaires.

NADA MESBAH EST GI

2
 Page |3

Tables des matières

Remerciement .................................................................................................................... 1
Introduction ........................................................................................................................ 2
Tables des matières ...........................................................................................................3
Table des figures ................................................................................................................4
PARTIE 1 : Présentation général de MOENN TECHNOLOGIES : ........................................ 5
I. Présentation générale : ....................................................................................................5
II. Fiche signaletique : ....................................................................................................... 6
III. L’organigramme de MOENN TECHNOLOGIES : .......................................................6
IV. L’équipe de MOENN TECHNOLOGIES : ................................................................... 8
V. Services offertes par MOENN TECHNOLOGIES : ....................................................... 9
Partie 2 : Déroulement du stage : ...........................................................................................10
VI. projet proposé : ............................................................................................................10
1. Contexte et Problématique : .......................................................................................10
2. Objectif du projet : .....................................................................................................10
3. Description du site : ................................................................................................... 12
4. Fonctionnalités : ........................................................................................................ 12
5. Arborescence du site : ................................................................................................12
Partie 3: Taches effectuées : .................................................................................................. 14
6. Ma position dans ce projet : ....................................................................................... 14
7. Les notions UX/UI : ...................................................................................................15
8. Wireframe: ................................................................................................................ 15
9. Les outils utilisés : ..................................................................................................... 17
10. Les pages réalisés : .................................................................................................. 18
Conclusion ........................................................................................................................... 29
Bibliographie ........................................................................................................................30

NADA MESBAH EST GI

3
 Page |4

Table des figures

Figure 1 : Organigramme de MOENN technologies

Figure 2 : schéma de mécanisme de DARET
Figure 3 : Arborescence du site web DARET
Figure 4 : Page d'accueil
Figure 5 : Page d'inscription
Figure 6 : Profil
Figure 7 : Rejoindre une Daret
Figure 8 : Création d'une nouvelle DARET
Figure 9 : Exemple de la page de recherche
Figure 10 : Page de messagerie
Figure 11 : Page de paiement
Figure 12 : Page de vérification de paiement

NADA MESBAH EST GI

4
 Page |5

PARTIE 1 : Présentation général de MOENN

TECHNOLOGIES :

I. PRÉSENTATION GÉNÉRALE :

MOENN TECHNOLOGIES, société de Services en Ingénierie Informatique

spécialisée dans les solutions e-business. Forte de son expertise dans les
Nouvelles Technologies de l'Information et la Communication.

MOENN accompagne les clients dans leur projets structurants :

- Conseil et Formation fonctionnel .
- Systèmes d’Information et logiciels de gestion adaptés aux besoins
spécifiques de l’entreprise.
- Web agency.
- Mise en place des systèmes de réseaux sur mesure.
- Matériel Informatique.
Elle est fidèle à la philosophie qui met le client en priorité et sommet de
ses préoccupations, MOENN technologie engage à fournir des services
complets qui feront preuve de bonne prestation et qualité.

En son actif 12 ans d’expérience et de réponse aux enjeux de ses clients,

MOENN les accompagne dans la recherche de solutions déployables,
répondant le mieux à leurs attentes. Les soft skills qui distinguent ses équipes
permettent MOENN de bâtir une communication et une relation de confiance
avec ses partenaires. Cela étant, la mise en place de ses projets est basée sur
l’écoute et l’analyse. Engagés dans le projet, au côté du client, ses équipes
déploient toute leur expertise fonctionnelle au service des projets de

NADA MESBAH EST GI

5
 Page |6

transformation digitale des métiers. Ils pilotent des missions d’aides au choix,
d’accompagnement et de maîtrise d’ouvrages.

II. FICHE SIGNALETIQUE :

Siège social : Rue Soumaya Res Shehrazade 3, 5eme Etage N° 22

Palmiers – Casablanca

Forme juridique : Société à Responsabilité - Limitée à Associé Unique

Capital : 100 000 DHs
Secteurs : Services et conseil informatiques

Taille de l’entreprise : 1-10 employés

Type : Société civile/Société commerciale/Autres types de sociétés

Fondée en : 2021.

III. L’ORGANIGRAMME DE MOENN

TECHNOLOGIES :

NADA MESBAH EST GI

6
 Page |7

Figure 1 : Organigramme de MOENN technologies

NADA MESBAH EST GI

7
 Page |8

IV. L’ÉQUIPE DE MOENN TECHNOLOGIES :

ENNAHIBI Mohamed : le CEO de l'entreprise qui nous a encadré tout au

long de la première semaine de notre stage en nous présentant l'équipe et en
expliquant les tâches et le type de travail que nous allons faire en plus d’une
introduction aux outils que nous utiliserons tout au long de notre stage.

BERRADA Ismail : l'architecte du projet qui nous a expliqué toutes les

fonctions qui devraient figurer sur ce site Web en plus de rédiger le cahier de
charge.

MIAI Salma : Elle nous a encadré et nous a donné des conseils sur notre
travail en UI/UX Design ayant elle-même déjà eu à diriger des équipes en
design et des freelances designers. Nous avions discuté de tous les processus de
design du site Web.

NADA MESBAH EST GI

8
 Page |9

V. SERVICES OFFERTES PAR MOENN

TECHNOLOGIES :

NADA MESBAH EST GI

9
 P a g e | 10

Partie 2 : Déroulement du stage :

VI. PROJET PROPOSÉ :

1. Contexte et Problématique :

Un certain nombre de personnes veulent économiser de l'argent en prévision

de crises financières, ce qui semble une meilleure alternative pour faire des
économies, échapper aux démarches administratives, aux intérêts bancaires.
C’est pour cela l’idée de « DARET » est un meilleur choix.

2. Objectif du projet :

L’objectif de ce projet était de créer un site-web qui a pour but d'économiser le

temps et l’argent des déplacements. Grâce à sa stratégie de proximité, les
utilisateurs n’ont plus à se déplacer pour remettre la cotisation au bénéficiaire.
L’utilisateur peut afficher toutes les informations concernant les statuts de
paiement des cotisations. Un système de rappel est également mis en place pour
notifier chaque utilisateur des éventuels retards liés aux paiements des
cotisations, qui rendra « DARET » plus confidentiel et fiable.

NADA MESBAH EST GI

10
 P a g e | 11

Le schéma ci-dessous décrit le mécanisme de «DARET» :

Figure 2 : Schéma du mécanisme de DARET

NADA MESBAH EST GI

11
 P a g e | 12

3. Description du site :

Ce site web permettra a un utilisateur de créer un compte ou de se loguer à

l’aide d’un compte existant, discuter, évaluer d’autre utilisateur,
envoyer/recevoir de l’argent en utilisant le mode de payement de leur choix.

4. Fonctionnalités :

- Affichage des informations et de statuts des autres utilisateurs.

- Avoir de nombreux choix de langues (arabe , français, anglais, tamazight).
- Moteur de recherche classique ou sur mesure ( le visiteur sélectionne
plusieurs filtre.
correspondant a ses besoins, le site le redirige vers service qui peut
l’intéresser) .
- Un agenda permettant de visualiser des éventements.
- Partage de liens vers les réseaux sociaux.

- Module de paiements par PAYPAL, virement bancaire.

5. Arborescence du site :

Avant de rentrer dans le détail des fonctionnalités, je vais présentez une vision
claire de la hiérarchie des pages de «DARET» :

NADA MESBAH EST GI

12
 P a g e | 13

Figure 3 : Arborescence du site

NADA MESBAH EST GI

13
 P a g e | 14

Partie 3: Taches effectuées :

6. Ma position dans ce projet :

Moi et ma collègue ENNADRI Nouayla faisions partie de

l'équipe UI/UX designer, avons dû travailler ensemble pour
réaliser ce dont nous avions discuté avec l'architecte du projet et
créer le wireframe (en utilisant Balsamiq) afin qu'il puisse le
vérifier avec nous et le confirmer afin que nous puissions
commencer notre conception d'interface (en utilisant FIGMA)
qui a été suivi par le designer MNIAI Salma.

Mme Salma a suivi tous nos progrès et nous a fait part de ses
commentaires et critiques via GMAIL ou directement lors de
notre réunion hebdomadaire via GOOGLE MEET.

Cet mission demandaient à avoir des notions en UX/UI design

ainsi qu’en graphisme pour le choix des couleurs ou la typo si le
client ne l’imposait pas. Je devais donc être capable d’utiliser et
maîtriser tous les outils utilisés par l’entreprise afin d’atteindre
les objectifs des différentes missions confiées.

NADA MESBAH EST GI

14
 P a g e | 15

7. Les notions UX/UI :

8. Wireframe:

Le Wireframe est la maquette de l’interface. C’est un schéma de la structure et

des fonctionnalités de l’application mobile ou du site. Ces maquettes, dessinées
sur du papier ou digitales, présentent un degré d’interactivité variable. Lors de
la conception d’interfaces, les wireframes sont des outils de design UX
incontournables.

Les Wireframes présente plusieurs avantages :

Optimiser la conception d’une interface avec les spécifications fonctionnelles,

NADA MESBAH EST GI

15
 P a g e | 16

sans être distrait par les éléments visuels (couleurs, logos, etc.)
Montrer la future interface de l’outil, à l’échelle réelle, aux parties prenantes et
s’accorder ainsi sur le projet web ou mobile avant le développement
Repérer les erreurs ou les problèmes – UX Design et ergonomie – pour faire
des itérations rapides, sans code ni programmation
Gagner du temps et de l’argent : le Wireframe est rapide à réaliser, peu coûteux
en ressources, flexible, et permet de réduire les révisions en phase de
développement.
Mme Salma nous a conseillé d'essayer les wireframes numériques et papier
pour trouver ce qui nous convient le mieux en plus elle nous a fortement
conseillé d'utiliser ‘BALSAMIQ’ au lieu de ‘FIGMA’ pour mieux comprendre
l'importance des wireframes.

NADA MESBAH EST GI

16
 P a g e | 17

9. Les outils utilisés :

NADA MESBAH EST GI

17
 P a g e | 18

10. Les pages réalisés :

a. Page d’acceuil :

DARET, est une pratique courante au Maroc qui présente plusieurs

problématiques liées à la gestion, c’est la raison pour laquelle on a développé
une solution qui facilite son organisation.
La page d’acceuil se compose d’une image en arrière plan qui présente le
concept du site web; l’épargne. Il y a plusieurs personnes différents ce qui
incarne l’idée que tout le monde peut participer, quel que soit leur niveau de vie.
elle est divisée en deux parties une pour l'inscription et l'autre pour se
connecter :

NADA MESBAH EST GI

18
 P a g e | 19

Figure 4 : Page d’accueil

b. Page de connexion :

La page de connexion permet à l'utilisateur de choisir la manière qui lui

convient de se connecter soit en utilisant un réseau social, soit en saisissant
son nom et son mot de passe. il y a aussi la possibilité de créer un nouveau
compte si c'est sa première fois ou de récupérer son mot de passe au cas où il
l'aurait oublié :

NADA MESBAH EST GI

19
 P a g e | 20

Figure 5 : Page de connexion

c. Page d’inscription :

La page d'inscription offre la même chose que la page de connexion,

l'utilisateur peut s'inscrire via les réseaux sociaux ou en saisissant les
informations requises dans le forum ainsi que passer à la page de
connexion si l'utilisateur est déjà membre de DARET. En plus d'accepter
toutes les déclarations en termes de service :

NADA MESBAH EST GI

20
 P a g e | 21

Figure 6 : Page d’inscription

d. Profil :

La page de profil est un peu complexe car elle a tellement de fonctions.

1- l'information de l'utilisateur qu'il choisira ce qui sera public et ce qui
restera privé, en plus de toutes les informations sur DARET et sa
fiabilité( s'il paie à temps et n'a pas de plaintes des autres utilisateurs ).
2- toutes les DARET auxquelles l'utilisateur participe lui seront visibles
sous forme de slider dans son profil et seront également visibles aux
autres utilisateurs visitant son profil.
les symboles P signifie participant et A un administrateur.

NADA MESBAH EST GI

21
 P a g e | 22

le bouton more amène l'administrateur à la page de chèque de paiement

et amène le participant à la liste de tous les autres participants dans la
DARET
3- la petite icône en bas à droite de la page amène l'utilisateur à la page
de chat.
4- la barre de navigation en haut est divisée en 4 parties:
- le logo vous ramène à la page d'accueil
- la barre de recherche comporte un filtre qui aide l'utilisateur à faciliter
sa recherche en indiquant ses besoins essentiels
-l'icône «PLUS» amène l'utilisateur à ‘CREATE A NEW DARET’ page .
- les 3 personnes avec le signe «PLUS» dans le coin icône amènent
l'utilisateur à
‘JOIN A NEW DARET’ page.
- la cloche est pour la notification et la page agenda.

Figure 7: Profil

NADA MESBAH EST GI

22
 P a g e | 23

e. Rejoindre une DARET :

JOIN DARET page est assez simple l'utilisateur doit saisir le nom d'une
DARET (s'il en cherchait une en particulier) puis choisir quelle période
de paiement lui convient le mieux, la date de démarrage de cotisation qui
cherche, le montant de l'argent qu'il veut (il peut choisir la devise
monétaire de son choix), nombre de participants qu'il recherche ( de 4 à
6 ),et quelle position il veut être dans ce DARET :

Figure 8: Rejoindre une DARET

NADA MESBAH EST GI

23
 P a g e | 24

f. Création d’une nouvelle DARET :

Cette page est fondamentalement la même que la précédente mais a une

petite option différente puisque c'est l'utilisateur qui crée la DARET il
peut ajouter les participants :

Figure 9: Création d’une nouvelle Daret

NADA MESBAH EST GI

24
 P a g e | 25

g. Exemple de la page de recherche :

Après avoir utilisé la méthode de filtrage ou simplement recherché un

nom DARET que l'utilisateur sait déjà c'est ce qu'il apparaîtra, toutes les
informations importantes sont visibles et, le bouton plus montrera à
l'utilisateur tous les autres participants et leur fiabilité pour voir si le
l'utilisateur veut rejoindre ou non, si oui, il doit attendre que
l'administrateur l'accepte. Le cercle rouge signifie que la DARET est déjà
pleine.

Figure 10: Exemple de la page de recherche

NADA MESBAH EST GI

25
 P a g e | 26

h. Page de messagerie :

Cette page est comme n'importe quelle autre page de messagerie elle est
simple et minimaliste en plus d'un bouton de signe de retour pour revenir
au profil également un bouton d'information pour vérifier toutes les
informations que vous devez savoir sur l'autre utilisateur.

Figure 11: Page de messagerie

NADA MESBAH EST GI

26
 P a g e | 27

i. Page de paiement :

Mis à part le fait que cette page de paiement demande le strict minimum
d’information (identifié comme une bonne chose), Daret s’assure que les
clients peuvent payer en utilisant deux méthodes: Paypal ou carte bancaire. En
ce qui concerne les informations de paiement, Daret va droit à l’essentiel :
numéro de carte de crédit, date d’expiration de la carte et code de sécurité
(CVV / CVC). Les pages propres et bien faites ainsi que les formulaires
simples sont une excellente manière d’éviter la friction.

Figure 12: Page de paiement

NADA MESBAH EST GI

27
 P a g e | 28

j. Page de vérification de paiement :

Cette page comme les autres suit également un schéma simple et

minimaliste, elle est composée d'un countdown informant l'administrateur
du temps qu'il reste au participant pour payer. deux boutons le vert pour
vérifier le paiement et le rouge pour déclarer que le participant n'a pas
payé à temps ce qui affectera la fiabilité de ces participants dans leur
profil et l'icône dorée est pour le tour (qui a le tour de recevoir l'argent du
mois) de plus un forum simple pour la date et le mode de paiement que le
participant a choisi en bas de page, il y a un lien pour choisir au hasard ou
au choix le participant du mois ( celui qui prendra l'argent ce mois-ci )

Figure 13: Page de vérification de paiement

NADA MESBAH EST GI

28
 P a g e | 29

Conclusion

Pour achever mon rapport, je tiens à signaler que le stage est une occasion

pour découvrir le monde professionnel et pour faire la différence entre la

théorie acquise à l’institut et la pratique dans le monde de travail, savoir

les structures et les organisations ainsi d’assister à la manifestation sur le

plan de pratique afin de s’adapter à une future responsabilité.

Cette pratique de stage s’est caractérisée par un double mouvement, l’un

c’est de savoir comment interagir avec nos supérieurs, l’autre c’est

d’exécuter le travail sérieusement et d’une façon nette.

Le stage au sein de l’organisme MOENN m’a permis de nouer des

relations et développer des compétences très riches et variées en matière

de communication. Ainsi de développer certaines qualités à savoir la

concentration et la patience.

NADA MESBAH EST GI

29
 P a g e | 30

Bibliographie

Des informations internes de l’organisme MOENN

TECHNOLOGIES.

https://moenn-technologies.com

https://www.charika.ma/societe-moenn-technologies-
972502

https://ma.linkedin.com/company/moenn-
technologies?trk=similar-pages

NADA MESBAH EST GI

30