Learn UI/UX design by yourself - report of the week 1 // Apprendre l'UI/UX design par soi-même - bilan semaine 1 [EN/FR]

photo montage with Canva and royalty-free background image

Hello friends! I hope you are all doing very well this weekend.

In a previous post, I told you about my new projects for the year 2025. And I told you in particular about learning UI/UX design on my own.

Indeed, with @genesisledger, we are website designers for small and medium-sized businesses. However, I want to acquire new skills, because I think it always feels good to evolve and I want to develop our business. 💻

For the moment, we mainly work from mockups built by external UI/UX designers.

But ultimately, learning UI/UX design is a way for me to expand our offer. When I have acquired enough knowledge and have practiced on personal sites, we will be able to offer the creation of complete mockups for sites, in addition to their integration, development and SEO.

In short, to acquire these new skills, I had several choices: pay for an online training course, or spend time looking for free online courses (in English and French) and create a personalized program for myself.

Have you guessed which solution I chose? Of course, I took the time to look for quality courses, and most of them are in English. And then, I put together a little training program for myself. 📚

I decided to share my learnings with you every week. First of all, because it motivates me to continue and it serves as a notebook, but also because I love sharing what I learn. And I think that it might interest one of you (at least, I hope so)! 😊

In short, I started my training program this week with the “Introduction to UI/UX design” part. In this part, I will take introductory courses in design and user experience to have a solid foundation.

Design Thinking

My first courses are on Design Thinking, it is not UI/UX design strictly speaking, but it allows you to gently enter the subject. Here is what I remembered:

First of all, what is Design Thinking? Well, it is a method of designing user-centered design, to meet complex needs. It can be applied to digital design (in the case of creating a website for example), as well as to everyday objects. Moreover, design is not necessarily aesthetic, it must above all be practical, useful and easy to use.

The IDEO method

The most widely used design method is the IDEO method. It consists of 5 steps and alternates between open and closed phases.

Here are the 5 steps that make it up:

Empathy

In this open phase, you have to listen to and observe users to understand their emotions, their needs, their constraints, and what can cause them problems.

To do this, there are several ways to do it:

• Either you use the “Fly on the wall” method. That is to say, you place yourself in an observation posture, making yourself as small as possible, so as not to be noticed. The advantage is that users will act naturally and this allows you to have better results;

• Or you use the “Shadowing” method, which consists of following a person (with their consent) and becoming their shadow for a day. You will follow them in their daily life and listen to them.

To gather as much information as possible about users' needs and emotions, it is also possible to set up face-to-face interviews. This involves asking open-ended questions, focused on their emotions and feelings, with a specific goal: to get them to talk about themselves and their experiences with your product, as much as possible.

In the case of a website redesign, this involves first observing users and how they use and interact with the website. And secondly, you have to ask them how they feel.

All this allows the designer to gather personal information, experiences, emotions, and to understand the other person. He puts himself in a position of empathy.

The definition

In this closed sentence, the goal is to find a problem with all the data collected during the previous phase.

To do this, you have to start by sorting the information collected: you can first sort by major theme. Then categorize the users.

Then you need to identify the pain points: the friction points 👉 what is really causing the problem?

And from these friction points, it is possible to use the 5x why method. It consists of asking yourself why this is causing the problem, answering, then asking yourself why for each answer: all 5 times.

The problem will often appear on its own.

It must not be too broad, otherwise it will be complicated to find real solutions. It must be contained in a single sentence and evoke a real need/problem.

In the case of a website redesign, this consists of understanding what is not working and why.

Ideation (also called Brainstorming)

Phase 3, ideation is also called brainstorming. This involves bringing together several people concerned by the problem (professionals and individuals) to think together about developing a solution.

Good brainstorming is defined by the quantity of ideas and not by their quality. It is better not to censor yourself on what is feasible or not. You have to write down all the ideas, without judgment.

You have to succeed in combating functional fixity. Functional fixity is the fact of thinking that an object has only one use and not being able to imagine it otherwise. It is limiting the function to what we know.

To combat functional fixity, we can use divergent thinking. This consists of taking the problem and turning it around in all directions to look at it from a new angle. It is looking for innovative and creative solutions without setting limits.

