mockup image

"Huguenin Conseil"

Professional Identity for an Independent Consultant

Identité Professionnelle pour un Consultant Indépendant

Role

Rôle

Brand Identity & Web Designer · Web Designer & Developer · UX Researcher

Designer d'Identité de Marque & Web · Designer & Développeur Web · Chercheur UX

Tools

Outils

Figma (design) · HTML · CSS (development) · Hostinger (Hosting)

From Invisible to Professional

De l'Invisibilité au Professionnalisme

Turning first impressions into lasting trust

Transformer les premières impressions en confiance durable

Overview

⏮️ 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
0 online presence 0 présence en ligne difficult to recommend digitally difficile à recommander numériquement
Overview

⏭️ 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
Professional online presence Présence en ligne professionnelle improved perception & authority perception et autorité améliorées

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

user personas
user personas
user personas
Personas

🧩 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

Reassurance and tradition →
Réassurance et tradition →
I designed a classic logo mark and calm color palette to convey stability and professionalism.
J'ai conçu un logo classique et une palette de couleurs apaisante pour transmettre stabilité et professionnalisme.
Clarity and efficiency →
Clarté et efficacité →
I kept the site structure minimal and ensured a mobile-first approach, so information could be accessed quickly
J'ai gardé la structure du site minimale et assuré une approche mobile-first, pour que l'information soit accessible rapidement
Reliability and care →
Fiabilité et attention →
I emphasized clear typography, straightforward navigation, and approachable messaging to make the site feel safe and trustworthy
J'ai mis l'accent sur une typographie claire, une navigation simple et un message accessible pour rendre le site sûr et digne de confiance

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

user flow diagram
Ideate
Idéation

📘 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

Ideate
Idéation

📘 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

Typography →
Typographie →
Used Kanit for headers to convey confidence, paired with Manrope for body text to ensure readability.
Utilisation de Kanit pour les titres afin de transmettre la confiance, associé à Manrope pour le corps du texte pour assurer la lisibilité.
Color Palette →
Palette de Couleurs →
Built around dark blue (trust, professionalism) with an accent of yellow (warmth, approachability).
Construite autour du bleu foncé (confiance, professionnalisme) avec un accent de jaune (chaleur, accessibilité).
Buttons →
Boutons →
Kept bold and minimal, emphasizing clear calls to action.
Gardés audacieux et minimalistes, mettant l'accent sur des appels à l'action clairs.
Brand Mark →
Marque →
Designed a simple monogram (AH) and wordmark that scale well across digital and print contexts.
Conception d'un monogramme simple (AH) et d'un logotype qui s'adaptent bien aux contextes numériques et imprimés.
Test Test

From Design to Development

De la Conception au Développement

Delivering a live, coded solution

Livraison d'une solution codée et en ligne

Testing
Test

📘 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

mockup
Learning Apprentissage

Reflections & Learnings

Réflexions & Apprentissages

What I took away from this project

Ce que j'ai retiré de ce projet

Learnings
Apprentissages

💡 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
Home Accueil About Me À Propos Projects Projets Contact Contact
|