From Invisible to Professional
De l'Invisibilité au Professionnalisme
Turning first impressions into lasting trust
Transformer les premières impressions en confiance durable
⏮️ Before
⏮️ Avant
Armand had no professional digital presence:
Armand n'avait aucune présence numérique professionnelle :
- No logo or recognizable brand identity
- No website to showcase his services
- First impressions often felt amateur and untrustworthy
- Aucun logo ou identité de marque reconnaissable
- Aucun site web pour présenter ses services
- Les premières impressions semblaient souvent amateurs et peu fiables
⏭️ After
⏭️ Après
I designed and delivered a cohesive professional identity:
J'ai conçu et livré une identité professionnelle cohérente :
- Personal logo, consistent color palette, and font system
- Clean, coded website presenting services clearly
- Helped establish immediate credibility and trust with potential clients
- Logo personnel, palette de couleurs cohérente et système typographique
- Site web propre et codé présentant clairement les services
- A aidé à établir immédiatement la crédibilité et la confiance avec les clients potentiels
Who are we designing for?
Pour qui concevons-nous ?
Different client types, different trust signals
Différents types de clients, différents signaux de confiance
🧩 Breakdown
These three personas represent the main client groups for Hugeunin Conseil: retirees seeking reassurance, families prioritizing stability, and young professionals looking for efficiency. Their needs highlighted three priorities: trust, clarity, and accessibility - which directly shaped the brand identity and guided the website's design toward a professional, approachable, and easy-to-navigate experience.
Ces trois personas représentent les principaux groupes de clients pour Huguenin Conseil : les retraités cherchant de la réassurance, les familles privilégiant la stabilité, et les jeunes professionnels recherchant l'efficacité. Leurs besoins ont mis en évidence trois priorités : la confiance, la clarté et l'accessibilité - qui ont directement façonné l'identité de marque et orienté la conception du site web vers une expérience professionnelle, accessible et facile à naviguer.
✅ How I Applied These Insights
✅ Comment j'ai Appliqué ces Insights
From Sketch to Screen
Du Croquis à l'Écran
Exploring, testing, and refining visual directions
Explorer, tester et affiner les directions visuelles
🏡 Home Page
🏡 Page d'Accueil :
🛠️ Services Page
🛠️ Page Services
📘 Overview
I began with greyscale wireframes to quickly establish the site's structure: where key information would live, how services would be grouped, and which actions should be most visible. This stage was about clarity and functionality rather than visuals.
J'ai commencé par des wireframes en niveaux de gris pour établir rapidement la structure du site : où se trouveraient les informations clés, comment les services seraient regroupés, et quelles actions devraient être les plus visibles. Cette étape portait sur la clarté et la fonctionnalité plutôt que sur le visuel.
🧠 Decisions
🧠 Décisions
- Clarified hierarchy and navigation before visual design.
- Enabled quick comparison of layout options.
- Created a strong base for applying the identity in hi-fi designs.
- Hiérarchie et navigation clarifiées avant la conception visuelle.
- Comparaison rapide des options de mise en page facilitée.
- Base solide créée pour appliquer l'identité dans les designs haute-fidélité.
Defining the Visual Language
Définir le Langage Visuel
Creating a consistent identity across logo, typography, and colors
Créer une identité cohérente à travers le logo, la typographie et les couleurs
📘 Overview
Once the site structure was set, I defined a simple but strong style guide. The goal was to create a professional identity that felt reliable and approachable, while staying easy to maintain for a solo consultant.
Une fois la structure du site établie, j'ai défini un guide de style simple mais solide. L'objectif était de créer une identité professionnelle qui paraisse fiable et accessible, tout en restant facile à maintenir pour un consultant indépendant.
🧠 Decisions & Rationale
🧠 Décisions & Justification
From Design to Development
De la Conception au Développement
Delivering a live, coded solution
Livraison d'une solution codée et en ligne
📘 Overview
Beyond design, I coded the entire website using HTML and CSS. This allowed me to keep full control over how the identity translated into the final product. Hosting was set up to give Armand a lightweight, easy-to-maintain site that loads quickly and looks professional on any device.
Au-delà de la conception, j'ai codé l'ensemble du site web en HTML et CSS. Cela m'a permis de garder un contrôle total sur la façon dont l'identité se traduisait dans le produit final. L'hébergement a été configuré pour offrir à Armand un site léger, facile à maintenir, qui se charge rapidement et qui a un aspect professionnel sur tous les appareils.
🧠 Decisions & Rationale
🧠 Décisions & Justification
- Lightweight code equals fast loading times, mobile-friendly.
- Hosted with Hostinger, providing a lightweight, easy-to-maintain solution with fast load times and reliable uptime
- Code léger égale temps de chargement rapides, adapté aux mobiles.
- Hébergé avec Hostinger, offrant une solution légère et facile à maintenir avec des temps de chargement rapides et une disponibilité fiable
Try It Yourself
Essayez Par Vous-Même
Click to experiment with the Figma prototype
Cliquez pour expérimenter avec le prototype Figma
Reflections & Learnings
Réflexions & Apprentissages
What I took away from this project
Ce que j'ai retiré de ce projet
💡 Reflections
This project reminded me that even a small-scale assignment can have a significant impact when handled thoughtfully. With just light UX research and a clear visual strategy, I helped Armand go from having no online presence to presenting himself as a credible consultant with a trustworthy digital identity. Along the way, I learned that not every project requires deep research or complex deliverables — sometimes speed, clarity, and consistency matter most. Creating a cohesive visual identity proved how powerful design can be in shaping first impressions. Finally, coding and hosting the website myself gave me end-to-end control over the outcome. It strengthened my ability to bridge design and development, ensuring that the final site matched the vision and remained easy for the client to maintain.
Ce projet m'a rappelé que même une mission à petite échelle peut avoir un impact significatif lorsqu'elle est traitée avec soin. Avec juste une recherche UX légère et une stratégie visuelle claire, j'ai aidé Armand à passer d'aucune présence en ligne à se présenter comme un consultant crédible avec une identité numérique digne de confiance. En cours de route, j'ai appris que tous les projets ne nécessitent pas de recherches approfondies ou de livrables complexes — parfois la rapidité, la clarté et la cohérence comptent le plus. La création d'une identité visuelle cohérente a prouvé à quel point le design peut être puissant pour façonner les premières impressions. Enfin, coder et héberger le site web moi-même m'a donné un contrôle de bout en bout sur le résultat. Cela a renforcé ma capacité à faire le pont entre conception et développement, garantissant que le site final correspondait à la vision et restait facile à maintenir pour le client.
TL;DR
- Small design decisions can create big impact on credibility
- Speed and clarity sometimes matter more than deep research
- Coding strengthened my ability to bridge design and development
- Les petites décisions de design peuvent avoir un grand impact sur la crédibilité
- La rapidité et la clarté comptent parfois plus que la recherche approfondie
- Le codage a renforcé ma capacité à faire le pont entre conception et développement