In short, when you are faced with a problem, you have to try to think beyond the solutions that seem logical. You have to dig to find innovative solutions.

In the case of a website redesign, this involves finding ways to improve the user experience: by focusing on more qualitative content, by deploying a new graphic charter, by using more classic visuals, etc.

The prototype

Once the brainstorming is over, you have to sort the ideas to keep only a few. To do this, you can ask each participant to choose their 3 favorite solutions and classify them. You then have to analyze and explain each of the solutions: explain the needs, the constraints, the implementation, etc.

A good design is innovative, useful, understandable, sustainable and simple. If the solution meets these criteria, it is retained.

And then we can move on to the prototype phase. Here, we are in a closed phase where we will create a first prototype for the solution.

The first prototype does not need to be finished, it simply has to show what the solution will look like.

This prototype phase goes hand in hand with phase 5: testing. We will move from one to the other several times before arriving at the final solution.

For a website redesign project, the first prototype can only be a wireframe: a model drawn in pencil on a white sheet of paper with squares instead of visual elements.

The first prototype is said to be “low fidelity” 👉 Lo-fi, that is to say that it does not 100% reflect the reality of what the final solution will be.

The test

When the first prototype is ready, it is necessary to move on to the testing stage. It is necessary to submit it to users and observe their reactions. It is necessary to analyze the emotions felt and collect opinions.

The test allows the prototype to be refined.

Once this first testing phase is over, the prototype must be refined with the user data collected. The second prototype must be a little more worked on. For the redesign of a website, we are talking about a visual model with elements that correspond to reality. One of the most used tools is Figma, but there is also Adobe and Glide.

Once this second prototype is finished, it is necessary to go through a test phase to submit the solution to users. And once again, reactions, emotions and opinions are valuable, because they will allow us to continue to refine the prototype.

The third prototype can be interactive. For the redesign of a website, it can be in the form of interactive models with buttons and animations.

During the test phase of this third prototype, it is always necessary to collect opinions, but it is especially necessary to observe the way in which users interact with the solution. For a website redesign, it will be necessary to see if users navigate easily from one page to another, if they hesitate…

And thanks to all this data, it is finally time to create the final prototype. This one is called: High fidelity 👉 Hi-Fi.

Summary

This introduction to Design Thinking was quite interesting, especially to understand the construction of a solution to a complex problem. I was able to easily apply the IDEO method to my professional field (website design).

The third part of this course on Design Thinking focuses precisely on the application in the professional field, I can't wait to discover the elements that will make up this chapter.

I hope you enjoyed this little summary. 😁

See you soon,
Johanna

PS: I used Google Translate to translate the part into English.

---

Version en français

---

montage photo avec Canva et image libre de droit en fond

Hello les amis ! J’espère que vous allez tous très bien en cette fin de semaine.

Dans un précédent post, je vous ai parlé de mes nouveaux projets pour l’année 2025. Et je vous parlais notamment de celui d’apprendre l’UI/UX design par mes propres moyens.

En effet, avec @genesisledger, nous sommes concepteurs de site web pour les petites et moyennes entreprises. Cependant, j’ai envie d’acquérir de nouvelles compétences, car je pense que cela fait toujours du bien d’évoluer et que j’ai envie de développer notre entreprise. 💻

Pour le moment, nous travaillons essentiellement depuis des maquettes construites par des UI/UX designers externes.

Mais finalement, apprendre l’UI/UX design, c’est une manière pour moi d’étoffer notre offre. Lorsque j’aurai acquis suffisamment de connaissance et que je me serais entraîné sur des sites personnels, nous pourrons proposer la création de maquette complète pour les sites, en plus de leur intégration, développement et référencement.

Bref, pour acquérir ces nouvelles compétences, j’avais plusieurs choix : payer une formation en ligne, ou bien passer du temps à chercher des cours gratuits en ligne (en anglais et en français) et me créer un programme personnalisé.

Avez-vous deviné quelle solution j’ai choisi ? Bien évidemment, j’ai pris du temps pour chercher des cours de qualité, d’ailleurs, la plupart sont en anglais. Et ensuite, je me suis concocté un petit programme de formation. 📚

