Micro HS

La missionRefonte UX/UI d’une page d’accueil

Contexte

Micro HS propose des services de réparation et de maintenance informatique, et vend des pièces détachées.

Un projet personnel, à partir d’un brief : repenser la page d’accueil pour la rendre plus explicite, intuitive et structurée.

L’enjeu

Aujourd’hui, l’offre est difficile à comprendre, la navigation confuse et le style daté.

L’utilisateur identifie mal ce que propose Micro HS, et à qui le service s’adresse.

Audit du site actuel

J’ai commencé par un audit de la page d’accueil existante.

Constat 1

Quoi et pour qui ?Rien ne dit ce que fait Micro HS, ni s’il s’adresse aux particuliers ou aux professionnels.

Constat 2

Un mur de texteL’accueil enchaîne une vingtaine d’articles techniques, sans hiérarchie.

Constat 3

Aucune actionPas de devis ni de contact en haut de page ; une navigation de 35 liens.

Constat 4

Rien ne rassureNi avis ni références clients ; un style daté, jusqu’au compteur de visiteurs.

Ma solution

Refondre entièrement la page d’accueil pour la rendre plus moderne, en m’appuyant sur un template au design actuel.

L’objectif : qu’on comprenne en quelques secondes ce que fait Micro HS, pour qui, et comment le contacter.

Avant

Après

1. 01

   Moins de texte

   4 100 mots d’articles techniques

   Une promesse en une phrase, et des cards concises.

2. 02

   De meilleurs visuels

   Des photos de stock détourées

   Une image par service, un technicien en action, des tons de gris homogènes.

3. 03

   Une structure qui respire

   Un mur de paragraphes justifiés

   Des sections distinctes, un fond blanc, 75 px de marge intérieure dans chaque card.

4. 04

   Rassurer et faire agir

   Un compteur de visiteurs

   Partenaires, avis clients et « Demander un devis » dès l’en-tête.

Chaque choix répond à un constat de l’audit ; je les ai annotés directement dans Figma :

Ouvrir le prototype dans Figma ↗

Kit UI

Le brief fournissait un mini kit UI, libre d’utilisation. Voici les fondations et les composants de la page, redessinés ici sur fond sombre.

Couleurs

Neutral, Primary, Secondary, Success, Alerts, Custom

Neutral

Primary

Secondary

Success

Alerts

Custom

Typographie

Inter · Medium, Semibold, Bold

Style	Desktop	Mobile	Interlignage
H1	40	28	120 %
H2	32	24	120 %
H3	24	20	150 %
H4	20	18	150 %
Body L	16	16	150 %
Body M	14	14	150 %
Body S	12	12	150 %

Grille

Desktop · 1440 px

12 colonnes
marge 120 · gouttière 24

Mobile · 375 px

4 colonnes
marge 24 · gouttière 16

Iconographie

Une soixantaine d’icônes pleines

Header

Desktop et mobile

Micro HSGroupe RCS FranceDemander un devis

Micro HSGroupe RCS France

Boutons

Primary, Secondary, Tertiary et icône seule, dans leurs cinq états

	Primary	Secondary	Tertiary	Icône seule
Default	Label	Label	Label	++
Hover	Label	Label	Label	++
Pressed	Label	Label	Label	++
Focused	Label	Label	Label	++
Disable	Label	Label	Label	++

Input

Label, texte d’aide, message d’erreur, six états

Label *

Assistive text

Placeholder+

⚠ Error message

• DefaultPlaceholder+
• ActiveText|+
• FilledText+
• SuccessText+
• FailText+
• DisableText+

Link

Trois tailles, cinq états

	L	M	S
Default	Label	Label	Label
Hover	Label	Label	Label
Pressed	Label	Label	Label
Focused	Label	Label	Label
Disable	Label	Label	Label

Cards

Card image et formulaire

Title

Text

Formulaire

Label *

Placeholder+

Label *

Placeholder+

Label *

Placeholder+Label

Version mobile

La même page, adaptée au mobile.

• Les sections passent sur une seule colonne.
• Les services, les avis et les conseils deviennent des carrousels qu’on fait glisser.
• La navigation devient une barre d’onglets, en bas de l’écran.

▶ Tester le prototype mobile

Ouvrir dans Figma ↗