J’ai décidé de partager mes apprentissages avec vous chaque semaine. Tout d’abord, parce que cela me motive à continuer et que cela me sert de carnet de note, mais aussi parce que j’adore partager ce que j’apprends. Et je me dis que cela pourrait peut-être intéresser l’un ou l’une d’entre vous (en tout cas, je l’espère) ! 😊

Bref, j’ai commencé mon programme de formation cette semaine avec la partie “Introduction au UI/UX design”. Dans cette partie, je vais suivre des cours d’introduction au design et à l’expérience utilisateur pour avoir des bases solides.

Le Design Thinking

Mes premiers cours portent sur le Design Thinking, ce n’est pas de l’UI/UX design à proprement parler, mais cela permet d’entrer doucement dans le sujet. Voici ce que j’ai retenu :

Tout d’abord, qu’est-ce que le Design Thinking ? Et bien, c’est une méthode de conception du design centré sur l’utilisateur, pour répondre à des besoins complexes. Il peut s’appliquer aussi bien au design numérique (dans le cas d’une création d’un site web par exemple), qu’aux objets du quotidien.

D’ailleurs, le design n'est pas forcément esthétique, il doit surtout être pratique, utile et facile à utiliser.

La méthode IDEO

La méthode de conception du design la plus utilisée est la méthode IDEO. Elle se compose de 5 étapes et alterne entre des phases ouvertes et fermées.

Voici les 5 étapes qui la composent :

L’empathie

Dans cette phase ouverte, il faut écouter et observer les utilisateurs pour comprendre leurs émotions, leurs besoins, leurs contraintes, et ce qui peut leur causer problème.

Pour cela, il y a plusieurs manières de faire :

• Soit on utilise la méthode “Fly on the wall”. C’est-à-dire qu’on se place dans une posture d’observation, en se faisant le plus petit possible, pour ne pas se faire remarquer. L’avantage, c’est que les utilisateurs vont agir de manière naturelle et cela permet d’avoir de meilleurs résultats ;

• Soit on utilise la méthode “Shadowing”, qui consiste à suivre une personne (avec son consentement) et à devenir son ombre pendant une journée. Vous allez la suivre dans son quotidien et l’écouter.

Pour recueillir un maximum d'informations sur les besoins des utilisateurs et leurs émotions, il est également possible de mettre en place des entretiens en face to face. Cela consiste à poser des questions ouvertes, centrées sur leurs émotions, leurs ressenti, avec un but précis : les faire parler d’eux et de leurs expériences avec votre produit, le plus possible.

Dans le cas d’une refonte d’un site web, cela consiste dans un premier temps à observer les utilisateurs et leur manière d’utiliser et d'interagir avec le site web. Et dans un second temps, il faut les interroger pour avoir leur ressenti.

Tout cela permet au designer de réunir des informations personnelles, des expériences, des émotions, et de comprendre l’autre. Il se met dans une posture d’empathie.

La définition

Dans cette phrase fermée, le but est de trouver une problématique avec toutes les données récoltées lors de la phase précédente.

Pour cela, il faut commencer par trier les informations recueillies : on peut d’abord trier par grand thème. Puis catégoriser les utilisateurs.

Il faut ensuite identifier les pain points : les points de friction 👉 qu’est-ce qui pose vraiment problème ?

Et à partir de ces points de friction, il est possible d’utiliser la méthode des 5x pourquoi. Elle consiste à se demander pourquoi cela pose problème, à répondre, puis à se demander pourquoi à chaque réponse : le tout 5 fois.

La problématique va souvent apparaître toute seule.

Il ne faut pas qu’elle soit trop large, sinon il sera compliqué de trouver de réelles solutions. Il faut qu’elle tienne en une seule phrase et qu’elle évoque un réel besoin/problème.

Dans le cas d’une refonte d’un site web, cela consiste à comprendre ce qui ne fonctionne pas et pourquoi.

L’idéation (aussi appelée Brainstorming)

La phase 3, l’idéation est également appelée brainstorming. Il s’agit là de réunir plusieurs personnes concernées par la problématique (professionnels et particuliers) pour réfléchir ensemble à l’élaboration d’une solution.

Un bon brainstorming est défini par la quantité d'idées et non par leur qualité. Il vaut mieux ne pas se censurer à ce qui est réalisable ou non. Il faut poser sur papier toutes les idées, sans jugement.

Il faut réussir à combattre la fixité fonctionnelle. La fixité fonctionnelle, c’est le fait de penser qu’un objet n’a qu’une seule utilité et ne pas réussir à l’imaginer autrement. C’est limité la fonction à ce qu’on connaît.

Pour combattre la fixité fonctionnelle, on peut utiliser la pensée divergente. Cela consiste à prendre le problème et à le retourner dans tous les sens pour le regarder avec un angle inédit. C’est chercher des solutions innovantes et créatives sans se mettre de limite.

En bref, quand vous êtes confronté à une problématique, il faut essayer de penser au-delà des solutions qui paraissent logiques. Il faut creuser pour trouver des solutions innovantes.

Dans le cas d’une refonte de site web, cela consiste à trouver comment améliorer l’expérience utilisateur : en mettant l’accent sur du contenu plus qualitatif, en déployant une nouvelle charte graphique, en utilisant des visuels plus classiques…

Le prototype

Une fois que le brainstorming est terminé, il faut trier les idées pour en garder seulement quelques-unes. Pour cela, on peut demander à chaque participant de choisir ces 3 solutions préférées et de les classer. Il faut ensuite analyser et expliciter chacune des solutions : expliquer les besoins, les contraintes, la mise en place…

Un bon design est innovant, utile, compréhensible, durable et simple. Si la solution répond à ces critères, elle est retenue.

Et on peut ensuite passer la phase de prototype. Ici, on est sur une phase fermée où l’on va créer un premier prototype pour la solution.

Le premier prototype n’a pas besoin d’être abouti, il doit simplement montrer ce à quoi va ressembler la solution.

Cette phase de prototype va de pair avec la phase 5 : le test. On va passer de l’une à l’autre plusieurs fois avant d’aboutir à la solution finale.

Pour un projet de refonte de site web, le premier prototype peut être seulement un wireframe : une maquette dessinée au crayon sur une feuille blanche avec des carrés à la place des éléments visuels.

On dit que le premier prototype est “low fidelity” 👉 Lo-fi, c’est-à-dire qu’il ne reflète pas à 100% la réalité de ce que sera la solution finale.

Le test

Lorsque le premier prototype est prêt, il faut passer à l’étape du test. Il faut le soumettre aux utilisateurs et observer leurs réactions. Il faut analyser les émotions ressenties et collecter des avis.

Le test permet d’affiner le prototype.

Une fois cette première phase de test passée, il faut affiner le prototype avec les données utilisateurs recueillies. Le deuxième prototype doit être un peu plus travaillé. Pour la refonte d’un site web, on parle de maquette visuelle avec des éléments qui correspondent à la réalité. L’un des outils les plus utilisés est Figma, mais il y a aussi Adobe et Glide.

Une fois ce deuxième prototype terminé, il faut repasser par une phase de test pour soumettre la solution aux utilisateurs. Et encore une fois, les réactions, émotions et avis sont précieux, car ils vont permettre de continuer à affiner le prototype.

Le troisième prototype peut être interactif. Pour la refonte d’un site web, il peut être sous la forme de maquettes interactives avec boutons et animations.

Lors de la phase de test de ce troisième prototype, il faut toujours recueillir les avis, mais il faut surtout observer la manière dont les utilisateurs interagissent avec la solution. Pour une refonte de site web, il faudra regarder si les utilisateurs naviguent facilement d’une page à une autre, s’ils hésitent…

Et grâce à toutes ces données, il est enfin temps de réaliser le prototype final. Celui-ci est dit : High fidelity 👉 Hi-Fi.

Bilan

Cette introduction au Design Thinking était assez intéressante, notamment pour comprendre la construction d’une solution à une problématique complexe. J’ai pu facilement appliquer la méthode IDEO à mon domaine professionnel (conception de site web).

La troisième partie de ce cours sur le Design Thinking porte justement sur l’application dans le domaine professionnel, j’ai hâte de découvrir les éléments qui vont composer ce chapitre.

J’espère que ce petit résumé vous aura plu. 😁

À bientôt,
Johanna

PS : J’ai utilisé Google Traduction pour traduire la partie en anglais.