chore(user-experience): compress quests down to a single subject and audit

subjects/user-experience/piscine-ui/atomic-design/README.md

@@ -0,0 +1,184 @@
+## Atomic Design system library
+
+### Instructions
+
+Copy 10 elements from easyJet design system, including:
+
+- atoms.
+- molecules.
+- organisms.
+
+**Deliverable:**
+
+- A Figma file including 10 elements from easyJet design system .
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- You can use Avenir Book instead of easyJet’s font.
+- Explore Noun Project to get icons.
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
+## Browsing
+
+**Context:**
+
+Welcome to the 2nd quest of UI!
+
+This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design.
+
+### Instructions
+
+Among these 4 websites, make snapshots of these elements:
+
+- 1 template.
+- 1 organism.
+- 1 molecule.
+- 1 atom.
+
+**Websites:**
+
+- Alibaba.
+- Booking.com.
+- Easyjet App.
+- Interrail.
+
+### Deliverables
+
+- A Figma file with 4 pages.
+- On each page, a screenshot of a template, an organism, a molecule and an atom.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
+- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+- [Example here](https://www.figma.com/file/fzqDkk8Zc8qJCiSMbKV0Ei/UI-II---Ex-1?node-id=0%3A1)
+
+**Quote:**
+
+- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.
+## Library for a dating app
+
+### Instructions
+
+You are asked to design a dating app.
+
+Based on a moodboard you have composed, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates.
+
+### Deliverables
+
+- A Figma file with a moodboard for a dating app including:
+
+  - Pictures.
+  - Colors (2 to 3 main colors).
+  - Typography.
+
+- A Figma file with a library including:
+
+  - At least 20 graphic design elements.
+  - At least one atom.
+  - At least one molecule.
+  - At least one organism.
+  - At least 5 multistate elements.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Let’s be creative! Get inspiration from visuals before diving in.
+- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
+- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
+- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
+- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)
+## Library for climbing addicts
+
+### Instructions
+
+You are part of a climbing group and volunteer to rebrand the website of your club.
+
+Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms and include multistates.
+
+### Deliverables
+
+- A Figma file with a moodboard for a climbing group including:
+
+  - Pictures.
+  - Colors (2 to 3 main colors).
+  - Typography.
+
+- A Figma file with a library including:
+
+  - At least 20 graphic design elements.
+  - At least one atom.
+  - At least one molecule.
+  - At least one organism.
+  - At least 5 multistate elements.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Let’s be creative! Get inspiration from visuals before diving in.
+- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
+- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
+- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
+- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)
+## Material Design
+
+### Instructions
+
+Download [this image](https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_02.jpg) which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set.
+
+### Deliverables
+
+- A Figma file with the image.
+- On each screen, indicate the layers order with numbers. 1 being the background image, 2 the element right on top, etc.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- 2 numbers can be switched as long as the layering of layers is respected.
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Material Design Awards 2019](https://design.google/library/material-design-awards-2019/)
+- [What is Material Design - Wikipedia](https://en.wikipedia.org/wiki/Material_Design)

subjects/user-experience/piscine-ui/atomic-design/atomic-design-system-library/README.md

@@ -1,28 +0,0 @@
-## Atomic Design system library
-
-### Instructions
-
-Copy 10 elements from easyJet design system, including:
-
-- atoms.
-- molecules.
-- organisms.
-
-**Deliverable:**
-
-- A Figma file including 10 elements from easyJet design system .
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- You can use Avenir Book instead of easyJet’s font.
-- Explore Noun Project to get icons.
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)

subjects/user-experience/piscine-ui/atomic-design/browsing/README.md

@@ -1,49 +0,0 @@
-## Browsing
-
-**Context:**
-
-Welcome to the 2nd quest of UI!
-
-This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design.
-
-### Instructions
-
-Among these 4 websites, make snapshots of these elements:
-
-- 1 template.
-- 1 organism.
-- 1 molecule.
-- 1 atom.
-
-**Websites:**
-
-- Alibaba.
-- Booking.com.
-- Easyjet App.
-- Interrail.
-
-### Deliverables
-
-- A Figma file with 4 pages.
-- On each page, a screenshot of a template, an organism, a molecule and an atom.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
-- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
-- [Example here](https://www.figma.com/file/fzqDkk8Zc8qJCiSMbKV0Ei/UI-II---Ex-1?node-id=0%3A1)
-
-**Quote:**
-
-- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.

subjects/user-experience/piscine-ui/atomic-design/library-for-a-dating-app/README.md

@@ -1,41 +0,0 @@
-## Library for a dating app
-
-### Instructions
-
-You are asked to design a dating app.
-
-Based on a moodboard you have composed, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates.
-
-### Deliverables
-
-- A Figma file with a moodboard for a dating app including:
-
-  - Pictures.
-  - Colors (2 to 3 main colors).
-  - Typography.
-
-- A Figma file with a library including:
-
-  - At least 20 graphic design elements.
-  - At least one atom.
-  - At least one molecule.
-  - At least one organism.
-  - At least 5 multistate elements.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- Let’s be creative! Get inspiration from visuals before diving in.
-- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
-- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
-- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
-- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)

subjects/user-experience/piscine-ui/atomic-design/library-for-climbing-addicts/README.md

@@ -1,41 +0,0 @@
-## Library for climbing addicts
-
-### Instructions
-
-You are part of a climbing group and volunteer to rebrand the website of your club.
-
-Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms and include multistates.
-
-### Deliverables
-
-- A Figma file with a moodboard for a climbing group including:
-
-  - Pictures.
-  - Colors (2 to 3 main colors).
-  - Typography.
-
-- A Figma file with a library including:
-
-  - At least 20 graphic design elements.
-  - At least one atom.
-  - At least one molecule.
-  - At least one organism.
-  - At least 5 multistate elements.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- Let’s be creative! Get inspiration from visuals before diving in.
-- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
-- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
-- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
-- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)

subjects/user-experience/piscine-ui/atomic-design/material-design/README.md

@@ -1,25 +0,0 @@
-## Material Design
-
-### Instructions
-
-Download [this image](https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_02.jpg) which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set.
-
-### Deliverables
-
-- A Figma file with the image.
-- On each screen, indicate the layers order with numbers. 1 being the background image, 2 the element right on top, etc.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- 2 numbers can be switched as long as the layering of layers is respected.
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Material Design Awards 2019](https://design.google/library/material-design-awards-2019/)
-- [What is Material Design - Wikipedia](https://en.wikipedia.org/wiki/Material_Design)

subjects/user-experience/piscine-ui/building-an-interface/README.md

@@ -0,0 +1,180 @@
+## Design screens
+
+### Instructions
+
+Based on the wireframes and your design system library, take your mid-fidelity prototype to a high-fidelity level!
+
+Select 5 screens that will show the user flow of a customer who:
+
+- Arrives on the homepage.
+- Browses the content.
+- Checks one product page.
+- Adds the product to the cart.
+- Checks out.
+
+Use your components, call to actions and visuals to complete the wireframes.
+
+### Deliverables
+
+- 5 high-fidelity screens from Figma.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Unsplash](https://unsplash.com/) for visuals
+- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html)
+## Design system library
+
+### Instructions
+
+Based on the moodboard you designed in the previous exercise "Styleguide", create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates.
+
+### Deliverables
+
+- A Figma file with a library including:
+
+  - At least graphic design 30 elements.
+  - At least 5 atoms.
+  - At least 5 molecules.
+  - At least 5 organisms.
+  - At least 10 multistate variations.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Start by asking yourself what key elements may appear in an e-commerce app.
+- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [FIGMA FILE (to duplicate)](https://www.figma.com/file/U26mctkrOqxiUeAlNHzSxW/UI-IV---Ex-3---E-COMMERCE%3A-Design-screens!?node-id=0%3A1)
+- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
+- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
+- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
+- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)
+## Desirability testing
+
+### Instructions
+
+Run a desirability test!
+
+The point of this phase is to make sure the values and the spirit you chose for your design.
+
+- Get back to the values and spirit you chose in the "Styleguide" exercise and extract 2 to 5 adjectives.
+- Prepare a board with 25+ adjectives, randomly distributed.
+- Show your design to 5 different people, and ask them to select the adjectives among the list from the board that they are inspired with.
+- If the selected adjectives chosen by the users are consistent with the ones you had chosen, congratulations!
+- If the selected adjectives chosen by the users are not consistent, that’s fine! Make 3 suggestions about how to make your moodboard and library evolve.
+
+### Deliverables
+
+- A desirability testing board with 25+ different adjectives.
+- Pictures from the desirability test.
+- A PDF document with the outcomes of the desirability test.
+- If the outcomes are not consistent with the values, 3 suggestions on how to make the moodboard and design library evolve.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Avoid confirmation biais: don’t tell them the values and ask them to approve them!
+- Good to know: Desirability testing is great to assess the impressions a design gives to the users. Whereas Usability testing is great to understand what users understand your prototype and how they navigate across the product.
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Desirability Testing analyzing an emotional response to a design](https://www.slideshare.net/megangrocki/desirability-testing-analyzing-emotional-response-to-a-design-11262575)
+
+**Quote:**
+
+- "Interaction design focuses on the design of behavior of a person’s interaction with a digital interface. It is also concerned with satisfying the needs and desires of the people who will interact with a product or service.’ Alan Cooper, About Face: The Essentials of Interaction Design
+## second Animation
+
+### Instructions
+
+Animate your 5 screens on Figma. Think about multistate!!
+
+**Deliverable:**
+
+- An animated high-fidelity prototype on Figma.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
+
+**Quote:**
+
+"Speak human: Use the words your users use.’ Dan Saffer | Microinteractions.
+## Styleguide
+
+**Context:**
+
+In this quest, you’ll have to build your own interface.
+
+After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype.
+
+The very last step will be to test it on users to detect the impressions they get when they discover your app.
+
+Once again, feel free to get as much inspiration as you need from existing design systems. Dribble, consistency and structure are your best friends!
+
+### Instructions
+
+Your agency works on a digital product to create an e-commerce app for second-hand electronic devices. You collaborate with a UX designer from your team. They have designed the wireframes and pass it on to you!
+
+Design a style guide (= a moodboard with typography + examples of typography with buttons, title, description and content).
+
+Also think about the values and spirit you want to spread through this moodboard, we’ll get back to it in exercise "Desirability Testing".
+
+### Deliverables
+
+- A Figma moodboard that includes:
+
+  - Pictures
+  - 2 to 3 main colors
+  - Examples of typography applied to graphic elements:
+
+    - Title
+    - Description or subtitle
+    - Content
+    - Button
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+- [Example of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/)

subjects/user-experience/piscine-ui/building-an-interface/design-screens/README.md

@@ -1,33 +0,0 @@
-## Design screens
-
-### Instructions
-
-Based on the wireframes and your design system library, take your mid-fidelity prototype to a high-fidelity level!
-
-Select 5 screens that will show the user flow of a customer who:
-
-- Arrives on the homepage.
-- Browses the content.
-- Checks one product page.
-- Adds the product to the cart.
-- Checks out.
-
-Use your components, call to actions and visuals to complete the wireframes.
-
-### Deliverables
-
-- 5 high-fidelity screens from Figma.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Unsplash](https://unsplash.com/) for visuals
-- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html)

subjects/user-experience/piscine-ui/building-an-interface/design-system-library/README.md

@@ -1,34 +0,0 @@
-## Design system library
-
-### Instructions
-
-Based on the moodboard you designed in the previous exercise "Styleguide", create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates.
-
-### Deliverables
-
-- A Figma file with a library including:
-
-  - At least graphic design 30 elements.
-  - At least 5 atoms.
-  - At least 5 molecules.
-  - At least 5 organisms.
-  - At least 10 multistate variations.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Start by asking yourself what key elements may appear in an e-commerce app.
-- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [FIGMA FILE (to duplicate)](https://www.figma.com/file/U26mctkrOqxiUeAlNHzSxW/UI-IV---Ex-3---E-COMMERCE%3A-Design-screens!?node-id=0%3A1)
-- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
-- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
-- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
-- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)

subjects/user-experience/piscine-ui/building-an-interface/desirability-testing/README.md

@@ -1,39 +0,0 @@
-## Desirability testing
-
-### Instructions
-
-Run a desirability test!
-
-The point of this phase is to make sure the values and the spirit you chose for your design.
-
-- Get back to the values and spirit you chose in the "Styleguide" exercise and extract 2 to 5 adjectives.
-- Prepare a board with 25+ adjectives, randomly distributed.
-- Show your design to 5 different people, and ask them to select the adjectives among the list from the board that they are inspired with.
-- If the selected adjectives chosen by the users are consistent with the ones you had chosen, congratulations!
-- If the selected adjectives chosen by the users are not consistent, that’s fine! Make 3 suggestions about how to make your moodboard and library evolve.
-
-### Deliverables
-
-- A desirability testing board with 25+ different adjectives.
-- Pictures from the desirability test.
-- A PDF document with the outcomes of the desirability test.
-- If the outcomes are not consistent with the values, 3 suggestions on how to make the moodboard and design library evolve.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- Avoid confirmation biais: don’t tell them the values and ask them to approve them!
-- Good to know: Desirability testing is great to assess the impressions a design gives to the users. Whereas Usability testing is great to understand what users understand your prototype and how they navigate across the product.
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Desirability Testing analyzing an emotional response to a design](https://www.slideshare.net/megangrocki/desirability-testing-analyzing-emotional-response-to-a-design-11262575)
-
-**Quote:**
-
-- "Interaction design focuses on the design of behavior of a person’s interaction with a digital interface. It is also concerned with satisfying the needs and desires of the people who will interact with a product or service.’ Alan Cooper, About Face: The Essentials of Interaction Design

subjects/user-experience/piscine-ui/building-an-interface/second-animation/README.md

@@ -1,26 +0,0 @@
-## second Animation
-
-### Instructions
-
-Animate your 5 screens on Figma. Think about multistate!!
-
-**Deliverable:**
-
-- An animated high-fidelity prototype on Figma.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
-
-**Quote:**
-
-"Speak human: Use the words your users use.’ Dan Saffer | Microinteractions.

subjects/user-experience/piscine-ui/building-an-interface/styleguide/README.md

@@ -1,48 +0,0 @@
-## Styleguide
-
-**Context:**
-
-In this quest, you’ll have to build your own interface.
-
-After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype.
-
-The very last step will be to test it on users to detect the impressions they get when they discover your app.
-
-Once again, feel free to get as much inspiration as you need from existing design systems. Dribble, consistency and structure are your best friends!
-
-### Instructions
-
-Your agency works on a digital product to create an e-commerce app for second-hand electronic devices. You collaborate with a UX designer from your team. They have designed the wireframes and pass it on to you!
-
-Design a style guide (= a moodboard with typography + examples of typography with buttons, title, description and content).
-
-Also think about the values and spirit you want to spread through this moodboard, we’ll get back to it in exercise "Desirability Testing".
-
-### Deliverables
-
-- A Figma moodboard that includes:
-
-  - Pictures
-  - 2 to 3 main colors
-  - Examples of typography applied to graphic elements:
-
-    - Title
-    - Description or subtitle
-    - Content
-    - Button
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
-- [Example of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/)

subjects/user-experience/piscine-ui/colors-and-moodboard/README.md

@@ -0,0 +1,417 @@
+## Color codes
+
+### Instructions
+
+Go to these 7 websites and make the color palettes out of them (3 to 4 main colors).
+
+**Deliverable:**
+
+- A Figma file including screenshots of the main page, URL, extracted colors and the matching color codes.
+
+Don't forget to :
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- You can use the document from the previous exercise to add the color codes on Figma.
+- Use the Color Pipette to detect the color codes!
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+
+- [https://www.komoot.com/](https://www.komoot.com/) (App)
+- [https://www.airtable.com/](https://www.airtable.com/)
+- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas)
+- [https://www.jrpass.com/](https://www.jrpass.com/)
+- [https://www.thesiff.com/](https://www.thesiff.com/)
+- [https://brave.com/es/](https://brave.com/es/)
+- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)
+## Color combinations
+
+### Instructions
+
+Let's browse!
+
+Find 3 digital products (websites or apps) that use each kind of color palette combination:
+
+- Monochromatic
+- Analogous
+- Complementary
+- Split complementary
+- Triadic
+- Double complementary
+
+You need 3 websites or apps per color palette combination!
+
+**Deliverable:**
+
+- A Figma file including for each digital product (websites or apps):
+
+  - screenshots of the main page.
+  - the matching URL.
+  - the main colors.
+  - the kind of color combination.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- You can find HSB (Hue, Saturation, Brightness) as well as HSV (Hue, Saturation, Value) depending of the source.
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/](https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/)
+- ![Color wheel combinations](Resource.png)
+
+**Example:**
+
+**Monochromatic:**
+
+- [https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/)
+- [http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/)
+- [http://blank.com.pt/](http://blank.com.pt/)
+
+**Analogous:**
+
+- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/)
+- [https://campesinorum.com/](https://campesinorum.com/)
+- [https://www.lobster.es/](https://www.lobster.es/)
+
+**Complementary:**
+
+- [https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr)
+- [https://squilla.io/](https://squilla.io/)
+- [https://gomim.com/en/](https://gomim.com/en/)
+
+**Split complementary:**
+
+- [https://flythenest.io/en/](https://flythenest.io/en/)
+- [https://www.kineuphorics.com/](https://www.kineuphorics.com/)
+- [https://www.ma-tea.de/](https://www.ma-tea.de/)
+
+**Triadic**
+
+- [https://normalnow.com/](https://normalnow.com/)
+- [https://brainbakery.com/en/](https://brainbakery.com/en/)
+- [https://www.barkbox.com/](https://www.barkbox.com/)
+
+**Dual complementary or Tetradic**
+
+- [https://www.airtable.com/](https://www.airtable.com/)
+- [https://calendar.google.com/](https://calendar.google.com/)
+- [https://www.ebay.com/](https://www.ebay.com/)
+## Find the colors
+
+**Context:**
+
+This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
+
+### Instructions
+
+Go to the following 7 websites and make the color palettes out of them (3 to 4 main colors).
+
+- [https://www.komoot.com/](https://www.komoot.com/) (App)
+- [https://www.airtable.com/](https://www.airtable.com/)
+- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas)
+- [https://www.jrpass.com/](https://www.jrpass.com/)
+- [https://www.thesiff.com/](https://www.thesiff.com/)
+- [https://brave.com/es/](https://brave.com/es/)
+- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)
+
+**Deliverable:**
+
+- A Figma file including screenshots of the main page for all the 7 websites, URL and extracted colors next to the screenshots.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- You can use Figma to extract the colors you need and export your file to PDF.
+- Use the Color Pipette to extract the colors!
+- You can show the main colors with filled squares or circles next to the screenshots.
+- Mind the aesthetics of your deliverable! 1 page per site should be good.
+
+**Resources:**
+
+- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+## Moodboard
+
+### Instructions
+
+Create 4 different moodboards based on these 4 briefs and extract a color palette.
+
+**Briefs:**
+
+- 1: A physics teacher that wants to make his website catchy for 12 year-olds.
+- 2: A Sri Lankan wedding planner website that wants to breathe sobriety and modernity.
+- 3: An e-commerce platform that sells West African wax and wants to feel more luxurious in its spirit to stand out.
+- 4: An NGO that helps parents of kids with autism, wants to spread joy and hope for a fundraiser.
+
+### Deliverables
+
+- A Figma file per moodboard.
+- On each moodboard, several pictures (5 to 12) that are graphically consistent in terms of colors.
+- The main colors extracted and shown on the side.
+- One color code per color (RGB, Hex or HSB).
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- [Use freely-usable images!](https://buffer.com/library/free-images/)
+- Examples of moodboards (in addition, the moodboard should include the color codes):
+  - [Example1](https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png)
+  - [Example2](https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg)
+  - [Example3](https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg)
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## Typography
+
+### Instructions
+
+Go to these websites and detect the typographies used.
+
+- [https://unric.org/no](https://unric.org/no)
+- [https://www.strongbowcider.com/bug-exterminator-brisbane](https://www.strongbowcider.com/bug-exterminator-brisbane)
+- [http://www.bbqgrillsandfire.com/](http://www.bbqgrillsandfire.com/)
+- [https://pt.wikipedia.org/wiki/Mario_Botta](https://pt.wikipedia.org/wiki/Mario_Botta)
+- [https://texas-private-investigator.com/](https://texas-private-investigator.com/)
+- [https://bumble.com/](https://bumble.com/)
+- [https://adopte1poule.fr/](https://adopte1poule.fr/)
+- [http://slaveryfootprint.org/](http://slaveryfootprint.org/)
+- [https://www.tomorrowland.com/fr/festival/bienvenue](https://www.tomorrowland.com/fr/festival/bienvenue)
+- [https://artisanscanada.com/](https://artisanscanada.com/)
+
+### Deliverables
+
+- A Figma file showing all the typographies used in each website or app.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Mind the presentation!
+- Feel free to browse Google Chrome options to detect typography ;-)
+- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [What is Typography](https://www.renderforest.com/blog/what-is-typography)
+- [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/)
+- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/)
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+## Typography Moodboard
+
+### Instructions
+
+Find consistent typography for your moodboards from the "Moodboard" exercise.
+
+### Deliverables
+
+- A Figma file with 4 moodboards from the "Moodboard" exercise, and typography:
+
+  - 1 for a title
+  - 1 for a button
+  - 1 for a description
+  - 1 for the text
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Bold, italic, normal, light, etc. are fonts, not typography.
+- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
+- [Example of a caption here](https://www.figma.com/file/SbQMPjfLOzg92g8YZFlrRh/UI-I---Ex-5)
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Font](https://en.wikipedia.org/wiki/Font)
+- [Glyph](https://en.wikipedia.org/wiki/Glyph)
+- Instagram account: [You are typography](https://www.instagram.com/youaretypography/)
+- Instagram account: [Typespire](https://www.instagram.com/typespire/)
+- Instagram account: [ux_ui.world](https://www.instagram.com/ui_ux.world/)
+- Instagram account: [ui.netwrk](https://www.instagram.com/ui.netwrk/)
+- Instagram account: [uxuidailytips](https://www.instagram.com/uiuxdailytips/)
+- [What is Typography](https://www.renderforest.com/blog/what-is-typography)
+- [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/)
+- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/)
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+## UI Challenge - Bitcoin Dashboard
+
+### Instructions
+
+Create this image on Figma:
+
+![Dashboard](Dashboard.png)
+
+- Make sure:
+  - You use symbols and variants (1 page for the Symbols one for the screen).
+  - All your layers are named and organized.
+  - You use overlays.
+  - You use masks to change the shape of an imported image.
+  - You use linear color function.
+
+**Deliverable:**
+
+- A Figma file with a copy of the image with Figma elements.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Fonts: Avenir.
+- The frame is a desktop 1440 x 1024.
+- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
+- You can use existing Libraries by browsing the Figma community resources.
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## UI Challenge - Flight
+
+### Instructions
+
+Create this image on Figma:
+
+![Flight](Flight.png)
+
+- Make sure that:
+  - You use symbols and variants (1 page for the Symbols).
+  - All you layers are named and organized.
+  - You use overlays.
+  - You use masks to change the shape of an imported image (Amsterdam, Maldives, New Delhi, Sydney icons).
+
+**Deliverable:**
+
+- A Figma file with a copy of the image with Figma elements.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Font: Roboto Bold, Normal, Black with 0 to 7% space between letters.
+- The frame is desktop 1440 x 1048 px.
+- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## UI Challenge - Spotify
+
+### Instructions
+
+Create this image on Figma:
+
+![Spotify](Spotify.jpg)
+
+- Please make sure you use:
+
+  - Linear color background.
+  - Groups.
+  - Named and organized layers.
+  - Apple design system (head bar).
+  - Symbols and variants for the songs (1 page for the Symbols).
+
+**Deliverable:**
+
+- A Figma file with a copy of the image with Figma elements.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- The font is GOTHAM.
+- The frame is iPhone 13 Pro Max 428 x 926 px.
+- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## UI Challenge - Timer
+
+### Instructions
+
+Create this image on Figma:
+
+![Timer](Timer.png)
+
+Please make sure you use:
+
+- 2 half circles to draw the circle around the timer.
+- Gradient to fill the main circle.
+- Groups.
+- Named layers.
+
+**Deliverable:**
+
+- A Figma file.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- The font is RAJDANHI.
+- The frame is Android 360 x 640px.
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## UI Challenge - Watches
+
+### Instructions
+
+Copy these images on Figma:
+
+![Screen1](Watch1.png)
+![Screen2](Watch2.png)
+![Screen3](Watch3.png)
+![Screen4](Watch4.png)
+
+- Make sure:
+  - You use symbols and variants (1 page for the Symbols).
+  - All your layers are named and organized.
+  - You use overlays.
+  - You use masks to change the shape of the imported image.
+
+**Deliverable:**
+
+- A Figma file with a copy of the image with Figma elements.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Fonts: SF Compact for the iOS elements, Futura STD Condensed for the Nike signs.
+- The frame for each iWatch screen is watch 44 mm 184 x 224.
+- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
+- You can use existing Libraries by browsing the Figma community resources.
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/colors-and-moodboard/color-codes/README.md

@@ -1,33 +0,0 @@
-## Color codes
-
-### Instructions
-
-Go to these 7 websites and make the color palettes out of them (3 to 4 main colors).
-
-**Deliverable:**
-
-- A Figma file including screenshots of the main page, URL, extracted colors and the matching color codes.
-
-Don't forget to :
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- You can use the document from the previous exercise to add the color codes on Figma.
-- Use the Color Pipette to detect the color codes!
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
-
-- [https://www.komoot.com/](https://www.komoot.com/) (App)
-- [https://www.airtable.com/](https://www.airtable.com/)
-- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas)
-- [https://www.jrpass.com/](https://www.jrpass.com/)
-- [https://www.thesiff.com/](https://www.thesiff.com/)
-- [https://brave.com/es/](https://brave.com/es/)
-- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)

subjects/user-experience/piscine-ui/colors-and-moodboard/color-combinations/README.md

@@ -1,78 +0,0 @@
-## Color combinations
-
-### Instructions
-
-Let's browse!
-
-Find 3 digital products (websites or apps) that use each kind of color palette combination:
-
-- Monochromatic
-- Analogous
-- Complementary
-- Split complementary
-- Triadic
-- Double complementary
-
-You need 3 websites or apps per color palette combination!
-
-**Deliverable:**
-
-- A Figma file including for each digital product (websites or apps):
-
-  - screenshots of the main page.
-  - the matching URL.
-  - the main colors.
-  - the kind of color combination.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- You can find HSB (Hue, Saturation, Brightness) as well as HSV (Hue, Saturation, Value) depending of the source.
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/](https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/)
-- ![Color wheel combinations](Resource.png)
-
-**Example:**
-
-**Monochromatic:**
-
-- [https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/)
-- [http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/)
-- [http://blank.com.pt/](http://blank.com.pt/)
-
-**Analogous:**
-
-- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/)
-- [https://campesinorum.com/](https://campesinorum.com/)
-- [https://www.lobster.es/](https://www.lobster.es/)
-
-**Complementary:**
-
-- [https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr)
-- [https://squilla.io/](https://squilla.io/)
-- [https://gomim.com/en/](https://gomim.com/en/)
-
-**Split complementary:**
-
-- [https://flythenest.io/en/](https://flythenest.io/en/)
-- [https://www.kineuphorics.com/](https://www.kineuphorics.com/)
-- [https://www.ma-tea.de/](https://www.ma-tea.de/)
-
-**Triadic**
-
-- [https://normalnow.com/](https://normalnow.com/)
-- [https://brainbakery.com/en/](https://brainbakery.com/en/)
-- [https://www.barkbox.com/](https://www.barkbox.com/)
-
-**Dual complementary or Tetradic**
-
-- [https://www.airtable.com/](https://www.airtable.com/)
-- [https://calendar.google.com/](https://calendar.google.com/)
-- [https://www.ebay.com/](https://www.ebay.com/)

subjects/user-experience/piscine-ui/colors-and-moodboard/find-the-colors/README.md

@@ -1,39 +0,0 @@
-## Find the colors
-
-**Context:**
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
-### Instructions
-
-Go to the following 7 websites and make the color palettes out of them (3 to 4 main colors).
-
-- [https://www.komoot.com/](https://www.komoot.com/) (App)
-- [https://www.airtable.com/](https://www.airtable.com/)
-- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas)
-- [https://www.jrpass.com/](https://www.jrpass.com/)
-- [https://www.thesiff.com/](https://www.thesiff.com/)
-- [https://brave.com/es/](https://brave.com/es/)
-- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)
-
-**Deliverable:**
-
-- A Figma file including screenshots of the main page for all the 7 websites, URL and extracted colors next to the screenshots.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- You can use Figma to extract the colors you need and export your file to PDF.
-- Use the Color Pipette to extract the colors!
-- You can show the main colors with filled squares or circles next to the screenshots.
-- Mind the aesthetics of your deliverable! 1 page per site should be good.
-
-**Resources:**
-
-- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

subjects/user-experience/piscine-ui/colors-and-moodboard/moodboard/README.md

@@ -1,33 +0,0 @@
-## Moodboard
-
-### Instructions
-
-Create 4 different moodboards based on these 4 briefs and extract a color palette.
-
-**Briefs:**
-
-- 1: A physics teacher that wants to make his website catchy for 12 year-olds.
-- 2: A Sri Lankan wedding planner website that wants to breathe sobriety and modernity.
-- 3: An e-commerce platform that sells West African wax and wants to feel more luxurious in its spirit to stand out.
-- 4: An NGO that helps parents of kids with autism, wants to spread joy and hope for a fundraiser.
-
-### Deliverables
-
-- A Figma file per moodboard.
-- On each moodboard, several pictures (5 to 12) that are graphically consistent in terms of colors.
-- The main colors extracted and shown on the side.
-- One color code per color (RGB, Hex or HSB).
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- [Use freely-usable images!](https://buffer.com/library/free-images/)
-- Examples of moodboards (in addition, the moodboard should include the color codes):
-  - [Example1](https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png)
-  - [Example2](https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg)
-  - [Example3](https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg)
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/colors-and-moodboard/typography-moodboard/README.md

@@ -1,41 +0,0 @@
-## Typography Moodboard
-
-### Instructions
-
-Find consistent typography for your moodboards from the "Moodboard" exercise.
-
-### Deliverables
-
-- A Figma file with 4 moodboards from the "Moodboard" exercise, and typography:
-
-  - 1 for a title
-  - 1 for a button
-  - 1 for a description
-  - 1 for the text
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Bold, italic, normal, light, etc. are fonts, not typography.
-- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
-- [Example of a caption here](https://www.figma.com/file/SbQMPjfLOzg92g8YZFlrRh/UI-I---Ex-5)
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Font](https://en.wikipedia.org/wiki/Font)
-- [Glyph](https://en.wikipedia.org/wiki/Glyph)
-- Instagram account: [You are typography](https://www.instagram.com/youaretypography/)
-- Instagram account: [Typespire](https://www.instagram.com/typespire/)
-- Instagram account: [ux_ui.world](https://www.instagram.com/ui_ux.world/)
-- Instagram account: [ui.netwrk](https://www.instagram.com/ui.netwrk/)
-- Instagram account: [uxuidailytips](https://www.instagram.com/uiuxdailytips/)
-- [What is Typography](https://www.renderforest.com/blog/what-is-typography)
-- [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/)
-- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/)
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

subjects/user-experience/piscine-ui/colors-and-moodboard/typography/README.md

@@ -1,40 +0,0 @@
-## Typography
-
-### Instructions
-
-Go to these websites and detect the typographies used.
-
-- [https://unric.org/no](https://unric.org/no)
-- [https://www.strongbowcider.com/bug-exterminator-brisbane](https://www.strongbowcider.com/bug-exterminator-brisbane)
-- [http://www.bbqgrillsandfire.com/](http://www.bbqgrillsandfire.com/)
-- [https://pt.wikipedia.org/wiki/Mario_Botta](https://pt.wikipedia.org/wiki/Mario_Botta)
-- [https://texas-private-investigator.com/](https://texas-private-investigator.com/)
-- [https://bumble.com/](https://bumble.com/)
-- [https://adopte1poule.fr/](https://adopte1poule.fr/)
-- [http://slaveryfootprint.org/](http://slaveryfootprint.org/)
-- [https://www.tomorrowland.com/fr/festival/bienvenue](https://www.tomorrowland.com/fr/festival/bienvenue)
-- [https://artisanscanada.com/](https://artisanscanada.com/)
-
-### Deliverables
-
-- A Figma file showing all the typographies used in each website or app.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Mind the presentation!
-- Feel free to browse Google Chrome options to detect typography ;-)
-- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [What is Typography](https://www.renderforest.com/blog/what-is-typography)
-- [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/)
-- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/)
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

subjects/user-experience/piscine-ui/colors-and-moodboard/ui-challenge-bitcoin-dashboard/README.md

@@ -1,31 +0,0 @@
-## UI Challenge - Bitcoin Dashboard
-
-### Instructions
-
-Create this image on Figma:
-
-![Dashboard](Dashboard.png)
-
-- Make sure:
-  - You use symbols and variants (1 page for the Symbols one for the screen).
-  - All your layers are named and organized.
-  - You use overlays.
-  - You use masks to change the shape of an imported image.
-  - You use linear color function.
-
-**Deliverable:**
-
-- A Figma file with a copy of the image with Figma elements.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Fonts: Avenir.
-- The frame is a desktop 1440 x 1024.
-- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
-- You can use existing Libraries by browsing the Figma community resources.
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/colors-and-moodboard/ui-challenge-flight/README.md

@@ -1,29 +0,0 @@
-## UI Challenge - Flight
-
-### Instructions
-
-Create this image on Figma:
-
-![Flight](Flight.png)
-
-- Make sure that:
-  - You use symbols and variants (1 page for the Symbols).
-  - All you layers are named and organized.
-  - You use overlays.
-  - You use masks to change the shape of an imported image (Amsterdam, Maldives, New Delhi, Sydney icons).
-
-**Deliverable:**
-
-- A Figma file with a copy of the image with Figma elements.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Font: Roboto Bold, Normal, Black with 0 to 7% space between letters.
-- The frame is desktop 1440 x 1048 px.
-- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/colors-and-moodboard/ui-challenge-spotify/README.md

@@ -1,31 +0,0 @@
-## UI Challenge - Spotify
-
-### Instructions
-
-Create this image on Figma:
-
-![Spotify](Spotify.jpg)
-
-- Please make sure you use:
-
-  - Linear color background.
-  - Groups.
-  - Named and organized layers.
-  - Apple design system (head bar).
-  - Symbols and variants for the songs (1 page for the Symbols).
-
-**Deliverable:**
-
-- A Figma file with a copy of the image with Figma elements.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- The font is GOTHAM.
-- The frame is iPhone 13 Pro Max 428 x 926 px.
-- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/colors-and-moodboard/ui-challenge-timer/README.md

@@ -1,29 +0,0 @@
-## UI Challenge - Timer
-
-### Instructions
-
-Create this image on Figma:
-
-![Timer](Timer.png)
-
-Please make sure you use:
-
-- 2 half circles to draw the circle around the timer.
-- Gradient to fill the main circle.
-- Groups.
-- Named layers.
-
-**Deliverable:**
-
-- A Figma file.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- The font is RAJDANHI.
-- The frame is Android 360 x 640px.
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/colors-and-moodboard/ui-challenge-watches/README.md

@@ -1,33 +0,0 @@
-## UI Challenge - Watches
-
-### Instructions
-
-Copy these images on Figma:
-
-![Screen1](Watch1.png)
-![Screen2](Watch2.png)
-![Screen3](Watch3.png)
-![Screen4](Watch4.png)
-
-- Make sure:
-  - You use symbols and variants (1 page for the Symbols).
-  - All your layers are named and organized.
-  - You use overlays.
-  - You use masks to change the shape of the imported image.
-
-**Deliverable:**
-
-- A Figma file with a copy of the image with Figma elements.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Fonts: SF Compact for the iOS elements, Futura STD Condensed for the Nike signs.
-- The frame for each iWatch screen is watch 44 mm 184 x 224.
-- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
-- You can use existing Libraries by browsing the Figma community resources.
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/heuristics/README.md

@@ -48,3 +48,28 @@ Don't forget to:
 - [Heuristic analysis in the design process](https://uxdesign.cc/heuristic-analysis-in-the-design-process-usability-inspection-methods-d200768eb38d)
 - [A new usability heuristic evaluation checklist](https://uxplanet.org/a-new-usability-heuristic-evaluation-checklist-259f588da308)
 - [Tool : Heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)
+## Recommendations
+
+### Instructions
+
+Based on the audit you made in "Heuristic audit" exercise, write a set of 3 to 6 recommendations to improve heuristics and usability.
+
+**Websites or Apps:**
+
+- [https://www.ikea.com/](https://www.ikea.com/)
+- [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/)
+- App WikiArt.
+
+**Deliverable:**
+
+- A PDF document with 3 to 6 recommendations.
+
+Don't forget to:
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Tips:**
+
+- Classify your recommendations in heuristic criteria.
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/heuristics/recommendations/README.md

@@ -1,25 +0,0 @@
-## Recommendations
-
-### Instructions
-
-Based on the audit you made in "Heuristic audit" exercise, write a set of 3 to 6 recommendations to improve heuristics and usability.
-
-**Websites or Apps:**
-
-- [https://www.ikea.com/](https://www.ikea.com/)
-- [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/)
-- App WikiArt.
-
-**Deliverable:**
-
-- A PDF document with 3 to 6 recommendations.
-
-Don't forget to:
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Tips:**
-
-- Classify your recommendations in heuristic criteria.
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/rules/README.md

@@ -0,0 +1,305 @@
+## Accessibility (App)
+
+### Instructions
+
+Choose an app you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content.
+
+### Deliverables
+
+- A 3-page Figma file with 3 different elements from an app (it can be from 3 different apps) that are accessible. The three measures must be different.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26)
+- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i
+- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult)
+- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b)
+
+**Criteria:**
+
+- Examples of measures
+  - Color contrast
+  - Highlighted or enlarged text when hovering
+  - Links color that is different from the body text's
+  - Breadcrumbs to indicate where you are in terms of navigation
+  - In forms, the title of the case should be above the text zone
+  - Error states
+  - etc.
+## Accessibility (website)
+
+### Instructions
+
+Choose a website you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content.
+
+### Deliverables
+
+- A 3-page Figma file with 3 different elements from a website (it can be from 3 different websites) that are accessible. The 3 measures must be different.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26)
+- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
+- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i
+- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult)
+- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b)
+- [Why prioritze web accessibility](https://blog.hubspot.com/service/why-prioritize-web-accessibility)
+
+**Criteria:**
+
+- Examples of measures
+  - Color contrast.
+  - Highlighted or enlarged text when hovering.
+  - Links color that is different from the body text's.
+  - Breadcrumbs to indicate where you are in terms of navigation.
+  - In forms, the title of the case should be above the text zone.
+  - Error states.
+  - etc.
+## Breadbcrumbs
+
+### Instructions
+
+Browse the internet and find at least 5 different examples of breadcrumbs from websites or apps.
+
+**Deliverable:**
+
+- A Figma file gathering 5 screenshots of breadcrumbs and the respective name of each app or website.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)
+## Calendars
+
+### Instructions
+
+Browse the internet and find at least 5 different examples of calendars from websites or apps.
+
+**Deliverable:**
+
+- A Figma file gathering 5 screenshots of calendars and the respective name of each app or website.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## Consistency
+
+### Instructions
+
+Pick a website or an app of your choice\*. Highlight 5 signs of consistency across the pages.
+
+\*Airbnb, Google, Apple, Amazon, Facebook, Instagram and WhatsApp are not accepted.
+
+**Deliverable:**
+
+- A Figma file gathering at least 5 signs of consistency and the respective name of each app or website.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [7 tips for designing consistency](https://designshack.net/articles/graphics/7-tips-for-designing-consistency/)
+- [The value of consistent design](https://www.invisionapp.com/inside-design/consistent-design/)
+- [Consistency and Standards - Examples of Nielsens's Design Heuristics](https://medium.com/@gregoralbrecht/consistency-and-standards-nielsens-design-heuristic-explained-ac91f450fd8)
+- [The importance of consistency in design work](https://yesimadesigner.com/the-importance-of-consistancy-in-design-work/)
+- Examples of signs of consistency:
+  - colors.
+  - same shaped buttons.
+  - alignment.
+  - consistent product pages (with identical frameworks).
+  - etc.
+## Grids
+
+**Context:**
+
+Welcome to the 3rd quest of UI.
+
+In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals:
+
+- Enrich your graphic general knowledge
+- Detect consistency, that helps users understand a digital product at the first glance.
+
+### Instructions
+
+Open these 5 images on Figma and draw lines and grids every time you find aligned elements.
+
+### Deliverables
+
+- A Figma file including:
+  - The screens with lines on top to show grids.
+  - One page per screen or frame.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+- [1st screen example](https://www.figma.com/file/KOzd8yZuJvGLmZLuXjBgDg/UI-III-Ex-1.1)
+## Micro-interactions
+
+### Instructions
+
+Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps.
+
+Be careful! Feedback is helpful to provide information to the user, not just showing a catchy design. You need to make the difference.
+
+**Deliverable:**
+
+- A Figma file gathering 5 examples of **feedback** micro-interactions or animations. In each example, show the different versions of the element.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Feedback is the situation when the app specifically sends a piece of information to the user, like:
+  - Payment accepted
+  - Refreshed feed
+  - Information saved
+  - etc.
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Why use micro-interactions in your design](https://hike.one/update/why-use-micro-animations-in-your-design)
+- [Micro-interactions: why, when, and how to use them to boost the UX](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0)
+## Multi state
+
+### Instructions
+
+Go to [Sony.com](http://sony.com) and observe the buttons and call to actions. When you hover or click on them, they change!
+
+Make screenshots of the different states of buttons, menu titles, filters etc. Then, gather and organize them.
+
+Find at least five combinations of multi state elements.
+
+### Deliverables
+
+- A Figma file with 5 combinations of multi state elements.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+- [Example here with Nintendo.com](https://www.figma.com/file/ahSnWRZeKBO62oJDiXltxY/UI-III---Ex-2) (The screenshots date back to nov 2021. They may differ from the current version of [Nintendo.com](http://Nintendo.com) but the rules are the same).
+## Radio Buttons
+
+### Instructions
+
+Browse the internet and find at least 5 different examples of radio buttons from websites or apps.
+
+**Deliverable:**
+
+- A Figma file gathering 5 screenshots of radio buttons and the respective name of each app or website.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)
+## Time pickers
+
+### Instructions
+
+Browse the internet and find at least 5 different examples of time pickers from websites or apps.
+
+**Deliverable:**
+
+- A Figma file gathering 5 screenshots of time pickers and the respective name of each app or website.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## Toggle buttons
+
+### Instructions
+
+Browse the internet and find at least 5 different examples of toggle buttons from websites or apps.
+
+**Deliverable:**
+
+- A Figma file gathering 5 screenshots of toggle buttons and the respective name of each app or website.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Toggle Switch - Tips](https://uxplanet.org/toggle-switch-5-simple-design-tips-for-better-design-b4046eff4a2f)

subjects/user-experience/piscine-ui/rules/accessbility-app/README.md

@@ -1,37 +0,0 @@
-## Accessibility (App)
-
-### Instructions
-
-Choose an app you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content.
-
-### Deliverables
-
-- A 3-page Figma file with 3 different elements from an app (it can be from 3 different apps) that are accessible. The three measures must be different.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26)
-- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
-- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i
-- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult)
-- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b)
-
-**Criteria:**
-
-- Examples of measures
-  - Color contrast
-  - Highlighted or enlarged text when hovering
-  - Links color that is different from the body text's
-  - Breadcrumbs to indicate where you are in terms of navigation
-  - In forms, the title of the case should be above the text zone
-  - Error states
-  - etc.

subjects/user-experience/piscine-ui/rules/accessbility-website/README.md

@@ -1,38 +0,0 @@
-## Accessibility (website)
-
-### Instructions
-
-Choose a website you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content.
-
-### Deliverables
-
-- A 3-page Figma file with 3 different elements from a website (it can be from 3 different websites) that are accessible. The 3 measures must be different.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26)
-- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
-- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i
-- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult)
-- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b)
-- [Why prioritze web accessibility](https://blog.hubspot.com/service/why-prioritize-web-accessibility)
-
-**Criteria:**
-
-- Examples of measures
-  - Color contrast.
-  - Highlighted or enlarged text when hovering.
-  - Links color that is different from the body text's.
-  - Breadcrumbs to indicate where you are in terms of navigation.
-  - In forms, the title of the case should be above the text zone.
-  - Error states.
-  - etc.

subjects/user-experience/piscine-ui/rules/breadcrumbs/README.md

@@ -1,22 +0,0 @@
-## Breadbcrumbs
-
-### Instructions
-
-Browse the internet and find at least 5 different examples of breadcrumbs from websites or apps.
-
-**Deliverable:**
-
-- A Figma file gathering 5 screenshots of breadcrumbs and the respective name of each app or website.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)

subjects/user-experience/piscine-ui/rules/calendars/README.md

@@ -1,18 +0,0 @@
-## Calendars
-
-### Instructions
-
-Browse the internet and find at least 5 different examples of calendars from websites or apps.
-
-**Deliverable:**
-
-- A Figma file gathering 5 screenshots of calendars and the respective name of each app or website.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/rules/consistency/README.md

@@ -1,33 +0,0 @@
-## Consistency
-
-### Instructions
-
-Pick a website or an app of your choice\*. Highlight 5 signs of consistency across the pages.
-
-\*Airbnb, Google, Apple, Amazon, Facebook, Instagram and WhatsApp are not accepted.
-
-**Deliverable:**
-
-- A Figma file gathering at least 5 signs of consistency and the respective name of each app or website.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [7 tips for designing consistency](https://designshack.net/articles/graphics/7-tips-for-designing-consistency/)
-- [The value of consistent design](https://www.invisionapp.com/inside-design/consistent-design/)
-- [Consistency and Standards - Examples of Nielsens's Design Heuristics](https://medium.com/@gregoralbrecht/consistency-and-standards-nielsens-design-heuristic-explained-ac91f450fd8)
-- [The importance of consistency in design work](https://yesimadesigner.com/the-importance-of-consistancy-in-design-work/)
-- Examples of signs of consistency:
-  - colors.
-  - same shaped buttons.
-  - alignment.
-  - consistent product pages (with identical frameworks).
-  - etc.

subjects/user-experience/piscine-ui/rules/grids/README.md

@@ -1,36 +0,0 @@
-## Grids
-
-**Context:**
-
-Welcome to the 3rd quest of UI.
-
-In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals:
-
-- Enrich your graphic general knowledge
-- Detect consistency, that helps users understand a digital product at the first glance.
-
-### Instructions
-
-Open these 5 images on Figma and draw lines and grids every time you find aligned elements.
-
-### Deliverables
-
-- A Figma file including:
-  - The screens with lines on top to show grids.
-  - One page per screen or frame.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
-- [1st screen example](https://www.figma.com/file/KOzd8yZuJvGLmZLuXjBgDg/UI-III-Ex-1.1)

subjects/user-experience/piscine-ui/rules/micro-interactions/README.md

@@ -1,30 +0,0 @@
-## Micro-interactions
-
-### Instructions
-
-Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps.
-
-Be careful! Feedback is helpful to provide information to the user, not just showing a catchy design. You need to make the difference.
-
-**Deliverable:**
-
-- A Figma file gathering 5 examples of **feedback** micro-interactions or animations. In each example, show the different versions of the element.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Feedback is the situation when the app specifically sends a piece of information to the user, like:
-  - Payment accepted
-  - Refreshed feed
-  - Information saved
-  - etc.
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Why use micro-interactions in your design](https://hike.one/update/why-use-micro-animations-in-your-design)
-- [Micro-interactions: why, when, and how to use them to boost the UX](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0)

subjects/user-experience/piscine-ui/rules/multi-state/README.md

@@ -1,29 +0,0 @@
-## Multi state
-
-### Instructions
-
-Go to [Sony.com](http://sony.com) and observe the buttons and call to actions. When you hover or click on them, they change!
-
-Make screenshots of the different states of buttons, menu titles, filters etc. Then, gather and organize them.
-
-Find at least five combinations of multi state elements.
-
-### Deliverables
-
-- A Figma file with 5 combinations of multi state elements.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
-- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
-- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
-- [Example here with Nintendo.com](https://www.figma.com/file/ahSnWRZeKBO62oJDiXltxY/UI-III---Ex-2) (The screenshots date back to nov 2021. They may differ from the current version of [Nintendo.com](http://Nintendo.com) but the rules are the same).

subjects/user-experience/piscine-ui/rules/radio-buttons/README.md

@@ -1,22 +0,0 @@
-## Radio Buttons
-
-### Instructions
-
-Browse the internet and find at least 5 different examples of radio buttons from websites or apps.
-
-**Deliverable:**
-
-- A Figma file gathering 5 screenshots of radio buttons and the respective name of each app or website.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)

subjects/user-experience/piscine-ui/rules/time-pickers/README.md

@@ -1,18 +0,0 @@
-## Time pickers
-
-### Instructions
-
-Browse the internet and find at least 5 different examples of time pickers from websites or apps.
-
-**Deliverable:**
-
-- A Figma file gathering 5 screenshots of time pickers and the respective name of each app or website.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ui/rules/toggle-buttons/README.md

@@ -1,22 +0,0 @@
-## Toggle buttons
-
-### Instructions
-
-Browse the internet and find at least 5 different examples of toggle buttons from websites or apps.
-
-**Deliverable:**
-
-- A Figma file gathering 5 screenshots of toggle buttons and the respective name of each app or website.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Toggle Switch - Tips](https://uxplanet.org/toggle-switch-5-simple-design-tips-for-better-design-b4046eff4a2f)

subjects/user-experience/piscine-ux/athele-keep-hydrated/README.md

@@ -0,0 +1,349 @@
+## Analytics
+
+### Instructions
+
+Read these articles and extract at least 5 key figures or insights that may be useful in understanding what athletes or sport practicing people experience related to hydration.
+
+- On a PDF document, write at least 5 key figures or insights you extracted from the articles.
+- Each insight or key figure should be justified by a quote and the title of the article.
+- Upload the document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+### Deliverables
+
+- A PDF document.
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+Examples of insights you can extract from the articles:
+
+- Symptoms of dehydration can be headache, dizziness, nausea, lightheadedness, or fatigue.
+- People experience dehydration when they lose 2% of their body mass loss (BML) in fluids/water/sweat.
+- Sweat helps the body to maintain optimal body temperature.
+- Sprint athletes are generally less concerned about the effects of dehydration than are endurance athletes.
+
+**Resources:**
+
+- [The effects of Hydration on Athletic Performance](https://sportscardiologybc.org/the-effects-of-hydration-on-athletic-performance/)
+- [Dehydration and its effects on performance - Human Kinetics](https://us.humankinetics.com/blogs/excerpt/dehydration-and-its-effects-on-performance)
+- [Accuracy of Urine Color to Detect Equal to or Greater Than 2% Body Mass Loss in Men Journal of Athletic Training](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4741257/)
+- [Fluid replacement for the physically active - Journal of Athletic Training](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5634236/)
+- [The importance of hydration - Harvard School of Public Health](https://www.hsph.harvard.edu/news/hsph-in-the-news/the-importance-of-hydration/)
+- [Fluids and hydration in prolonged endurance performance - Pubmed](https://pubmed.ncbi.nlm.nih.gov/15212747/)
+
+**Quote:**
+
+Always base your decisions on the data, not on your biases.
+## Ideation
+
+_You can replace Pierre with your own persona._
+
+The chosen problem statement is:
+
+“How might we help Pierre (or your persona) measure and prepare his hydration before a race?”
+
+Now, let’s find creative solutions!
+
+Find 3 friends outside of the program and run a quick ideation session (20 minutes).
+
+- What you need for an in-person ideation workshop:
+
+  - Prepare some papers or sticky notes, stickers, a jar, and pens.
+  - A closed room for 20 minutes where everyone feels comfortable.
+
+- Directions:
+  - Ask them to turn off their phones.
+  - Explain the context and introduce Pierre (or your persona).
+  - Explain the goal:
+    - Let’s find as many solutions as possible to the question: “How might we help Pierre (or your persona) measure and prepare his hydration before a race?”, given the following constraints (unveil them one after the other: 1 minute per constraint, 1 constraint per round):
+      - If Pierre was blind
+      - If Pierre was a bird
+      - If Pierre was a billionaire
+      - If Pierre had a twin who was constantly with him
+      - If Pierre was 5 years old
+      - If Pierre had 5 arms
+      - If Pierre was 105 years old
+      - If Pierre was very clumsy
+      - If Pierre was very forgetful (and lost memory every 5 minutes)
+      - If Pierre was deaf
+      - If Pierre was a turtle
+      - If Pierre was naked
+      - If Pierre couldn’t stop talking 24/7
+      - If Pierre was always late
+      - If Pierre was dishonest
+  - Set a timer for each round.
+  - Ask the participants to do, at each round, the following:
+    - Write down their ideas on a sticky note (1 idea per sticky note).
+    - Read them out loud.
+    - Put the sticky note in a jar.
+  - Gather all the ideas.
+  - Give the participants 3 stickers each and ask them to vote for the best three options.
+  - If there isn’t a solution that stands out of the crowd, hang them on a board and organize them according to these two parameters: easy to implement and efficient. Example in the resources.
+  - Choose 1 main idea to solve the problem.
+
+### Instructions
+
+- Take pictures of the session.
+- Create a board with all the ideas (on Miro or Figma for example).
+- Highlight one main idea to solve the problem next to the board.
+
+### Deliverables
+
+- A zip file.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Resources:**
+
+- [Tool: Ideation Voting Board Framework on Figma](https://www.figma.com/file/nTAWiacCffXvd8dXsLP3Sb/Ideation-Voting-Framework)
+- [Where Good ideas come from by Steven Johnson](https://www.ted.com/talks/steven_johnson_where_good_ideas_come_from)
+- [Creative Confidence by Tom Keller](https://booksvooks.com/creative-confidence-unleashing-the-creative-potential-within-us-all-pdf.html)
+- [Podcast What is wrong with UX?](https://www.usersknow.com/podcast/2016/10/10/ua1wdsszhx2pemugxc1e0qj0a3l9cs)
+- [Brainwriting #2](https://dux.typepad.com/dux/2011/01/method-2-of-100-brainwriting-brainwriting-is-an-ideation-method-for-quickly-generating-ideas-by-asking-people-to-write-thei.html)
+
+**Quote:**
+
+Chances are that... If you have gone through all possible solutions, you’ve found the good one.
+## Personas
+
+### Instructions
+
+- Create a user (Pierre) persona based on several users from the same category.
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+Use the material you got from the exercise `User interview` to build the pierre persona. The following must be present in the document:
+
+- Pierre's persona card with a picture.
+- A quote extracted from the interview scripts.
+- A description of Pierre that is a mix of Joe, Nathan, Guillaume, and Anaelle’s stories.
+- He must have at least 2 goals, habits and frustrations.
+- Insights from the exercise `User interview` must be included in Pierre's persona card.
+
+### Deliverables
+
+- A user persona on a PDF document.
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
+- You may use Figma and extract a PDF document out of it.
+- Detect people who face the same kinds of problems and group them.
+- When you find 2 or more persons who face the same kind of problem, you can merge their testimonials to create a persona. In this case, Joe, Nathan, Guillaume and Anaelle who run races from time to time (they have run at least one race in their life, but less than 3 times a year) and have faced dehydration problems.
+- A persona is fictional: do not use one of your users names, but a name that is consistent with your users demographics and social group. In this case, we'll choose a man, as 3 out of 4 are men, and Pierre as a first name so it's different (but consistent) from Joe's, Nathan's, Guillaume's and Anaelle's.
+- As to the age, average the ages of your selected users. In this case, 32 (Joe is 30, Nathan is 39, Guillaume is 30 and Anaelle is 29).
+- The persona has to be sport-oriented, as it is the context of this research. However, broader information, like the scan info (jobs, location, etc.) are more than welcome to give more context.
+
+**Resources:**
+
+- [Make your persona great again](https://uxdesign.cc/personas-e60c1c06ead1)
+- [Persona, journey maps, user flow, site map, OH MY!](https://uxdesign.cc/personas-journey-maps-site-maps-and-user-flows-oh-my-e71d044b4bcb)
+- [Persona framework](https://miro.medium.com/max/1400/0*RbHfR6BHhhFIENNf)
+
+**Quote:**
+
+"Focus unswervingly, on the customer’ Jesse Hertzberg | Former COO of Squarespace
+## Problem Statement
+
+### Instructions
+
+Based on the insights from the exercises `analytics` and `user interviews`, comment the scope of possible problem statements.
+
+- On a PDF document, write down one problem statement that summarizes the main problem that Pierre has when he runs.
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+### Deliverables
+
+- A PDF document.
+
+**Tips:**
+
+- At this stage, it’s important to focus on the problem, not on the solution! You can start tackling the problem after (re)defining it.
+- Several problem statements can be possible for each persona and user journey, but for this exercise, we are guiding you towards one.
+
+- Examples of a correct problem statements:
+
+  - How might we help Pierre (or your persona) measure and prepare his hydration before a race?
+  - How might we make sure Pierre doesn’t get dehydrated?
+  - How might we make sure Pierre drinks the cups that are offered during the race?
+  - How might we provide Pierre some drink that contains everything he needs to avoid dehydration?
+  - How might we make sure Pierre doesn’t get drunk the night before the race?
+
+- Examples of wrong problem statements:
+  - How might we make sure Pierre doesn’t get dehydrated?
+    - Too broad —> The problem statement is out of the scope of running, so the solutions cannot be integrated in the specific context of running.
+  - How might we make sure Pierre drinks the cups that are offered during the race?
+    - Too narrow —> There are plenty of options to avoid dehydration without drinking the cups that are offered during the race.
+  - How might we provide Pierre with a drink that contains everything he needs to avoid dehydration?
+    - Focused on the solution, not the problem —> The problem statement is supposed to rephrase the brief and take into account the insights from the previous phase.
+  - How might make sure Pierre doesn’t get drunk the night before the race?
+    - Out of scope —> This is not about dehydration, nor about running.
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Stuck on a problem? Just ask how might we](https://relab.academy/design-thinking/stuck-on-a-problem-just-ask-how-might-we/)
+- [Problem statement](https://www.indeed.com/career-advice/career-development/what-is-a-problem-statement)
+- [Using "How Might We’ Questions to Ideative on the Right Problems](https://www.nngroup.com/articles/how-might-we-questions/)
+
+**Quote:**
+
+“If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.” Albert Einstein
+## Prototyping
+
+### Instructions
+
+Develop the idea you got in the exercise `ideation`!
+
+Design a storyboard of Pierre (or your persona) using your idea as a solution. Show all the steps with drawings on paper (6 to 12 steps).
+
+### Deliverables
+
+- Pictures of 1 storyboard to describe your solution, on paper.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- 1 drawing per action
+
+**Resources:**
+
+- [How UX storyboards can transform your creative process](https://uxdesign.cc/ux-storyboarding-2ce43875f3de?sk=41b28ecef8c52d9944e5e636881111cf)
+- [17 reasons to use storyboards in UX design](https://uxdesign.cc/17-reasons-to-use-a-storyboards-in-ux-design-2bc6fea73e20?source=friends_link&sk=5bb2722f1f9ff06d4f22b0abfe52f508)
+- [How to storyboard experiences](https://uxdesign.cc/how-to-storyboard-experiences-fc051e2bc04d)
+- [Using comic strips and storyboards to test your UX concepts](https://uxdesign.cc/using-comic-strips-and-storyboards-to-test-your-ux-concepts-cccad7ac7f71)
+
+**Quote:**
+
+“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences” Don Norman
+## User Interviews
+
+**Context:**
+
+Welcome to the very first quest of this program.
+
+Your mission, should you choose to accept it, is to find a way to improve athletes’ experience related to their hydration when running.
+
+This first project is very special: you are asked to end up with a non-digital solution. As a matter of fact, innovation does not always rhyme with digital. So let’s be creative and get out of the box!
+
+**General recommendations:**
+
+- Get Out of the Box. Be curious. Follow design trends on YouTube, LinkedIn, in podcasts, on Instagram accounts. Explore the internet when you discover a new concept. Build your own design culture.
+- Document everything you do, take notes, open a medium account to identify and show your deliverables, thoughts and feedback. It will be useful for your portfolio!
+- Trust the design process. One step after another.
+- Design needs to fail. 
+  Failure is even a necessary step, but ideally it should happen before a product is launched, during the prototype and test phases
+- Make connections. Use LinkedIn, your friends, friends of friends to frequently meet designers and ask them about how they practice design in their organization. Who know, some day they may remember you and offer you a contract!
+
+### Instructions
+
+- Read all the scripts very carefully.
+- Extract at least 6 insights and write them down on a PDF file.
+  - Insights must be either shared by several people or consistent with what other people have already experienced.
+  - For each insight, name who said it.
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Definition of 'insight': A key learning from what you have seen, read or heard.**
+
+### Deliverables
+
+- A PDF document.
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
+- Examples of insights from the scripts (non-exhaustive list):
+
+  - Runs several times a week (Joe, Nathan, Guillaume, Anaelle)
+  - Doesn’t drink too much right before the race because it hurts my stomach (Nathan, Anaelle)
+  - I run races with friends or peers (Joe, Nathan, Guillaume)
+
+**Interview guide:**
+
+- The following is the interview script used to conduct the seven user interviews.
+
+Hello! My name is Agathe and I am conducting research about athletes and people who practice sports regularly. Hence, I'd be very happy to ask you some questions about the way you run, your habits, and the pain points you may have.
+
+This interview will probably last 20 to 30 minutes.
+
+Do you have any questions before we start?
+
+Run
+
+- What sports do you practice?
+- How often do you run?
+- When was the last time you went out for a run?
+
+Races
+
+- What was the last race you ran?
+- How was it? Tell me about the experience you had.
+- How did you get prepared?
+- What would you have done differently? Why?
+
+Hydration
+
+- What do you remember about the way you hydrated?
+- How did you manage your hydration?
+- Have you ever found yourself in trouble due to hydration? What happened?
+- What would you never do again? Why?
+
+That's it, we went through all the questions I had.
+
+Thank you so much for your time!
+
+I have a last favor to ask you: is there anyone you know who runs frequently and would be available for a talk?
+## User Journey
+
+### Instructions
+
+Based on your persona card, and the interview scripts, design Pierre’s user journey.
+
+The journey must contain:
+
+    - A timeline that show the journey of your persona step by step, before, during and after running a race divided into phases.
+    - Pierre’s actions must be written on the timeline and for each action, a thought must be written and for every thought a main emotion must be present.
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+### Deliverables
+
+- A Figma file with Pierre’s user journey.
+
+**Tips:**
+
+- You may use Figma.
+- Mix up some insights and details from the interview scripts to write a journey that is consistent with Pierre’s personality.
+- You can, for instance, describe Pierre’s first marathon. The first phase could be the preparation, the second phase the race itself, and the third one how he feels about the race when he has done it.
+- Break down the story step-by-step and define Pierre’s actions.
+- Focus on each action and define Pierre’s thoughts and main emotion among the list.
+- Adapt the line to Pierre’s thoughts and emotions.
+- Define the opportunities to improve Pierre’s overall experience every time you see a pain point.
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+Most articles you'll find will be about user journeys or customer journeys. Keep in mind that you can adapt this methodology to any persona with any kind of situation or process, even at school, outside the school, in the digital world, etc.
+
+- [Tool: User Journey Mapping Template on Figma](https://www.figma.com/file/sXdUDoTXwItU7dyQYVkY1w/Tool---User-Journey-Map)
+- [A Lean UX Customer Journey Map](https://uxdesign.cc/proto-journey-a-lean-ux-customer-journey-map-30ea3a241edc)
+- [How to create a Customer Journey Map](https://www.youtube.com/watch?v=mSxpVRo3BLg)
+- [Journey Mapping: How to build it](https://www.lucidchart.com/blog/how-to-build-customer-journey-maps)
+- [Journey Mapping : Template on Figma](https://www.figma.com/file/5tittjiznRCWTNR2xI5FIT/Untitled?node-id=0%3A1)
+- [Example](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png)
+
+**Quote:**
+
+'It’s about catching customers in the act, and providing highly relevant and highly contextual information’ Paul Maritz | CEO Pivotal

subjects/user-experience/piscine-ux/athele-keep-hydrated/analytics/README.md

@@ -1,38 +0,0 @@
-## Analytics
-
-### Instructions
-
-Read these articles and extract at least 5 key figures or insights that may be useful in understanding what athletes or sport practicing people experience related to hydration.
-
-- On a PDF document, write at least 5 key figures or insights you extracted from the articles.
-- Each insight or key figure should be justified by a quote and the title of the article.
-- Upload the document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-### Deliverables
-
-- A PDF document.
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-Examples of insights you can extract from the articles:
-
-- Symptoms of dehydration can be headache, dizziness, nausea, lightheadedness, or fatigue.
-- People experience dehydration when they lose 2% of their body mass loss (BML) in fluids/water/sweat.
-- Sweat helps the body to maintain optimal body temperature.
-- Sprint athletes are generally less concerned about the effects of dehydration than are endurance athletes.
-
-**Resources:**
-
-- [The effects of Hydration on Athletic Performance](https://sportscardiologybc.org/the-effects-of-hydration-on-athletic-performance/)
-- [Dehydration and its effects on performance - Human Kinetics](https://us.humankinetics.com/blogs/excerpt/dehydration-and-its-effects-on-performance)
-- [Accuracy of Urine Color to Detect Equal to or Greater Than 2% Body Mass Loss in Men Journal of Athletic Training](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4741257/)
-- [Fluid replacement for the physically active - Journal of Athletic Training](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5634236/)
-- [The importance of hydration - Harvard School of Public Health](https://www.hsph.harvard.edu/news/hsph-in-the-news/the-importance-of-hydration/)
-- [Fluids and hydration in prolonged endurance performance - Pubmed](https://pubmed.ncbi.nlm.nih.gov/15212747/)
-
-**Quote:**
-
-Always base your decisions on the data, not on your biases.

subjects/user-experience/piscine-ux/athele-keep-hydrated/ideation/README.md

@@ -1,73 +0,0 @@
-## Ideation
-
-_You can replace Pierre with your own persona._
-
-The chosen problem statement is:
-
-“How might we help Pierre (or your persona) measure and prepare his hydration before a race?”
-
-Now, let’s find creative solutions!
-
-Find 3 friends outside of the program and run a quick ideation session (20 minutes).
-
-- What you need for an in-person ideation workshop:
-
-  - Prepare some papers or sticky notes, stickers, a jar, and pens.
-  - A closed room for 20 minutes where everyone feels comfortable.
-
-- Directions:
-  - Ask them to turn off their phones.
-  - Explain the context and introduce Pierre (or your persona).
-  - Explain the goal:
-    - Let’s find as many solutions as possible to the question: “How might we help Pierre (or your persona) measure and prepare his hydration before a race?”, given the following constraints (unveil them one after the other: 1 minute per constraint, 1 constraint per round):
-      - If Pierre was blind
-      - If Pierre was a bird
-      - If Pierre was a billionaire
-      - If Pierre had a twin who was constantly with him
-      - If Pierre was 5 years old
-      - If Pierre had 5 arms
-      - If Pierre was 105 years old
-      - If Pierre was very clumsy
-      - If Pierre was very forgetful (and lost memory every 5 minutes)
-      - If Pierre was deaf
-      - If Pierre was a turtle
-      - If Pierre was naked
-      - If Pierre couldn’t stop talking 24/7
-      - If Pierre was always late
-      - If Pierre was dishonest
-  - Set a timer for each round.
-  - Ask the participants to do, at each round, the following:
-    - Write down their ideas on a sticky note (1 idea per sticky note).
-    - Read them out loud.
-    - Put the sticky note in a jar.
-  - Gather all the ideas.
-  - Give the participants 3 stickers each and ask them to vote for the best three options.
-  - If there isn’t a solution that stands out of the crowd, hang them on a board and organize them according to these two parameters: easy to implement and efficient. Example in the resources.
-  - Choose 1 main idea to solve the problem.
-
-### Instructions
-
-- Take pictures of the session.
-- Create a board with all the ideas (on Miro or Figma for example).
-- Highlight one main idea to solve the problem next to the board.
-
-### Deliverables
-
-- A zip file.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Resources:**
-
-- [Tool: Ideation Voting Board Framework on Figma](https://www.figma.com/file/nTAWiacCffXvd8dXsLP3Sb/Ideation-Voting-Framework)
-- [Where Good ideas come from by Steven Johnson](https://www.ted.com/talks/steven_johnson_where_good_ideas_come_from)
-- [Creative Confidence by Tom Keller](https://booksvooks.com/creative-confidence-unleashing-the-creative-potential-within-us-all-pdf.html)
-- [Podcast What is wrong with UX?](https://www.usersknow.com/podcast/2016/10/10/ua1wdsszhx2pemugxc1e0qj0a3l9cs)
-- [Brainwriting #2](https://dux.typepad.com/dux/2011/01/method-2-of-100-brainwriting-brainwriting-is-an-ideation-method-for-quickly-generating-ideas-by-asking-people-to-write-thei.html)
-
-**Quote:**
-
-Chances are that... If you have gone through all possible solutions, you’ve found the good one.

subjects/user-experience/piscine-ux/athele-keep-hydrated/personas/README.md

@@ -1,39 +0,0 @@
-## Personas
-
-### Instructions
-
-- Create a user (Pierre) persona based on several users from the same category.
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-Use the material you got from the exercise `User interview` to build the pierre persona. The following must be present in the document:
-
-- Pierre's persona card with a picture.
-- A quote extracted from the interview scripts.
-- A description of Pierre that is a mix of Joe, Nathan, Guillaume, and Anaelle’s stories.
-- He must have at least 2 goals, habits and frustrations.
-- Insights from the exercise `User interview` must be included in Pierre's persona card.
-
-### Deliverables
-
-- A user persona on a PDF document.
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
-- You may use Figma and extract a PDF document out of it.
-- Detect people who face the same kinds of problems and group them.
-- When you find 2 or more persons who face the same kind of problem, you can merge their testimonials to create a persona. In this case, Joe, Nathan, Guillaume and Anaelle who run races from time to time (they have run at least one race in their life, but less than 3 times a year) and have faced dehydration problems.
-- A persona is fictional: do not use one of your users names, but a name that is consistent with your users demographics and social group. In this case, we'll choose a man, as 3 out of 4 are men, and Pierre as a first name so it's different (but consistent) from Joe's, Nathan's, Guillaume's and Anaelle's.
-- As to the age, average the ages of your selected users. In this case, 32 (Joe is 30, Nathan is 39, Guillaume is 30 and Anaelle is 29).
-- The persona has to be sport-oriented, as it is the context of this research. However, broader information, like the scan info (jobs, location, etc.) are more than welcome to give more context.
-
-**Resources:**
-
-- [Make your persona great again](https://uxdesign.cc/personas-e60c1c06ead1)
-- [Persona, journey maps, user flow, site map, OH MY!](https://uxdesign.cc/personas-journey-maps-site-maps-and-user-flows-oh-my-e71d044b4bcb)
-- [Persona framework](https://miro.medium.com/max/1400/0*RbHfR6BHhhFIENNf)
-
-**Quote:**
-
-"Focus unswervingly, on the customer’ Jesse Hertzberg | Former COO of Squarespace

subjects/user-experience/piscine-ux/athele-keep-hydrated/problem-statement/README.md

@@ -1,47 +0,0 @@
-## Problem Statement
-
-### Instructions
-
-Based on the insights from the exercises `analytics` and `user interviews`, comment the scope of possible problem statements.
-
-- On a PDF document, write down one problem statement that summarizes the main problem that Pierre has when he runs.
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-### Deliverables
-
-- A PDF document.
-
-**Tips:**
-
-- At this stage, it’s important to focus on the problem, not on the solution! You can start tackling the problem after (re)defining it.
-- Several problem statements can be possible for each persona and user journey, but for this exercise, we are guiding you towards one.
-
-- Examples of a correct problem statements:
-
-  - How might we help Pierre (or your persona) measure and prepare his hydration before a race?
-  - How might we make sure Pierre doesn’t get dehydrated?
-  - How might we make sure Pierre drinks the cups that are offered during the race?
-  - How might we provide Pierre some drink that contains everything he needs to avoid dehydration?
-  - How might we make sure Pierre doesn’t get drunk the night before the race?
-
-- Examples of wrong problem statements:
-  - How might we make sure Pierre doesn’t get dehydrated?
-    - Too broad —> The problem statement is out of the scope of running, so the solutions cannot be integrated in the specific context of running.
-  - How might we make sure Pierre drinks the cups that are offered during the race?
-    - Too narrow —> There are plenty of options to avoid dehydration without drinking the cups that are offered during the race.
-  - How might we provide Pierre with a drink that contains everything he needs to avoid dehydration?
-    - Focused on the solution, not the problem —> The problem statement is supposed to rephrase the brief and take into account the insights from the previous phase.
-  - How might make sure Pierre doesn’t get drunk the night before the race?
-    - Out of scope —> This is not about dehydration, nor about running.
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Stuck on a problem? Just ask how might we](https://relab.academy/design-thinking/stuck-on-a-problem-just-ask-how-might-we/)
-- [Problem statement](https://www.indeed.com/career-advice/career-development/what-is-a-problem-statement)
-- [Using "How Might We’ Questions to Ideative on the Right Problems](https://www.nngroup.com/articles/how-might-we-questions/)
-
-**Quote:**
-
-“If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.” Albert Einstein

subjects/user-experience/piscine-ux/athele-keep-hydrated/prototyping/README.md

@@ -1,31 +0,0 @@
-## Prototyping
-
-### Instructions
-
-Develop the idea you got in the exercise `ideation`!
-
-Design a storyboard of Pierre (or your persona) using your idea as a solution. Show all the steps with drawings on paper (6 to 12 steps).
-
-### Deliverables
-
-- Pictures of 1 storyboard to describe your solution, on paper.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- 1 drawing per action
-
-**Resources:**
-
-- [How UX storyboards can transform your creative process](https://uxdesign.cc/ux-storyboarding-2ce43875f3de?sk=41b28ecef8c52d9944e5e636881111cf)
-- [17 reasons to use storyboards in UX design](https://uxdesign.cc/17-reasons-to-use-a-storyboards-in-ux-design-2bc6fea73e20?source=friends_link&sk=5bb2722f1f9ff06d4f22b0abfe52f508)
-- [How to storyboard experiences](https://uxdesign.cc/how-to-storyboard-experiences-fc051e2bc04d)
-- [Using comic strips and storyboards to test your UX concepts](https://uxdesign.cc/using-comic-strips-and-storyboards-to-test-your-ux-concepts-cccad7ac7f71)
-
-**Quote:**
-
-“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences” Don Norman

subjects/user-experience/piscine-ux/athele-keep-hydrated/user-interviews/README.md

@@ -1,78 +0,0 @@
-## User Interviews
-
-**Context:**
-
-Welcome to the very first quest of this program.
-
-Your mission, should you choose to accept it, is to find a way to improve athletes’ experience related to their hydration when running.
-
-This first project is very special: you are asked to end up with a non-digital solution. As a matter of fact, innovation does not always rhyme with digital. So let’s be creative and get out of the box!
-
-**General recommendations:**
-
-- Get Out of the Box. Be curious. Follow design trends on YouTube, LinkedIn, in podcasts, on Instagram accounts. Explore the internet when you discover a new concept. Build your own design culture.
-- Document everything you do, take notes, open a medium account to identify and show your deliverables, thoughts and feedback. It will be useful for your portfolio!
-- Trust the design process. One step after another.
-- Design needs to fail. 
-  Failure is even a necessary step, but ideally it should happen before a product is launched, during the prototype and test phases
-- Make connections. Use LinkedIn, your friends, friends of friends to frequently meet designers and ask them about how they practice design in their organization. Who know, some day they may remember you and offer you a contract!
-
-### Instructions
-
-- Read all the scripts very carefully.
-- Extract at least 6 insights and write them down on a PDF file.
-  - Insights must be either shared by several people or consistent with what other people have already experienced.
-  - For each insight, name who said it.
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Definition of 'insight': A key learning from what you have seen, read or heard.**
-
-### Deliverables
-
-- A PDF document.
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
-- Examples of insights from the scripts (non-exhaustive list):
-
-  - Runs several times a week (Joe, Nathan, Guillaume, Anaelle)
-  - Doesn’t drink too much right before the race because it hurts my stomach (Nathan, Anaelle)
-  - I run races with friends or peers (Joe, Nathan, Guillaume)
-
-**Interview guide:**
-
-- The following is the interview script used to conduct the seven user interviews.
-
-Hello! My name is Agathe and I am conducting research about athletes and people who practice sports regularly. Hence, I'd be very happy to ask you some questions about the way you run, your habits, and the pain points you may have.
-
-This interview will probably last 20 to 30 minutes.
-
-Do you have any questions before we start?
-
-Run
-
-- What sports do you practice?
-- How often do you run?
-- When was the last time you went out for a run?
-
-Races
-
-- What was the last race you ran?
-- How was it? Tell me about the experience you had.
-- How did you get prepared?
-- What would you have done differently? Why?
-
-Hydration
-
-- What do you remember about the way you hydrated?
-- How did you manage your hydration?
-- Have you ever found yourself in trouble due to hydration? What happened?
-- What would you never do again? Why?
-
-That's it, we went through all the questions I had.
-
-Thank you so much for your time!
-
-I have a last favor to ask you: is there anyone you know who runs frequently and would be available for a talk?

subjects/user-experience/piscine-ux/athele-keep-hydrated/user-journey/README.md

@@ -1,43 +0,0 @@
-## User Journey
-
-### Instructions
-
-Based on your persona card, and the interview scripts, design Pierre’s user journey.
-
-The journey must contain:
-
-    - A timeline that show the journey of your persona step by step, before, during and after running a race divided into phases.
-    - Pierre’s actions must be written on the timeline and for each action, a thought must be written and for every thought a main emotion must be present.
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-### Deliverables
-
-- A Figma file with Pierre’s user journey.
-
-**Tips:**
-
-- You may use Figma.
-- Mix up some insights and details from the interview scripts to write a journey that is consistent with Pierre’s personality.
-- You can, for instance, describe Pierre’s first marathon. The first phase could be the preparation, the second phase the race itself, and the third one how he feels about the race when he has done it.
-- Break down the story step-by-step and define Pierre’s actions.
-- Focus on each action and define Pierre’s thoughts and main emotion among the list.
-- Adapt the line to Pierre’s thoughts and emotions.
-- Define the opportunities to improve Pierre’s overall experience every time you see a pain point.
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-Most articles you'll find will be about user journeys or customer journeys. Keep in mind that you can adapt this methodology to any persona with any kind of situation or process, even at school, outside the school, in the digital world, etc.
-
-- [Tool: User Journey Mapping Template on Figma](https://www.figma.com/file/sXdUDoTXwItU7dyQYVkY1w/Tool---User-Journey-Map)
-- [A Lean UX Customer Journey Map](https://uxdesign.cc/proto-journey-a-lean-ux-customer-journey-map-30ea3a241edc)
-- [How to create a Customer Journey Map](https://www.youtube.com/watch?v=mSxpVRo3BLg)
-- [Journey Mapping: How to build it](https://www.lucidchart.com/blog/how-to-build-customer-journey-maps)
-- [Journey Mapping : Template on Figma](https://www.figma.com/file/5tittjiznRCWTNR2xI5FIT/Untitled?node-id=0%3A1)
-- [Example](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png)
-
-**Quote:**
-
-'It’s about catching customers in the act, and providing highly relevant and highly contextual information’ Paul Maritz | CEO Pivotal

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/README.md

@@ -0,0 +1,240 @@
+## Affinity diagram & Empathy map
+
+### Instructions
+
+Open your written scripts and extract the relevant information.
+
+1. Use paper or digital sticky notes (Post-its or Miro.com) to isolate the pieces of information your interviewees shared with you.
+
+   **1 idea, quote, or piece of information = 1 sticky note.**
+
+2. When all your scripts are written/typed down on sticky notes, gather them in clusters based on themes, opinions, habits, or anything they could have in common.
+3. Label the clusters.
+4. Draw conclusions.
+5. Fill an empathy map ONLY with the content from your affinity diagram.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+### Deliverables
+
+- An Affinity Diagram (pictures of the Affinity Diagram on paper or on digital tools like Miro)
+- An Empathy Map (pictures of the Empathy Map on paper or on digital tools like Miro)
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [What is an Affinity Diagram and how to use it](https://miro.com/blog/create-affinity-diagrams/)
+- [Affinity Diagram and Relation Examples](https://www.youtube.com/watch?v=VngWHIE4k9s)
+- [Updates Empathy Map Canvas by Dave Gray](https://medium.com/the-xplane-collection/updated-empathy-map-canvas-46df22df3c8a)
+- [Empathy Map by Krisztina Szerovay](https://uxknowledgebase.com/empathy-map-ca037e7686b6)
+
+**Quote:**
+
+Remember, you are not the user, so your opinions are not absolute truth.
+## Interview guide
+
+**Context:**
+
+Welcome to the 2nd quest.
+
+Your mission, should you choose to accept it, is to focus on going on holidays with friends. As you may have noticed, experiencing weekends or other kinds of holidays is super nice, but may lead to some moments of irritation.
+
+So this project’s goal is to make holidays more comfortable fo everyone. But first, as in all design processes, you need to understand the real problem behind stressful moments!
+
+### Instructions
+
+You need to create an interview guide to get information from your user.
+
+And remember, you are not your user!
+
+**Deliverable:**
+
+- A PDF document with an interview guide.
+
+**Tips:**
+
+Here are the recommended steps :
+
+- Define your objective, what you are looking for when interviewing people. Usually, this has to do with your user's habits, and the most painful problems they have regarding this topic.
+- Write down 1 to 3 hypotheses you have regarding this topic, that needs to be either confirmed or disproved.
+- Pick 3 to 5 main topics you need to get information on.
+- For each topic, write 1 to 3 open-ended questions with a maximum of 10 questions. Remember, your user cannot answer with “Yes” or “No!” Ex: How, Why, What, When, Tell me about the last time you did... etc. If you really need to introduce a new topic by a close-ended question, ask why right after.
+- Write some screening questions to have a few pieces of demographics (age, job, location, etc.)
+- Structure your questions in a funnel, start with broad questions to focus on specific topics or situations. Remember to stay neutral in your tone to let the user tell their own story. Try to focus on 10 main questions.
+- Write a greeting introduction, describing briefly (1) who you are and (2) what you are looking for. No need to say too much, but enough to provide a framework and the purpose of the interview.
+- Write a conclusion to thank your user for their time, and prepare the next steps. Ex: ask to be put in touch with someone they know and who could be interested in this topic, etc.
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Respondent - Tool to find users](https://www.respondent.io)
+- [How to conduct user interviews](https://uxdesign.cc/how-to-conduct-user-interviews-fe4b8c34b0b7?sk=9625632a522a9309a91297191e668565)
+- [How to design better products through user interviews](https://uxdesign.cc/how-to-design-better-products-through-user-interviews-4c5142bb1fc4)
+- [Asking the right questions](https://uxdesign.cc/asking-the-right-questions-on-user-research-interviews-and-testing-427261742a67)
+- Podcast recommendation: [How to Ask Great UX Research Questions](https://open.spotify.com/episode/5UlvTKyVObeCDxkc8DAakU?si=fjMEHCdjRXWkYhwKhxIopQ)
+
+**Quote:**
+
+“To ask open-ended questions is the best approach, but it’s easy to get into the weeds in data analysis when every answer is a paragraph or two of prose. Users quickly tire of answering many open-ended questions, which usually require a lot of typing and explanation.” Norman Nielsen Group
+## Run interviews
+
+### Instructions
+
+You must run 6 interviews in pairs, one being the interviewer and the other the note taker.
+Go outside! Meet random people in cafés, at the bus, on city squares, in parks, on benches, introduce yourself and ask for 15 minutes of their time. Run your interview guide and write down anything that could be helpful, like reactions, hesitations, etc. You can use a dictaphone to make sure you're not missing anything. But in this case, let the interviewee know and ask for their permission!
+You can offer them a coffee to thank them, sometimes a smile suffices!
+At least 3 of your interviews must be with strangers. You'd be surprised how people are happy to help and looooove talking about themselves.
+
+Then, write down the script on a written document, and give elements of context regarding each interview (place, time, name, etc.)
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+### Deliverables
+
+- A PDF document with the scripts from all the 6 interviews.
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## Second Ideation
+
+### Instructions
+
+To find creative solutions to your problem statement, use one of these techniques in groups of 5 people, twice.
+
+1. Gather in groups of 2. During the first run, one is the facilitator and the other is the time-keeper and in charge of logistics. Switch roles for the second run.
+
+2. Get as many ideas as possible within a defined timeframe, and narrow them down to 3 main ideas with a voting process (in pair or in group). Take pictures!
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+### Deliverables
+
+- A PDF document that includes the script with all the steps + logistics.
+- Pictures of the 2 sessions.
+- A PDF document with 3 ideas that came out the 2 workshops.
+
+**Tips:**
+
+Ideation techniques:
+
+- [Worst Idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
+- [Brainwriting](https://business.tutsplus.com/tutorials/how-to-use-brainwriting-for-rapid-idea-generation--cms-26451)
+- [Mash Up](https://cdn.shopify.com/s/files/1/0259/7876/5396/files/IDEO_U_Ideation_Method_Mash-Up.pdf?33258)
+- As to the script, you can refer to "Athlete, keep hydrated" Quest, Ideation Exercise.
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Where Good ideas come from by Steven Johnson](https://www.ted.com/talks/steven_johnson_where_good_ideas_come_from)
+- [Creative Confidence by Tom Keller](https://booksvooks.com/nonscrolablepdf/creative-confidence-unleashing-the-creative-potential-within-us-all-pdf-1.html?page=1)
+- [Podcast What is wrong with UX?](https://www.usersknow.com/podcast/2016/10/10/ua1wdsszhx2pemugxc1e0qj0a3l9cs)
+- [Brainwriting #2](https://dux.typepad.com/dux/2011/01/method-2-of-100-brainwriting-brainwriting-is-an-ideation-method-for-quickly-generating-ideas-by-asking-people-to-write-thei.html)
+- [Voting process at the end of an ideation workshop](https://www.interaction-design.org/literature/article/how-to-select-the-best-idea-by-the-end-of-an-ideation-session)
+
+Quote:
+
+- "Brainstorming means using the brain to storm a creative problem. Do so in commando fashion, with each stormer attacking the same objective.’ Alex Faickney Osborn
+## Second problem statement
+
+### Instructions
+
+Based on your previous work and your empathy map, define a problem statement that would clarify the main problem you want to tackle.
+
+You may use the "How Might We" exercise in pairs.
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Deliverable:**
+
+- A PDF document with a problem statement starting with a "How Might We"
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Stuck on a problem? Just ask how might we](https://relab.academy/design-thinking/stuck-on-a-problem-just-ask-how-might-we/)
+- [Problem statement](https://www.indeed.com/career-advice/career-development/what-is-a-problem-statement)
+- [Using "How Might We’ Questions to Ideate on the Right Problems](https://www.nngroup.com/articles/how-might-we-questions/)
+
+**Quote:**
+
+"Out of clutter, find simplicity. From discord, find harmony. In the middle of difficulty, lies opportunity.’ Albert Einstein
+## Second prototyping
+
+### Instructions
+
+Give another dimension to your user flow and turn it into a paper prototype (6 to 12 screens max).
+
+- First, draw low-fidelity prototypes on paper. One main screen = 1 mobile frame. No micro-interactions nor multistate are needed for this exercise.
+- Test the prototype with 3 people. To do so, prepare a usability testing guide following the [Design Sprint Five-Act interview](https://www.youtube.com/watch?v=U9ZG19XTbd4)
+- Then, draw your mid-fidelity screens on Figma with simple shapes, in black and white.
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+
+### Deliverables
+
+- Pictures of a paper prototype.
+- Figma file with the Wireframes (mid-fi).
+
+**Tips:**
+
+- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
+- Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
+- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
+
+**Resources:**
+
+- Google Ventures - Design Sprint: The Five-Act interview
+- Example: [Paper Prototyping - The Practical Beginners guide](https://www.uxpin.com/studio/blog/paper-prototyping-the-practical-beginners-guide/)
+- Example: [Wellness App](https://medium.com/@ebtaskin/story-of-my-very-first-ux-ui-design-project-at-ironhack-bootcamp-955addeb760e)
+- [Android Mobile Template](https://i.pinimg.com/originals/43/8e/de/438ede24264eb9552b635d34142eac29.png)
+- [iPhone Template](https://www.cssauthor.com/wp-content/uploads/2014/01/iPhone-5S-Template-PSD.jpg)
+- Figma
+
+**Quote:**
+
+Any design is like a joke …if you have to explain it, it’s bad.
+## User flow
+
+### Instructions
+
+Structure your main ideas into a comprehensive user flow.
+You can include one, two, of the three main ideas from your previous exercise "Second Ideation" process, depending on how consistent it would be for the users.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Deliverable:**
+
+- A comprehensive user flow on a board (digital or pictures of a paper version).
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [User flow glossary](https://www.productplan.com/glossary/user-flow/)
+- [Site flows vs User Flows](https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/)
+- [How to make a User Flow diagram](https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram)
+
+**Quote:**
+
+"Each use case is represented as a sequence of simple steps, beginning with a user’s goal and ending when that goal is fulfilled.’ Usability.gov

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/affinity-diagram/README.md

@@ -1,39 +0,0 @@
-## Affinity diagram & Empathy map
-
-### Instructions
-
-Open your written scripts and extract the relevant information.
-
-1. Use paper or digital sticky notes (Post-its or Miro.com) to isolate the pieces of information your interviewees shared with you.
-
-   **1 idea, quote, or piece of information = 1 sticky note.**
-
-2. When all your scripts are written/typed down on sticky notes, gather them in clusters based on themes, opinions, habits, or anything they could have in common.
-3. Label the clusters.
-4. Draw conclusions.
-5. Fill an empathy map ONLY with the content from your affinity diagram.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-### Deliverables
-
-- An Affinity Diagram (pictures of the Affinity Diagram on paper or on digital tools like Miro)
-- An Empathy Map (pictures of the Empathy Map on paper or on digital tools like Miro)
-
-**Tips:**
-
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [What is an Affinity Diagram and how to use it](https://miro.com/blog/create-affinity-diagrams/)
-- [Affinity Diagram and Relation Examples](https://www.youtube.com/watch?v=VngWHIE4k9s)
-- [Updates Empathy Map Canvas by Dave Gray](https://medium.com/the-xplane-collection/updated-empathy-map-canvas-46df22df3c8a)
-- [Empathy Map by Krisztina Szerovay](https://uxknowledgebase.com/empathy-map-ca037e7686b6)
-
-**Quote:**
-
-Remember, you are not the user, so your opinions are not absolute truth.

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/interview-guide/README.md

@@ -1,47 +0,0 @@
-## Interview guide
-
-**Context:**
-
-Welcome to the 2nd quest.
-
-Your mission, should you choose to accept it, is to focus on going on holidays with friends. As you may have noticed, experiencing weekends or other kinds of holidays is super nice, but may lead to some moments of irritation.
-
-So this project’s goal is to make holidays more comfortable fo everyone. But first, as in all design processes, you need to understand the real problem behind stressful moments!
-
-### Instructions
-
-You need to create an interview guide to get information from your user.
-
-And remember, you are not your user!
-
-**Deliverable:**
-
-- A PDF document with an interview guide.
-
-**Tips:**
-
-Here are the recommended steps :
-
-- Define your objective, what you are looking for when interviewing people. Usually, this has to do with your user's habits, and the most painful problems they have regarding this topic.
-- Write down 1 to 3 hypotheses you have regarding this topic, that needs to be either confirmed or disproved.
-- Pick 3 to 5 main topics you need to get information on.
-- For each topic, write 1 to 3 open-ended questions with a maximum of 10 questions. Remember, your user cannot answer with “Yes” or “No!” Ex: How, Why, What, When, Tell me about the last time you did... etc. If you really need to introduce a new topic by a close-ended question, ask why right after.
-- Write some screening questions to have a few pieces of demographics (age, job, location, etc.)
-- Structure your questions in a funnel, start with broad questions to focus on specific topics or situations. Remember to stay neutral in your tone to let the user tell their own story. Try to focus on 10 main questions.
-- Write a greeting introduction, describing briefly (1) who you are and (2) what you are looking for. No need to say too much, but enough to provide a framework and the purpose of the interview.
-- Write a conclusion to thank your user for their time, and prepare the next steps. Ex: ask to be put in touch with someone they know and who could be interested in this topic, etc.
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Respondent - Tool to find users](https://www.respondent.io)
-- [How to conduct user interviews](https://uxdesign.cc/how-to-conduct-user-interviews-fe4b8c34b0b7?sk=9625632a522a9309a91297191e668565)
-- [How to design better products through user interviews](https://uxdesign.cc/how-to-design-better-products-through-user-interviews-4c5142bb1fc4)
-- [Asking the right questions](https://uxdesign.cc/asking-the-right-questions-on-user-research-interviews-and-testing-427261742a67)
-- Podcast recommendation: [How to Ask Great UX Research Questions](https://open.spotify.com/episode/5UlvTKyVObeCDxkc8DAakU?si=fjMEHCdjRXWkYhwKhxIopQ)
-
-**Quote:**
-
-“To ask open-ended questions is the best approach, but it’s easy to get into the weeds in data analysis when every answer is a paragraph or two of prose. Users quickly tire of answering many open-ended questions, which usually require a lot of typing and explanation.” Norman Nielsen Group

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/run-interviews/README.md

@@ -1,21 +0,0 @@
-## Run interviews
-
-### Instructions
-
-You must run 6 interviews in pairs, one being the interviewer and the other the note taker.
-Go outside! Meet random people in cafés, at the bus, on city squares, in parks, on benches, introduce yourself and ask for 15 minutes of their time. Run your interview guide and write down anything that could be helpful, like reactions, hesitations, etc. You can use a dictaphone to make sure you're not missing anything. But in this case, let the interviewee know and ask for their permission!
-You can offer them a coffee to thank them, sometimes a smile suffices!
-At least 3 of your interviews must be with strangers. You'd be surprised how people are happy to help and looooove talking about themselves.
-
-Then, write down the script on a written document, and give elements of context regarding each interview (place, time, name, etc.)
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-### Deliverables
-
-- A PDF document with the scripts from all the 6 interviews.
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/second-ideation/README.md

@@ -1,42 +0,0 @@
-## Second Ideation
-
-### Instructions
-
-To find creative solutions to your problem statement, use one of these techniques in groups of 5 people, twice.
-
-1. Gather in groups of 2. During the first run, one is the facilitator and the other is the time-keeper and in charge of logistics. Switch roles for the second run.
-
-2. Get as many ideas as possible within a defined timeframe, and narrow them down to 3 main ideas with a voting process (in pair or in group). Take pictures!
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-### Deliverables
-
-- A PDF document that includes the script with all the steps + logistics.
-- Pictures of the 2 sessions.
-- A PDF document with 3 ideas that came out the 2 workshops.
-
-**Tips:**
-
-Ideation techniques:
-
-- [Worst Idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
-- [Brainwriting](https://business.tutsplus.com/tutorials/how-to-use-brainwriting-for-rapid-idea-generation--cms-26451)
-- [Mash Up](https://cdn.shopify.com/s/files/1/0259/7876/5396/files/IDEO_U_Ideation_Method_Mash-Up.pdf?33258)
-- As to the script, you can refer to "Athlete, keep hydrated" Quest, Ideation Exercise.
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Where Good ideas come from by Steven Johnson](https://www.ted.com/talks/steven_johnson_where_good_ideas_come_from)
-- [Creative Confidence by Tom Keller](https://booksvooks.com/nonscrolablepdf/creative-confidence-unleashing-the-creative-potential-within-us-all-pdf-1.html?page=1)
-- [Podcast What is wrong with UX?](https://www.usersknow.com/podcast/2016/10/10/ua1wdsszhx2pemugxc1e0qj0a3l9cs)
-- [Brainwriting #2](https://dux.typepad.com/dux/2011/01/method-2-of-100-brainwriting-brainwriting-is-an-ideation-method-for-quickly-generating-ideas-by-asking-people-to-write-thei.html)
-- [Voting process at the end of an ideation workshop](https://www.interaction-design.org/literature/article/how-to-select-the-best-idea-by-the-end-of-an-ideation-session)
-
-Quote:
-
-- "Brainstorming means using the brain to storm a creative problem. Do so in commando fashion, with each stormer attacking the same objective.’ Alex Faickney Osborn

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/second-problem-statement/README.md

@@ -1,28 +0,0 @@
-## Second problem statement
-
-### Instructions
-
-Based on your previous work and your empathy map, define a problem statement that would clarify the main problem you want to tackle.
-
-You may use the "How Might We" exercise in pairs.
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Deliverable:**
-
-- A PDF document with a problem statement starting with a "How Might We"
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Stuck on a problem? Just ask how might we](https://relab.academy/design-thinking/stuck-on-a-problem-just-ask-how-might-we/)
-- [Problem statement](https://www.indeed.com/career-advice/career-development/what-is-a-problem-statement)
-- [Using "How Might We’ Questions to Ideate on the Right Problems](https://www.nngroup.com/articles/how-might-we-questions/)
-
-**Quote:**
-
-"Out of clutter, find simplicity. From discord, find harmony. In the middle of difficulty, lies opportunity.’ Albert Einstein

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/second-prototyping/README.md

@@ -1,34 +0,0 @@
-## Second prototyping
-
-### Instructions
-
-Give another dimension to your user flow and turn it into a paper prototype (6 to 12 screens max).
-
-- First, draw low-fidelity prototypes on paper. One main screen = 1 mobile frame. No micro-interactions nor multistate are needed for this exercise.
-- Test the prototype with 3 people. To do so, prepare a usability testing guide following the [Design Sprint Five-Act interview](https://www.youtube.com/watch?v=U9ZG19XTbd4)
-- Then, draw your mid-fidelity screens on Figma with simple shapes, in black and white.
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-
-### Deliverables
-
-- Pictures of a paper prototype.
-- Figma file with the Wireframes (mid-fi).
-
-**Tips:**
-
-- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
-- Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
-- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
-
-**Resources:**
-
-- Google Ventures - Design Sprint: The Five-Act interview
-- Example: [Paper Prototyping - The Practical Beginners guide](https://www.uxpin.com/studio/blog/paper-prototyping-the-practical-beginners-guide/)
-- Example: [Wellness App](https://medium.com/@ebtaskin/story-of-my-very-first-ux-ui-design-project-at-ironhack-bootcamp-955addeb760e)
-- [Android Mobile Template](https://i.pinimg.com/originals/43/8e/de/438ede24264eb9552b635d34142eac29.png)
-- [iPhone Template](https://www.cssauthor.com/wp-content/uploads/2014/01/iPhone-5S-Template-PSD.jpg)
-- Figma
-
-**Quote:**
-
-Any design is like a joke …if you have to explain it, it’s bad.

subjects/user-experience/piscine-ux/going-on-holidays-with-friends/user-flow/README.md

@@ -1,29 +0,0 @@
-## User flow
-
-### Instructions
-
-Structure your main ideas into a comprehensive user flow.
-You can include one, two, of the three main ideas from your previous exercise "Second Ideation" process, depending on how consistent it would be for the users.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Deliverable:**
-
-- A comprehensive user flow on a board (digital or pictures of a paper version).
-
-**Tips:**
-
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [User flow glossary](https://www.productplan.com/glossary/user-flow/)
-- [Site flows vs User Flows](https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/)
-- [How to make a User Flow diagram](https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram)
-
-**Quote:**
-
-"Each use case is represented as a sequence of simple steps, beginning with a user’s goal and ending when that goal is fulfilled.’ Usability.gov

subjects/user-experience/piscine-ux/lets-fight-harassment/README.md

@@ -0,0 +1,289 @@
+## Broadcast strategy
+
+### Instructions
+
+Define and run your broadcast strategy among teenagers (15-18 years old)
+
+Even though a proper survey requires at least 100 answers, for this exercise we request you to get 40.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+### Deliverables
+
+- A PDF document gathering your strategy.
+  Please include:
+  - Who you are targeting (remember, you can focus on your hometown as well as the whole planet)
+  - A few ideas about how to reach them.
+  - The channels you intend to use - be specific and include the links to the groups, forums, pages, account you plan to reach.(at least 8 different channels)
+  - At least 2 different messages.
+  - A plan A, B and C.
+  - the 40 answers or more.
+- A document to express your main feedback after running your broadcast strategy: what worked best? have you encountered any difficulties? What were they? How did you overcome them?
+
+**Tips:**
+
+In order to do so, you need to be creative and strategic!
+
+- Who are you targeting? Teenagers, bullies, persecutor, witnesses, parents, teachers, people in the administration? From where?
+- How can you reach them? Through which channels? On which forums, groups, with which hashtags? Will you try to get them through influencers?
+- What words and what tone will you use?
+- How will you approach them? What message will you write?
+- What have you planned if they don't answer right away?
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+Once your strategy is prepared, run it!
+
+**Resource:**
+
+- [How to get more survey responses](https://rafflepress.com/how-to-get-more-survey-responses/)
+## Competitive Analysis
+
+**Context:**
+
+Quest n°3 is about Empathy.
+
+In this scenario, the principal of your high school heard you were a designer. They chose to reach you to help them face school harassment among teenagers.
+
+School harassment describes school-based harassment behaviors. It is characterized by the repeated use of violence, including mockery and other humiliations.
+
+As a matter of fact, they realized they didn’t know this generation (15 to 18-year-olds) very well. So they are asking you to conduct user research to meet this population and understand them.
+
+Your job is to explore your topic and use various tools included in this “Empathize” phase.
+
+### Instructions
+
+Conduct a competitive analysis among 10 associations or organizations fighting school harassment.
+
+You can pick 10 organizations worldwide, or from your home region or home country. Let's browse!
+
+Compare these 10 organizations' main actions, channels, values, according to the criteria you assume are relevant.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Deliverables:**
+
+- A competitive report with an introduction that explains your main conclusions (PDF)
+- A chart to show the competitive landscape, with 2 axes of your choice (digital, psychological, local, closeness to students, institutional, etc.) (PDF)
+- A competitive table to compare the organizations on 5 to 10 criteria (PDF)
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Competitive Analysis: How to approach it effectively](https://uxdesign.cc/competitive-analysis-how-to-approach-it-effectively-def97d130d2c)
+- [Competitive Analysis Templates](https://venngage.com/blog/competitor-analysis-template/)
+
+**Quote:**
+
+- 'Always design a thing in its larger context: a chair in a room, a room in a house, a house in an environment, an environment in a city plan’ Eero Sarrinen | Knoll
+- Creating a great design isn’t just about understanding what the user wants. It’s also about understanding and delivering on what the business needs.
+## Interviews
+
+### Instructions
+
+- Create an interview guide
+- Conduct 3 interviews with teenagers
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+After knowing more about trends and "What" people do thanks to surveys, the main goal is to understand "why".
+
+### Deliverables
+
+- A PDF document with an interview guide.
+- A PDF document with 3 scripts.
+- An affinity diagram from your interviews (PDF or digital, on Miro or Figma for example)
+
+**Tips:**
+
+Here are the recommended steps :
+
+1. Define your objective, what you are looking for when interviewing people. Usually, this has to do with your user's habits, and the most painful problems they have regarding this topic.
+2. Write down 1 to 3 hypotheses you have regarding this topic, that needs to be either confirmed or disproved.
+3. Pick 3 to 5 main topics you need to get information on.
+4. For each topic, write 1 to 3 open-ended questions. Remember, your user cannot answer with “Yes” or “No”! Ex: How, Why, What, When, Tell me about the last time you did... etc. If you really need to introduce a new topic by a close-ended question, ask why right after.
+5. Write some screening questions to have a few pieces of demographics (age, job, location, etc.)
+6. Structure your questions in a funnel: start with broad questions to focus on specific topics or situation. Remember to stay neutral in your tone to let the user tell their own story. Try to focus on 10 main questions.
+7. Write a greeting introduction, describing briefly (1) who you are and (2) what you are looking for. No need to say too much, but enough to provide a framework and the purpose of the interview.
+8. Write a conclusion to thank your user for their time, and prepare the next steps. Ex: ask to be put in touch with someone they know and who could be interested in this topic, etc.
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Respondent - Tool to find users](https://www.respondent.io)
+- [How to conduct user interviews](https://uxdesign.cc/how-to-conduct-user-interviews-fe4b8c34b0b7?sk=9625632a522a9309a91297191e668565)
+- [How to design better products through user interviews](https://uxdesign.cc/how-to-design-better-products-through-user-interviews-4c5142bb1fc4)
+- [Asking the right questions](https://uxdesign.cc/asking-the-right-questions-on-user-research-interviews-and-testing-427261742a67)
+## Second Personas
+
+### Instructions
+
+Let's create a persona based on your quantitative research and your interviews.
+
+Your persona card should include common trends amongst the people you got data from (habits, verbatims, fears, drivers, frustration, and pain points).
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Reminder:** Your persona is fictional and should not have the exact name or picture as someone you interviewed, but remember a persona is here so you can make decisions as a designer.
+
+### Deliverables
+
+- A PDF persona card extracted from a Figma file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Make your persona great again](https://uxdesign.cc/personas-e60c1c06ead1)
+- [Persona, journey maps, user flow, site map, OH MY!](https://uxdesign.cc/personas-journey-maps-site-maps-and-user-flows-oh-my-e71d044b4bcb)
+- [Persona framework](https://miro.medium.com/max/1400/0*RbHfR6BHhhFIENNf)
+
+**Quotes:**
+
+- "If you design for everyone, you delight no one."
+- "A good user persona is the one based on user research, without regard to how many attributes we can describe."
+## Second User Journey
+
+### Instructions
+
+Now you have your persona, it's time to set it in motion.
+
+Design a User Journey to represent your persona in their environment across the time, with key steps or actions related to our current topic (harassment).
+
+The timeline can be of a day, a few hours, or a week. Please include the key moments related to harassment alongside the emotions related to each step. Use the material from your interviews and surveys.
+
+Then, highlight the main pain points that need to be solved.
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Deliverable:**
+
+- A Figma document with your persona's user journey.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+Most articles you'll find will be about user journeys or customer journeys. Keep in mind that you can adapt this methodology to any persona with any kind of situation or process, even at school, outside the school, in the digital world, etc.
+
+- [A Lean UX Customer Journey Map](https://uxdesign.cc/proto-journey-a-lean-ux-customer-journey-map-30ea3a241edc)
+- [How to create a Customer Journey Map](https://www.youtube.com/watch?v=mSxpVRo3BLg)
+- [Journey Mapping: How to build it](https://www.lucidchart.com/blog/how-to-build-customer-journey-maps)
+- [Journey Mapping template](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png)
+- [Journey Mapping example on Figma](https://www.figma.com/file/5tittjiznRCWTNR2xI5FIT/Untitled?node-id=0%3A1)
+- [Example](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png)
+
+**Quotes:**
+
+- “More options = More problems.” Scott Belsky | VP of Product & Community Adobe
+- "A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points’ Norman Nielsen Group
+## Surveys
+
+### Instructions
+
+Prepare a survey to gather quantitative data from your users.
+
+And remember, you are not your user!
+
+To be used in proper studies and get viable results, a form should gather at least 100 answers. The answers should give you countable data you can use to prove a point and confirm trends, not verbatims or details.
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+### Deliverables
+
+- A PDF document including your objective(s) and your hypotheses, the questions, an introduction and a conclusion.
+- In the document, add the link to a survey ready to be spread.
+
+**Tips:**
+
+Here are the recommended steps:
+
+1. Define your objective, what you are looking for when spreading your form to people. Usually, this has to do with figures, proportions, etc.
+2. Write down 1 to 3 hypotheses you have regarding this topic, that you need to either confirm or disprove.
+3. Pick 3 to 5 main topics you need to get information on.
+4. For each topic, write 1 to 3 closed-ended questions. Remember, your user has to answer with a choice in a list of prepared answers or use the option "other" to write down the answer they can't find in the prepared list.
+5. Write some screening questions to have a few pieces of demographics (age, job, location, etc.). This allows you to make sure the answers you get are from your target.
+6. Structure your questions in a funnel: start with broad questions to focus on specific topics or situations. Remember to stay neutral in your tone to ket the user tell their own story. Try to focus on 10 main questions.
+7. Write a greeting introduction, describing briefly (1) who you are and (2) what you are looking for. No need to say too much, but enough to provide a framework and the purpose of the form.
+8. Write a conclusion to thank your user for their time, and prepare the next steps. Ex: ask to have this form spread to 3 people, etc.
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Mandatory: ask them if they would be available for an anonymous in-person interview (over the phone, in-person, through video chat: whatever they are more comfortable with) because you'll have to conduct at least 3 interviews further on.**
+
+**Resources:**
+
+- [Lean Survey Canvas: How to use it](https://medium.com/think-big-work-smart/the-lean-survey-canvas-1b0a00cab200)
+- [User surveys - How to survey your users](https://refiner.io/blog/user-surveys/)
+- [Designing a great survey with 3 simple steps](https://uxdesign.cc/designing-a-great-survey-with-3-simple-steps-283abaa67ad6)
+- [UX Surveys: a quick guide to get the most out of them](https://uxdesign.cc/ux-surveys-a-quick-guide-to-get-the-most-out-of-them-1889d136be6a)
+- [Better research through surveys](https://uxmastery.com/better-user-research-through-surveys/)
+- [The user experience of surveys](https://uxdesign.cc/the-user-experience-of-surveys-a5420c82604a)
+
+**Tools:**
+
+- [Typeform](https://www.typeform.com/)
+- [Google Forms](https://docs.google.com/forms/u/0/)
+
+**Quotes:**
+
+- “Surveys measure and categorize attitudes or collect self-reported data that can help track or discover important issues to address.” Norman Nielsen Group
+- Surveys are not accurate in providing behavioral data because USERS OMIT STEPS IN THE MIDDLE AND MEMORIES ARE FAULTY.
+## Third problem statement
+
+### Instructions
+
+Based on your previous work, your persona and your user journey's main pain point, define a problem statement that would clarify the main problem you want to tackle.
+You may use the "How Might We" exercise in pairs.
+
+Then, define 3 KPIs (Key performance Indicators) that will help you measure the definition of Done and the success of the solution.
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+### Deliverables
+
+- A PDF document with one problem statement and 3 KPIs to measure the impact of the solution
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Stuck on a problem? Just ask ‘How Might We’](https://relab.academy/design-thinking/stuck-on-a-problem-just-ask-how-might-we/)
+- [Problem statement](https://www.indeed.com/career-advice/career-development/what-is-a-problem-statement)
+- [Using ‘How Might We’ Questions to Ideate on the Right Problems](https://www.nngroup.com/articles/how-might-we-questions/)
+- [Unleashing the power of a UX KPI](https://articles.uie.com/power_of_ux_kpi/)
+- [KPI is an imperative tool for UX designers](https://uxdesign.cc/kpi-is-the-most-important-tool-ux-designers-should-be-learning-to-use-af31651120fc?sk=e619213adfda152171d597fc3ab1053a)
+- [Measuring product design impact — KPIs, NPS, UX, WTF](https://uxdesign.cc/measuring-product-design-impact-kpis-nps-ux-wtf-3fe6a26e7400?sk=52c1f3842edbe90524f6da1fe85db71d)
+- [A metrics-driven approach to evaluate success of UX design](https://uxdesign.cc/a-metrics-driven-approach-to-evaluate-success-of-ux-design-dd3bea098820?sk=acf1b1f7f0a7663d34d11906339b4698)
+- [A big list of UX KPIs and metrics](https://www.cxpartners.co.uk/our-thinking/big_list_of_ux_kpis_and_metrics/)
+- [How to use SMART goals to build your KPIs](https://www.grow.com/blog/how-to-use-smart-goals-to-build-your-kpis)
+- Examples of KPIs (fake data! Not to be copied or used!):
+  - Harassment case report rates increase by 20% within 2 years
+  - Online harassment drops by 30% within 5 years
+  - 90% of the 15-18 year-olds knows a harassment witness response process within 2 years
+
+**Quote:**
+
+"Every problem is an opportunity for design. By framing your challenge as a How Might We question, you’ll set yourself up for an innovative solution" IDEO

subjects/user-experience/piscine-ux/lets-fight-harassment/broadcast-stategy/README.md

@@ -1,41 +0,0 @@
-## Broadcast strategy
-
-### Instructions
-
-Define and run your broadcast strategy among teenagers (15-18 years old)
-
-Even though a proper survey requires at least 100 answers, for this exercise we request you to get 40.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-### Deliverables
-
-- A PDF document gathering your strategy.
-  Please include:
-  - Who you are targeting (remember, you can focus on your hometown as well as the whole planet)
-  - A few ideas about how to reach them.
-  - The channels you intend to use - be specific and include the links to the groups, forums, pages, account you plan to reach.(at least 8 different channels)
-  - At least 2 different messages.
-  - A plan A, B and C.
-  - the 40 answers or more.
-- A document to express your main feedback after running your broadcast strategy: what worked best? have you encountered any difficulties? What were they? How did you overcome them?
-
-**Tips:**
-
-In order to do so, you need to be creative and strategic!
-
-- Who are you targeting? Teenagers, bullies, persecutor, witnesses, parents, teachers, people in the administration? From where?
-- How can you reach them? Through which channels? On which forums, groups, with which hashtags? Will you try to get them through influencers?
-- What words and what tone will you use?
-- How will you approach them? What message will you write?
-- What have you planned if they don't answer right away?
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-Once your strategy is prepared, run it!
-
-**Resource:**
-
-- [How to get more survey responses](https://rafflepress.com/how-to-get-more-survey-responses/)

subjects/user-experience/piscine-ux/lets-fight-harassment/competitive-analyss/README.md

@@ -1,46 +0,0 @@
-## Competitive Analysis
-
-**Context:**
-
-Quest n°3 is about Empathy.
-
-In this scenario, the principal of your high school heard you were a designer. They chose to reach you to help them face school harassment among teenagers.
-
-School harassment describes school-based harassment behaviors. It is characterized by the repeated use of violence, including mockery and other humiliations.
-
-As a matter of fact, they realized they didn’t know this generation (15 to 18-year-olds) very well. So they are asking you to conduct user research to meet this population and understand them.
-
-Your job is to explore your topic and use various tools included in this “Empathize” phase.
-
-### Instructions
-
-Conduct a competitive analysis among 10 associations or organizations fighting school harassment.
-
-You can pick 10 organizations worldwide, or from your home region or home country. Let's browse!
-
-Compare these 10 organizations' main actions, channels, values, according to the criteria you assume are relevant.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Deliverables:**
-
-- A competitive report with an introduction that explains your main conclusions (PDF)
-- A chart to show the competitive landscape, with 2 axes of your choice (digital, psychological, local, closeness to students, institutional, etc.) (PDF)
-- A competitive table to compare the organizations on 5 to 10 criteria (PDF)
-
-**Tips:**
-
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Competitive Analysis: How to approach it effectively](https://uxdesign.cc/competitive-analysis-how-to-approach-it-effectively-def97d130d2c)
-- [Competitive Analysis Templates](https://venngage.com/blog/competitor-analysis-template/)
-
-**Quote:**
-
-- 'Always design a thing in its larger context: a chair in a room, a room in a house, a house in an environment, an environment in a city plan’ Eero Sarrinen | Knoll
-- Creating a great design isn’t just about understanding what the user wants. It’s also about understanding and delivering on what the business needs.

subjects/user-experience/piscine-ux/lets-fight-harassment/interviews/README.md

@@ -1,41 +0,0 @@
-## Interviews
-
-### Instructions
-
-- Create an interview guide
-- Conduct 3 interviews with teenagers
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-After knowing more about trends and "What" people do thanks to surveys, the main goal is to understand "why".
-
-### Deliverables
-
-- A PDF document with an interview guide.
-- A PDF document with 3 scripts.
-- An affinity diagram from your interviews (PDF or digital, on Miro or Figma for example)
-
-**Tips:**
-
-Here are the recommended steps :
-
-1. Define your objective, what you are looking for when interviewing people. Usually, this has to do with your user's habits, and the most painful problems they have regarding this topic.
-2. Write down 1 to 3 hypotheses you have regarding this topic, that needs to be either confirmed or disproved.
-3. Pick 3 to 5 main topics you need to get information on.
-4. For each topic, write 1 to 3 open-ended questions. Remember, your user cannot answer with “Yes” or “No”! Ex: How, Why, What, When, Tell me about the last time you did... etc. If you really need to introduce a new topic by a close-ended question, ask why right after.
-5. Write some screening questions to have a few pieces of demographics (age, job, location, etc.)
-6. Structure your questions in a funnel: start with broad questions to focus on specific topics or situation. Remember to stay neutral in your tone to let the user tell their own story. Try to focus on 10 main questions.
-7. Write a greeting introduction, describing briefly (1) who you are and (2) what you are looking for. No need to say too much, but enough to provide a framework and the purpose of the interview.
-8. Write a conclusion to thank your user for their time, and prepare the next steps. Ex: ask to be put in touch with someone they know and who could be interested in this topic, etc.
-
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Respondent - Tool to find users](https://www.respondent.io)
-- [How to conduct user interviews](https://uxdesign.cc/how-to-conduct-user-interviews-fe4b8c34b0b7?sk=9625632a522a9309a91297191e668565)
-- [How to design better products through user interviews](https://uxdesign.cc/how-to-design-better-products-through-user-interviews-4c5142bb1fc4)
-- [Asking the right questions](https://uxdesign.cc/asking-the-right-questions-on-user-research-interviews-and-testing-427261742a67)

subjects/user-experience/piscine-ux/lets-fight-harassment/second-personas/README.md

@@ -1,31 +0,0 @@
-## Second Personas
-
-### Instructions
-
-Let's create a persona based on your quantitative research and your interviews.
-
-Your persona card should include common trends amongst the people you got data from (habits, verbatims, fears, drivers, frustration, and pain points).
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Reminder:** Your persona is fictional and should not have the exact name or picture as someone you interviewed, but remember a persona is here so you can make decisions as a designer.
-
-### Deliverables
-
-- A PDF persona card extracted from a Figma file.
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Make your persona great again](https://uxdesign.cc/personas-e60c1c06ead1)
-- [Persona, journey maps, user flow, site map, OH MY!](https://uxdesign.cc/personas-journey-maps-site-maps-and-user-flows-oh-my-e71d044b4bcb)
-- [Persona framework](https://miro.medium.com/max/1400/0*RbHfR6BHhhFIENNf)
-
-**Quotes:**
-
-- "If you design for everyone, you delight no one."
-- "A good user persona is the one based on user research, without regard to how many attributes we can describe."

subjects/user-experience/piscine-ux/lets-fight-harassment/second-user-journey/README.md

@@ -1,38 +0,0 @@
-## Second User Journey
-
-### Instructions
-
-Now you have your persona, it's time to set it in motion.
-
-Design a User Journey to represent your persona in their environment across the time, with key steps or actions related to our current topic (harassment).
-
-The timeline can be of a day, a few hours, or a week. Please include the key moments related to harassment alongside the emotions related to each step. Use the material from your interviews and surveys.
-
-Then, highlight the main pain points that need to be solved.
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-**Deliverable:**
-
-- A Figma document with your persona's user journey.
-
-**Tips:**
-
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-Most articles you'll find will be about user journeys or customer journeys. Keep in mind that you can adapt this methodology to any persona with any kind of situation or process, even at school, outside the school, in the digital world, etc.
-
-- [A Lean UX Customer Journey Map](https://uxdesign.cc/proto-journey-a-lean-ux-customer-journey-map-30ea3a241edc)
-- [How to create a Customer Journey Map](https://www.youtube.com/watch?v=mSxpVRo3BLg)
-- [Journey Mapping: How to build it](https://www.lucidchart.com/blog/how-to-build-customer-journey-maps)
-- [Journey Mapping template](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png)
-- [Journey Mapping example on Figma](https://www.figma.com/file/5tittjiznRCWTNR2xI5FIT/Untitled?node-id=0%3A1)
-- [Example](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png)
-
-**Quotes:**
-
-- “More options = More problems.” Scott Belsky | VP of Product & Community Adobe
-- "A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points’ Norman Nielsen Group

subjects/user-experience/piscine-ux/lets-fight-harassment/surveys/README.md

@@ -1,53 +0,0 @@
-## Surveys
-
-### Instructions
-
-Prepare a survey to gather quantitative data from your users.
-
-And remember, you are not your user!
-
-To be used in proper studies and get viable results, a form should gather at least 100 answers. The answers should give you countable data you can use to prove a point and confirm trends, not verbatims or details.
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-### Deliverables
-
-- A PDF document including your objective(s) and your hypotheses, the questions, an introduction and a conclusion.
-- In the document, add the link to a survey ready to be spread.
-
-**Tips:**
-
-Here are the recommended steps:
-
-1. Define your objective, what you are looking for when spreading your form to people. Usually, this has to do with figures, proportions, etc.
-2. Write down 1 to 3 hypotheses you have regarding this topic, that you need to either confirm or disprove.
-3. Pick 3 to 5 main topics you need to get information on.
-4. For each topic, write 1 to 3 closed-ended questions. Remember, your user has to answer with a choice in a list of prepared answers or use the option "other" to write down the answer they can't find in the prepared list.
-5. Write some screening questions to have a few pieces of demographics (age, job, location, etc.). This allows you to make sure the answers you get are from your target.
-6. Structure your questions in a funnel: start with broad questions to focus on specific topics or situations. Remember to stay neutral in your tone to ket the user tell their own story. Try to focus on 10 main questions.
-7. Write a greeting introduction, describing briefly (1) who you are and (2) what you are looking for. No need to say too much, but enough to provide a framework and the purpose of the form.
-8. Write a conclusion to thank your user for their time, and prepare the next steps. Ex: ask to have this form spread to 3 people, etc.
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Mandatory: ask them if they would be available for an anonymous in-person interview (over the phone, in-person, through video chat: whatever they are more comfortable with) because you'll have to conduct at least 3 interviews further on.**
-
-**Resources:**
-
-- [Lean Survey Canvas: How to use it](https://medium.com/think-big-work-smart/the-lean-survey-canvas-1b0a00cab200)
-- [User surveys - How to survey your users](https://refiner.io/blog/user-surveys/)
-- [Designing a great survey with 3 simple steps](https://uxdesign.cc/designing-a-great-survey-with-3-simple-steps-283abaa67ad6)
-- [UX Surveys: a quick guide to get the most out of them](https://uxdesign.cc/ux-surveys-a-quick-guide-to-get-the-most-out-of-them-1889d136be6a)
-- [Better research through surveys](https://uxmastery.com/better-user-research-through-surveys/)
-- [The user experience of surveys](https://uxdesign.cc/the-user-experience-of-surveys-a5420c82604a)
-
-**Tools:**
-
-- [Typeform](https://www.typeform.com/)
-- [Google Forms](https://docs.google.com/forms/u/0/)
-
-**Quotes:**
-
-- “Surveys measure and categorize attitudes or collect self-reported data that can help track or discover important issues to address.” Norman Nielsen Group
-- Surveys are not accurate in providing behavioral data because USERS OMIT STEPS IN THE MIDDLE AND MEMORIES ARE FAULTY.

subjects/user-experience/piscine-ux/lets-fight-harassment/third-problem-statement/README.md

@@ -1,39 +0,0 @@
-## Third problem statement
-
-### Instructions
-
-Based on your previous work, your persona and your user journey's main pain point, define a problem statement that would clarify the main problem you want to tackle.
-You may use the "How Might We" exercise in pairs.
-
-Then, define 3 KPIs (Key performance Indicators) that will help you measure the definition of Done and the success of the solution.
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-### Deliverables
-
-- A PDF document with one problem statement and 3 KPIs to measure the impact of the solution
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Stuck on a problem? Just ask ‘How Might We’](https://relab.academy/design-thinking/stuck-on-a-problem-just-ask-how-might-we/)
-- [Problem statement](https://www.indeed.com/career-advice/career-development/what-is-a-problem-statement)
-- [Using ‘How Might We’ Questions to Ideate on the Right Problems](https://www.nngroup.com/articles/how-might-we-questions/)
-- [Unleashing the power of a UX KPI](https://articles.uie.com/power_of_ux_kpi/)
-- [KPI is an imperative tool for UX designers](https://uxdesign.cc/kpi-is-the-most-important-tool-ux-designers-should-be-learning-to-use-af31651120fc?sk=e619213adfda152171d597fc3ab1053a)
-- [Measuring product design impact — KPIs, NPS, UX, WTF](https://uxdesign.cc/measuring-product-design-impact-kpis-nps-ux-wtf-3fe6a26e7400?sk=52c1f3842edbe90524f6da1fe85db71d)
-- [A metrics-driven approach to evaluate success of UX design](https://uxdesign.cc/a-metrics-driven-approach-to-evaluate-success-of-ux-design-dd3bea098820?sk=acf1b1f7f0a7663d34d11906339b4698)
-- [A big list of UX KPIs and metrics](https://www.cxpartners.co.uk/our-thinking/big_list_of_ux_kpis_and_metrics/)
-- [How to use SMART goals to build your KPIs](https://www.grow.com/blog/how-to-use-smart-goals-to-build-your-kpis)
-- Examples of KPIs (fake data! Not to be copied or used!):
-  - Harassment case report rates increase by 20% within 2 years
-  - Online harassment drops by 30% within 5 years
-  - 90% of the 15-18 year-olds knows a harassment witness response process within 2 years
-
-**Quote:**
-
-"Every problem is an opportunity for design. By framing your challenge as a How Might We question, you’ll set yourself up for an innovative solution" IDEO

subjects/user-experience/piscine-ux/music-on/README.md

@@ -0,0 +1,284 @@
+## Card sorting
+
+### Instructions
+
+In the present situation, the websites are not ideal to complete the Jobs-to-be-Done your user has in mind. So let's practice card sorting to rearrange the content of the website!
+
+Organize a card sorting workshop with the content of the website you chose in the exercise "Heuristics".
+
+To do so:
+
+- Define your research goals.
+- Prepare the material.
+- Find participants.
+- Run a card sorting workshop on 5 people.
+- Suggest a new taxonomy (content organization).
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**List of websites:**
+
+- [Universal Music Latin America](https://www.universalmusica.com/)
+- [Delta Records](https://deltarecords.net/)
+- [Zoho Music](https://www.zohomusic.com/)
+- [Luaka Bop](https://www.luakabop.com/)
+- [Rimas Music](https://rimasmusic.com/)
+- You can choose another one, as long as it is a South American music label.
+
+### Deliverables
+
+- A card sorting workshop script with the research goals (PDF document).
+- Pictures of the ongoing workshop.
+- A document to show the new content organization (it can be a picture of the board with sticky notes or the digital version).
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Basics on how to conduct card sorting](https://uxdesign.cc/basics-on-how-to-conduct-card-sorting-6e4ccc7cc261?sk=cafd49e16c71a72c3fad93e63c1998f1)
+- [Card Sorting — what, how & the perks](https://uxdesign.cc/card-sorting-what-how-the-perks-29f6cb020270)
+- [10 things to know about card sorting](http://www.measuringu.com/blog/card-sorting.php)
+- [Card sorting: a definitive guide](http://boxesandarrows.com/card-sorting-a-definitive-guide/)
+## Heuristics
+
+**Context:**
+
+A music label specialized in music from South America asks you to improve the user experience. This quest is about heuristics and content organization!
+
+### Instructions
+
+Conduct a heuristic analysis on **one** of these websites:
+
+- [Universal Music Latin America](https://www.universalmusica.com/)
+- [Delta Records](https://deltarecords.net/)
+- [Zoho Music](https://www.zohomusic.com/)
+- [Luaka Bop](https://www.luakabop.com/)
+- [Rimas Music](https://rimasmusic.com/)
+- You can choose another one, as long as it is a South American music label.
+
+- Upload the document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+### Deliverables
+
+- A duplicated and completed checklist on a sheet document (Google Sheets, Airtable, Excel, etc.).
+- [Tool : Heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [3 ways good design makes you happy - TED talk by Don Norman](https://www.ted.com/talks/don_norman_3_ways_good_design_makes_you_happy)
+- [Introduction to heuristic evaluation: a beginner’s guide](https://uxdesign.cc/introduction-to-heuristic-evaluation-658705606518)
+- [Nielsen's 10 usability heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/)
+- [What you really get from a heuristic evaluation](https://uxmag.com/articles/what-you-really-get-from-a-heuristic-evaluation)
+- [Heuristic analysis for UX: How to run a usability evaluation](https://uxdesign.cc/heuristic-analysis-for-ux-how-to-run-a-usability-evaluation-12c86d43936f)
+- [Heuristic analysis in the design process](https://uxdesign.cc/heuristic-analysis-in-the-design-process-usability-inspection-methods-d200768eb38d)
+- [A new usability heuristic evaluation checklist](https://uxplanet.org/a-new-usability-heuristic-evaluation-checklist-259f588da308)
+
+**Quote:**
+
+'If you think design is expensive, you should look at the cost of bad design’ Ralf Speth | Former CEO Jaguar Land Rover
+## JTBD
+
+### Instructions
+
+Let's practice Jobs-to-be-done to be more specific about how a music label website could be improved.
+
+Read about Jobs-to-be-Done and the psychologic dimension behind this tool.
+
+Then, find someone (your "user") around you who likes music a lot.
+
+Ask them about what they would do on a music label website. Ask them why, why and why to understand the emotion behind an action, and the purpose behind a simple visit on a website.
+
+Complete the JTBD template below including the true purpose of your "user".
+
+And remember: You are not your user!
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Deliverable:**
+
+- A complete Jobs-to-Be-Done on a PDF document.
+  - Complete this sentence and include it on the document "When **\_\_**, I want to **\_** So I can **\_**"
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don"t overload your design with too much details!
+
+**Resources:**
+
+- [What is a job to be done?](https://jobs-to-be-done.com/what-is-jobs-to-be-done-fea59c8e39eb)
+- [Jobs-to-be-done framework](https://www.productplan.com/glossary/jobs-to-be-done-framework/)
+- [https://jobs-to-be-done.com/](https://jobs-to-be-done.com/)
+
+**Quote:**
+
+- "When we identify user stories early in the design process, we let them dictate the design decisions. Rather than let our preconceived ideas of how the product should be or should look do it." UX Booth
+- "Documenting the what and why of each element promotes organization and makes the handoff to the development team much smoother." UX Booth
+- "When we buy a product, we essentially "hire" something to get a job done. If it does the job well, when we are confronted with the same job, we hire that same product again. And if the product does a crummy job, we "fire" it and look around for something else we might hire to solve the problem." Clayton M Christensen
+## Music label wireframes
+
+### Instructions
+
+Pick a product (a record, a song or an album) from your music label website.
+
+Based on the new taxonomy (content categorization), show the different paths a user has to take to reach the product with a series of wireframes.
+
+**List of websites:**
+
+- [Universal Music Latin America](https://www.universalmusica.com/)
+- [Delta Records](https://deltarecords.net/)
+- [Zoho Music](https://www.zohomusic.com/)
+- [Luaka Bop](https://www.luakabop.com/)
+- [Rimas Music](https://rimasmusic.com/)
+- You can choose another one, as long as it is a South American music label.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+### Deliverables
+
+- Wireframes (6 to 12 screens) from the home page to the product page, on Figma.
+
+**Tips:**
+
+- Drawing a user journey first might be helpful before rushing into wireframes
+- Drawing paper prototypes before going digital might save you some time.
+- Several paths are encouraged
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+Vocabulary:
+
+- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
+- Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
+- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
+
+**Resources:**
+
+- [How to start sketching and wireframing](https://uxdesign.cc/how-to-start-sketching-and-wireframing-84a821f092e2)
+- [Why should product teams use wireframes more often?](https://uxdesign.cc/why-should-product-teams-use-wireframes-more-often-60e34a2bc55)
+- [The 5-pass reduction wireframing: A minimalist UX technique](https://uxdesign.cc/the-5-pass-reduction-wireframing-a-minimalist-ux-technique-aa415aad9ce2?sk=a218ac4db9d1049249bd381fbc5edeee)
+- [The art of designing good wireframes](https://uxdesign.cc/the-art-of-designing-good-wireframes-8a2a9c10a95b)
+
+**Recommended tools:**
+
+- Figma.
+## Run 5 tests
+
+### Instructions
+
+Run the test on 5 people!
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+### Deliverables
+
+- Pictures of the ongoing test.
+- A PDF document with the conclusions from each test and 3 major ideas to improve the prototype.
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
+- [How to do a user interview (tutorial from Google Ventures)](https://www.youtube.com/watch?v=Qq3OiHQ-HCU)
+- [Analyzing usability testing data](https://uxdesign.cc/analysing-usability-testing-data-97667ae4999e)
+- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
+- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
+
+**Quote:**
+
+- To get trustworthy results in your test, you can’t ask your customers to use their imagination. You’ve got to show them something realistic. If you do, their reactions will be genuine.
+## Site map
+
+### Instructions
+
+Stick to the website you have chosen in the previous exercise "heuristics" and design a site map. The site map should include all the pages of the website as well as the connections and hierarchy.
+
+**List of websites:**
+
+- [Universal Music Latin America](https://www.universalmusica.com/)
+- [Delta Records](https://deltarecords.net/)
+- [Zoho Music](https://www.zohomusic.com/)
+- [Luaka Bop](https://www.luakabop.com/)
+- [Rimas Music](https://rimasmusic.com/)
+- You can choose another one, as long as it is a South American music label.
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+### Deliverables
+
+- A PDF page of the site map.
+
+**Tips:**
+
+- Start by drawing on paper, then pass it on to a digital tool.
+- Please label your document! Title and name of the website.
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [How to create a good site map](https://www.smokeylemon.com/blog/how-to-create-a-good-sitemap/)
+
+**Recommended tools:**
+
+- Figma
+- Adobe Illustrator
+
+**Quote:**
+
+"The organization, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found’ Peter Morville | Information Architecture for the WWW.
+## Test protocol
+
+### Instructions
+
+Prepare a protocol for usability testing.
+
+Recommended steps:
+
+- Define the scope of the test.
+- Recruit 5 users.
+- Identify objectives: What are you proving?
+- Establish metrics: How are you proving your design is efficient?
+- Describe the steps and the instructions.
+- Write an introduction to greet their user.
+- Write a conclusion to thank the user.
+
+Don't forget to:
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Deliverable:**
+
+- A PDF document with a test protocol.
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources**
+
+- [How to do a user interview (tutorial from Google Ventures)](https://www.youtube.com/watch?v=Qq3OiHQ-HCU)
+- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
+- [Usability testing: what is it and how to do it?](https://uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d)
+
+**Quote:**
+
+- You need to detect: How many errors do users make? How severe are these errors? How easily can they recover from the errors?

subjects/user-experience/piscine-ux/music-on/card-sorting/README.md

@@ -1,46 +0,0 @@
-## Card sorting
-
-### Instructions
-
-In the present situation, the websites are not ideal to complete the Jobs-to-be-Done your user has in mind. So let's practice card sorting to rearrange the content of the website!
-
-Organize a card sorting workshop with the content of the website you chose in the exercise "Heuristics".
-
-To do so:
-
-- Define your research goals.
-- Prepare the material.
-- Find participants.
-- Run a card sorting workshop on 5 people.
-- Suggest a new taxonomy (content organization).
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**List of websites:**
-
-- [Universal Music Latin America](https://www.universalmusica.com/)
-- [Delta Records](https://deltarecords.net/)
-- [Zoho Music](https://www.zohomusic.com/)
-- [Luaka Bop](https://www.luakabop.com/)
-- [Rimas Music](https://rimasmusic.com/)
-- You can choose another one, as long as it is a South American music label.
-
-### Deliverables
-
-- A card sorting workshop script with the research goals (PDF document).
-- Pictures of the ongoing workshop.
-- A document to show the new content organization (it can be a picture of the board with sticky notes or the digital version).
-
-**Tips:**
-
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Basics on how to conduct card sorting](https://uxdesign.cc/basics-on-how-to-conduct-card-sorting-6e4ccc7cc261?sk=cafd49e16c71a72c3fad93e63c1998f1)
-- [Card Sorting — what, how & the perks](https://uxdesign.cc/card-sorting-what-how-the-perks-29f6cb020270)
-- [10 things to know about card sorting](http://www.measuringu.com/blog/card-sorting.php)
-- [Card sorting: a definitive guide](http://boxesandarrows.com/card-sorting-a-definitive-guide/)

subjects/user-experience/piscine-ux/music-on/heuristics/README.md

@@ -1,42 +0,0 @@
-## Heuristics
-
-**Context:**
-
-A music label specialized in music from South America asks you to improve the user experience. This quest is about heuristics and content organization!
-
-### Instructions
-
-Conduct a heuristic analysis on **one** of these websites:
-
-- [Universal Music Latin America](https://www.universalmusica.com/)
-- [Delta Records](https://deltarecords.net/)
-- [Zoho Music](https://www.zohomusic.com/)
-- [Luaka Bop](https://www.luakabop.com/)
-- [Rimas Music](https://rimasmusic.com/)
-- You can choose another one, as long as it is a South American music label.
-
-- Upload the document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-### Deliverables
-
-- A duplicated and completed checklist on a sheet document (Google Sheets, Airtable, Excel, etc.).
-- [Tool : Heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [3 ways good design makes you happy - TED talk by Don Norman](https://www.ted.com/talks/don_norman_3_ways_good_design_makes_you_happy)
-- [Introduction to heuristic evaluation: a beginner’s guide](https://uxdesign.cc/introduction-to-heuristic-evaluation-658705606518)
-- [Nielsen's 10 usability heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/)
-- [What you really get from a heuristic evaluation](https://uxmag.com/articles/what-you-really-get-from-a-heuristic-evaluation)
-- [Heuristic analysis for UX: How to run a usability evaluation](https://uxdesign.cc/heuristic-analysis-for-ux-how-to-run-a-usability-evaluation-12c86d43936f)
-- [Heuristic analysis in the design process](https://uxdesign.cc/heuristic-analysis-in-the-design-process-usability-inspection-methods-d200768eb38d)
-- [A new usability heuristic evaluation checklist](https://uxplanet.org/a-new-usability-heuristic-evaluation-checklist-259f588da308)
-
-**Quote:**
-
-'If you think design is expensive, you should look at the cost of bad design’ Ralf Speth | Former CEO Jaguar Land Rover

subjects/user-experience/piscine-ux/music-on/jtbd/README.md

@@ -1,39 +0,0 @@
-## JTBD
-
-### Instructions
-
-Let's practice Jobs-to-be-done to be more specific about how a music label website could be improved.
-
-Read about Jobs-to-be-Done and the psychologic dimension behind this tool.
-
-Then, find someone (your "user") around you who likes music a lot.
-
-Ask them about what they would do on a music label website. Ask them why, why and why to understand the emotion behind an action, and the purpose behind a simple visit on a website.
-
-Complete the JTBD template below including the true purpose of your "user".
-
-And remember: You are not your user!
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Deliverable:**
-
-- A complete Jobs-to-Be-Done on a PDF document.
-  - Complete this sentence and include it on the document "When **\_\_**, I want to **\_** So I can **\_**"
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don"t overload your design with too much details!
-
-**Resources:**
-
-- [What is a job to be done?](https://jobs-to-be-done.com/what-is-jobs-to-be-done-fea59c8e39eb)
-- [Jobs-to-be-done framework](https://www.productplan.com/glossary/jobs-to-be-done-framework/)
-- [https://jobs-to-be-done.com/](https://jobs-to-be-done.com/)
-
-**Quote:**
-
-- "When we identify user stories early in the design process, we let them dictate the design decisions. Rather than let our preconceived ideas of how the product should be or should look do it." UX Booth
-- "Documenting the what and why of each element promotes organization and makes the handoff to the development team much smoother." UX Booth
-- "When we buy a product, we essentially "hire" something to get a job done. If it does the job well, when we are confronted with the same job, we hire that same product again. And if the product does a crummy job, we "fire" it and look around for something else we might hire to solve the problem." Clayton M Christensen

subjects/user-experience/piscine-ux/music-on/music-label-wireframes/README.md

@@ -1,49 +0,0 @@
-## Music label wireframes
-
-### Instructions
-
-Pick a product (a record, a song or an album) from your music label website.
-
-Based on the new taxonomy (content categorization), show the different paths a user has to take to reach the product with a series of wireframes.
-
-**List of websites:**
-
-- [Universal Music Latin America](https://www.universalmusica.com/)
-- [Delta Records](https://deltarecords.net/)
-- [Zoho Music](https://www.zohomusic.com/)
-- [Luaka Bop](https://www.luakabop.com/)
-- [Rimas Music](https://rimasmusic.com/)
-- You can choose another one, as long as it is a South American music label.
-
-Don't forget to:
-
-- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the file.
-
-### Deliverables
-
-- Wireframes (6 to 12 screens) from the home page to the product page, on Figma.
-
-**Tips:**
-
-- Drawing a user journey first might be helpful before rushing into wireframes
-- Drawing paper prototypes before going digital might save you some time.
-- Several paths are encouraged
-- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-Vocabulary:
-
-- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
-- Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
-- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
-
-**Resources:**
-
-- [How to start sketching and wireframing](https://uxdesign.cc/how-to-start-sketching-and-wireframing-84a821f092e2)
-- [Why should product teams use wireframes more often?](https://uxdesign.cc/why-should-product-teams-use-wireframes-more-often-60e34a2bc55)
-- [The 5-pass reduction wireframing: A minimalist UX technique](https://uxdesign.cc/the-5-pass-reduction-wireframing-a-minimalist-ux-technique-aa415aad9ce2?sk=a218ac4db9d1049249bd381fbc5edeee)
-- [The art of designing good wireframes](https://uxdesign.cc/the-art-of-designing-good-wireframes-8a2a9c10a95b)
-
-**Recommended tools:**
-
-- Figma.

subjects/user-experience/piscine-ux/music-on/run-5-tests/README.md

@@ -1,31 +0,0 @@
-## Run 5 tests
-
-### Instructions
-
-Run the test on 5 people!
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-### Deliverables
-
-- Pictures of the ongoing test.
-- A PDF document with the conclusions from each test and 3 major ideas to improve the prototype.
-
-**Tips:**
-
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
-- [How to do a user interview (tutorial from Google Ventures)](https://www.youtube.com/watch?v=Qq3OiHQ-HCU)
-- [Analyzing usability testing data](https://uxdesign.cc/analysing-usability-testing-data-97667ae4999e)
-- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
-- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
-
-**Quote:**
-
-- To get trustworthy results in your test, you can’t ask your customers to use their imagination. You’ve got to show them something realistic. If you do, their reactions will be genuine.

subjects/user-experience/piscine-ux/music-on/site-map/README.md

@@ -1,39 +0,0 @@
-## Site map
-
-### Instructions
-
-Stick to the website you have chosen in the previous exercise "heuristics" and design a site map. The site map should include all the pages of the website as well as the connections and hierarchy.
-
-**List of websites:**
-
-- [Universal Music Latin America](https://www.universalmusica.com/)
-- [Delta Records](https://deltarecords.net/)
-- [Zoho Music](https://www.zohomusic.com/)
-- [Luaka Bop](https://www.luakabop.com/)
-- [Rimas Music](https://rimasmusic.com/)
-- You can choose another one, as long as it is a South American music label.
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-### Deliverables
-
-- A PDF page of the site map.
-
-**Tips:**
-
-- Start by drawing on paper, then pass it on to a digital tool.
-- Please label your document! Title and name of the website.
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources:**
-
-- [How to create a good site map](https://www.smokeylemon.com/blog/how-to-create-a-good-sitemap/)
-
-**Recommended tools:**
-
-- Figma
-- Adobe Illustrator
-
-**Quote:**
-
-"The organization, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found’ Peter Morville | Information Architecture for the WWW.

subjects/user-experience/piscine-ux/music-on/test-protocol/README.md

@@ -1,38 +0,0 @@
-## Test protocol
-
-### Instructions
-
-Prepare a protocol for usability testing.
-
-Recommended steps:
-
-- Define the scope of the test.
-- Recruit 5 users.
-- Identify objectives: What are you proving?
-- Establish metrics: How are you proving your design is efficient?
-- Describe the steps and the instructions.
-- Write an introduction to greet their user.
-- Write a conclusion to thank the user.
-
-Don't forget to:
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Deliverable:**
-
-- A PDF document with a test protocol.
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resources**
-
-- [How to do a user interview (tutorial from Google Ventures)](https://www.youtube.com/watch?v=Qq3OiHQ-HCU)
-- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
-- [Usability testing: what is it and how to do it?](https://uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d)
-
-**Quote:**
-
-- You need to detect: How many errors do users make? How severe are these errors? How easily can they recover from the errors?

subjects/user-experience/piscine-ux/seamstress/README.md

@@ -0,0 +1,292 @@
+## Define
+
+### Instructions
+
+Run at least one of the Define tools in the design process.
+
+### Deliverables
+
+- A PDF document with the script of the tool context.
+- Completed tool (scripts from user interviews, results from a quantitative analysis, etc.).
+- A PDF document with the key learnings from this phase.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Use as many tools as needed, be make sure you do all the process in 4 working days!
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Criteria:**
+
+- Persona
+
+  - The script is the list of insights the students uses to create the persona.
+  - The completed tool is a [Persona board](https://miro.medium.com/max/1400/0*RbHfR6BHhhFIENNf). Make sure the key insights come from the field, from reality, but the persona itself is different from only one user.
+
+- Empathy Map
+
+  - The script is the list of insights the student uses to create the Empathy map.
+  - The completed tool is an [Empathy Map](https://miro.medium.com/max/700/1*I1ffOWdPWQva3dCMQE-TAQ.png).
+
+- User Journey
+
+  - The script is the list of insights the student uses to create the User Journey.
+  - The completed tool is a [User Journey Map](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png).
+
+- Jobs-to-be-done (JTBD)
+
+  - The JTBD is tool that goes as a conclusion to another of the previous tools. Make sure:
+    - The sentence is complete.
+    - The "When" part involves a visit on the website.
+    - The "I want to" part involves a practical action.
+    - The "So I can" part involves a psychological or emotional purpose.
+## Empathy
+
+### Instructions
+
+Run at least one of the Empathy tools in the design process.
+
+### Deliverables
+
+- A PDF document with the script of the tool context.
+- Completed tool (scripts from user interviews, results from a quantitative analysis, etc.).
+- A PDF document with the key learnings from this phase.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Use as many tools as needed, be make sure you do all the process in 4 working days!
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Criteria:**
+
+- User interviews
+  - The script is the interview guide. Make sure there is:
+    - the main purpose of the interview
+    - 1 to 3 hypotheses
+    - a proper introduction that describes the interviewer and the purpose of this interview
+    - 3 to 5 main topics
+    - a few scan questions (demographics)
+    - open-ended questions, max 10
+    - a funnel process (>)
+    - a conclusion with next steps and a thank you.
+  - The completed tool is either:
+    - 5 to 10 scripts from users
+    - or an [Affinity Diagram](https://www.youtube.com/watch?v=VngWHIE4k9s) with the main elements
+- Analytics
+  - The script is the form. Make sure there is:
+    - The main purpose of the form
+    - 1 to 3 hypotheses
+    - A proper introduction that describes the interviewer and the purpose of this interview
+    - 3 to 5 main topics
+    - A few scan questions (demographics)
+    - Closed-ended, unbiased questions, max 10
+    - A funnel process (>)
+    - A conclusion with next steps and a thank you.
+    - A broadcast strategy
+  - The completed tool is a series of quantitative data from at least 100 answers.
+- Competitive analysis
+  - The script is the strategy. The student explains what they are looking for and how they plan to find it.
+  - The completed tool is a report. Make sure there is;
+    - There is an introduction
+    - There is a [competitive landscape](https://venngage-wordpress.s3.amazonaws.com/uploads/2019/03/g2crowd-grid.png)
+    - With 2 relevant axes
+    - 10 organizations appear on the landscape
+    - There is a [competitive table](https://venngage-wordpress.s3.amazonaws.com/uploads/2019/03/product-features-comparison-matrix.png)
+    - With 5 to 10 criteria
+    - 10 organizations appear on the table
+## Problem Statement
+
+### Instructions
+
+Based on your research (Empathy & Define), define a problem statement to narrow the problem and KPIs to measure the success.
+
+### Deliverables
+
+- A PDF document with:
+
+  - One problem statement.
+  - 1 to 3 KPIs.
+  - Key learnings from this phase.
+
+Don't forget to:
+
+- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Tips:**
+
+- KPIs: [check the SMART list](https://www.grow.com/blog/how-to-use-smart-goals-to-build-your-kpis))
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Quote:**
+
+Design is about solving problems. Fall in Love with the Problem, Not the Solution.
+
+**Examples of Problem statements:**
+
+- How might we help Pierre measure and prepare his hydration before a race?
+  - Appropriate —> The problem statement is narrow enough to be specific for one painpoint, and broad enough to let creativity suggest many options. Also, it takes into accounts some of the key insights from the previous phases.
+- How might we make sure Pierre doesn’t get dehydrated?
+  - Too broad —> The problem statement is out of the scope of running, so the solutions cannot be integrated in the specific context of running.
+- How might we make sure Pierre drinks the cups that are offered during the race?
+  - Too narrow —> There are plenty of options to avoid dehydration without drinking the cups that are offered during the race.
+- How might we provide Pierre with a drink that contains everything he needs to avoid dehydration?
+  - Focused on the solution, not the problem —> The problem statement is supposed to rephrase the brief and take into account the insights from the previous phase.
+- How might make sure Pierre doesn’t get drunk the night before the race?
+  - Out of scope —> This is not about dehydration, nor about running.
+## Prototype
+
+### Instructions
+
+Make a prototype including the chosen solution.
+
+### Deliverables
+
+- Pictures of a paper prototype (low-fi with 6 to 12 different screens).
+- An animated wireframe prototype on figma (mid-fi).
+- A PDF file with the key learnings from this phase.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Criteria:**
+
+- User Flow
+  Make sure that for each flow:
+
+  - The user has a specific goal.
+  - There is a starting point and and ending point, which is the goal of the user.
+  - There is a series of actions organized in rectangles (actions) or diamond (choice).
+  - The actions are linked with arrows.
+
+- Card sorting
+  Make sure that:
+  - There is a script including the research goals.
+  - The research goals are close to "rearrange the content".
+  - There are pictures of the ongoing workshop.
+  - There is a new content organization shown in a table with sticky notes (it can be a picture or digital).
+
+**Tips:**
+
+- Use as many tools as needed, and make sure you do all the process in 4 working days!
+- You may use Card Sorting and User flows.
+- Vocabulary:
+  - Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
+  - Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
+  - High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## Second test protocol
+
+### Instructions
+
+Prepare a testing protocol and run it!
+
+Recommended steps:
+
+- Define the scope of the test.
+- Recruit 5 users.
+- Identify objectives: What are you proving?
+- Establish metrics: How are you proving your design is efficient?
+- Describe the steps and the instructions.
+- Write an introduction to greet their user.
+- Write a conclusion to thank the user.
+
+### Deliverables
+
+- A testing protocol script.
+- Photos from the tests.
+- A PDF file with the key learnings from the tests (5 tests are required) and from this phase.
+- In the same PDF file you need to place at least 3 learnings or iteration suggestions to be made for the next version.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## Third Ideation
+
+### Instructions
+
+Run at least one of the Ideation techniques in the design process.
+
+### Deliverables
+
+- A PDF document with the script of the tool context.
+- Completed tool: a board with all the ideas - on paper or digitally on Miro or Figma.
+- A PDF document with the key learnings from this phase.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Use as many tools as needed, and make sure you do all the process in 4 working days!
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## UX Strategy
+
+**Context:**
+
+Elsa is a seamstress. She makes swimsuits on demand through her instagram account. It's going well, her community is growing as well as the amount of requests from customers.
+
+However, she loses a lot of time every time there is a request. To complete an order, she needs to ask for the shape of the swimsuit, the size, the color preferences and the expected delivery time. On top of that, she needs to make sure she has enough time to sew one piece. (every piece requires 6 hours)
+
+For now, she only works with private messages but she wishes she could spend less time on that part.
+
+You offer to help her design a solution to manage her time and workshop better. You have 4 working days.
+
+### Instructions
+
+Now you have discovered and practiced many tools in the design process, organize a time frame for the next 4 working days.
+
+Select at least one tool for each phase, name it, and take into account the amount of time each phase may require.
+
+- Empathy / User Research
+- Define
+- Problem Statement
+- Ideation
+- Prototype
+- Test
+
+### Deliverables
+
+- A time frame, on PDF or on Figma, of the project, including:
+
+  - The working days ahead.
+  - Each phase of the process.
+  - The main tools you plan to use for each phase.
+  - The time you plan to spend for each tool.
+
+Don't forget to:
+
+- Upload the PDF or Figma document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the document.
+
+**Tips:**
+
+- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resource:**
+
+- [A sum up of all the tools that have been practiced](https://www.figma.com/file/x0xfoz9TaEDiAfGPFqKJcs/RECAP-UX%2FUI-Program?node-id=0%3A1). Focus on the UX part!
+
+**Quotes:**
+
+- Design needs to fail. Failure is even a necessary step, but ideally it should happen before a product is launched, during the prototype and test phases
+- “UX Strategy lies at the intersection of UX and business. It provides a much better chance of creating successful products. It enables teams to see the “Big Picture” to achieve the business goals under uncertain conditions” Jamie Levy | UX Strategy: How to Devise Innovative Digital Products That People Want
+- UX Strategy is the method by which you validate that your solution solves a problem for real customers in a dynamic marketplace because the market is constantly changing.

subjects/user-experience/piscine-ux/seamstress/define/README.md

@@ -1,46 +0,0 @@
-## Define
-
-### Instructions
-
-Run at least one of the Define tools in the design process.
-
-### Deliverables
-
-- A PDF document with the script of the tool context.
-- Completed tool (scripts from user interviews, results from a quantitative analysis, etc.).
-- A PDF document with the key learnings from this phase.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- Use as many tools as needed, be make sure you do all the process in 4 working days!
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Criteria:**
-
-- Persona
-
-  - The script is the list of insights the students uses to create the persona.
-  - The completed tool is a [Persona board](https://miro.medium.com/max/1400/0*RbHfR6BHhhFIENNf). Make sure the key insights come from the field, from reality, but the persona itself is different from only one user.
-
-- Empathy Map
-
-  - The script is the list of insights the student uses to create the Empathy map.
-  - The completed tool is an [Empathy Map](https://miro.medium.com/max/700/1*I1ffOWdPWQva3dCMQE-TAQ.png).
-
-- User Journey
-
-  - The script is the list of insights the student uses to create the User Journey.
-  - The completed tool is a [User Journey Map](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png).
-
-- Jobs-to-be-done (JTBD)
-
-  - The JTBD is tool that goes as a conclusion to another of the previous tools. Make sure:
-    - The sentence is complete.
-    - The "When" part involves a visit on the website.
-    - The "I want to" part involves a practical action.
-    - The "So I can" part involves a psychological or emotional purpose.

subjects/user-experience/piscine-ux/seamstress/empathy/README.md

@@ -1,59 +0,0 @@
-## Empathy
-
-### Instructions
-
-Run at least one of the Empathy tools in the design process.
-
-### Deliverables
-
-- A PDF document with the script of the tool context.
-- Completed tool (scripts from user interviews, results from a quantitative analysis, etc.).
-- A PDF document with the key learnings from this phase.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- Use as many tools as needed, be make sure you do all the process in 4 working days!
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Criteria:**
-
-- User interviews
-  - The script is the interview guide. Make sure there is:
-    - the main purpose of the interview
-    - 1 to 3 hypotheses
-    - a proper introduction that describes the interviewer and the purpose of this interview
-    - 3 to 5 main topics
-    - a few scan questions (demographics)
-    - open-ended questions, max 10
-    - a funnel process (>)
-    - a conclusion with next steps and a thank you.
-  - The completed tool is either:
-    - 5 to 10 scripts from users
-    - or an [Affinity Diagram](https://www.youtube.com/watch?v=VngWHIE4k9s) with the main elements
-- Analytics
-  - The script is the form. Make sure there is:
-    - The main purpose of the form
-    - 1 to 3 hypotheses
-    - A proper introduction that describes the interviewer and the purpose of this interview
-    - 3 to 5 main topics
-    - A few scan questions (demographics)
-    - Closed-ended, unbiased questions, max 10
-    - A funnel process (>)
-    - A conclusion with next steps and a thank you.
-    - A broadcast strategy
-  - The completed tool is a series of quantitative data from at least 100 answers.
-- Competitive analysis
-  - The script is the strategy. The student explains what they are looking for and how they plan to find it.
-  - The completed tool is a report. Make sure there is;
-    - There is an introduction
-    - There is a [competitive landscape](https://venngage-wordpress.s3.amazonaws.com/uploads/2019/03/g2crowd-grid.png)
-    - With 2 relevant axes
-    - 10 organizations appear on the landscape
-    - There is a [competitive table](https://venngage-wordpress.s3.amazonaws.com/uploads/2019/03/product-features-comparison-matrix.png)
-    - With 5 to 10 criteria
-    - 10 organizations appear on the table

subjects/user-experience/piscine-ux/seamstress/problem-statement/README.md

@@ -1,40 +0,0 @@
-## Problem Statement
-
-### Instructions
-
-Based on your research (Empathy & Define), define a problem statement to narrow the problem and KPIs to measure the success.
-
-### Deliverables
-
-- A PDF document with:
-
-  - One problem statement.
-  - 1 to 3 KPIs.
-  - Key learnings from this phase.
-
-Don't forget to:
-
-- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Tips:**
-
-- KPIs: [check the SMART list](https://www.grow.com/blog/how-to-use-smart-goals-to-build-your-kpis))
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Quote:**
-
-Design is about solving problems. Fall in Love with the Problem, Not the Solution.
-
-**Examples of Problem statements:**
-
-- How might we help Pierre measure and prepare his hydration before a race?
-  - Appropriate —> The problem statement is narrow enough to be specific for one painpoint, and broad enough to let creativity suggest many options. Also, it takes into accounts some of the key insights from the previous phases.
-- How might we make sure Pierre doesn’t get dehydrated?
-  - Too broad —> The problem statement is out of the scope of running, so the solutions cannot be integrated in the specific context of running.
-- How might we make sure Pierre drinks the cups that are offered during the race?
-  - Too narrow —> There are plenty of options to avoid dehydration without drinking the cups that are offered during the race.
-- How might we provide Pierre with a drink that contains everything he needs to avoid dehydration?
-  - Focused on the solution, not the problem —> The problem statement is supposed to rephrase the brief and take into account the insights from the previous phase.
-- How might make sure Pierre doesn’t get drunk the night before the race?
-  - Out of scope —> This is not about dehydration, nor about running.

subjects/user-experience/piscine-ux/seamstress/prototype/README.md

@@ -1,43 +0,0 @@
-## Prototype
-
-### Instructions
-
-Make a prototype including the chosen solution.
-
-### Deliverables
-
-- Pictures of a paper prototype (low-fi with 6 to 12 different screens).
-- An animated wireframe prototype on figma (mid-fi).
-- A PDF file with the key learnings from this phase.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Criteria:**
-
-- User Flow
-  Make sure that for each flow:
-
-  - The user has a specific goal.
-  - There is a starting point and and ending point, which is the goal of the user.
-  - There is a series of actions organized in rectangles (actions) or diamond (choice).
-  - The actions are linked with arrows.
-
-- Card sorting
-  Make sure that:
-  - There is a script including the research goals.
-  - The research goals are close to "rearrange the content".
-  - There are pictures of the ongoing workshop.
-  - There is a new content organization shown in a table with sticky notes (it can be a picture or digital).
-
-**Tips:**
-
-- Use as many tools as needed, and make sure you do all the process in 4 working days!
-- You may use Card Sorting and User flows.
-- Vocabulary:
-  - Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
-  - Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
-  - High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ux/seamstress/second-test-protocol/README.md

@@ -1,31 +0,0 @@
-## Second test protocol
-
-### Instructions
-
-Prepare a testing protocol and run it!
-
-Recommended steps:
-
-- Define the scope of the test.
-- Recruit 5 users.
-- Identify objectives: What are you proving?
-- Establish metrics: How are you proving your design is efficient?
-- Describe the steps and the instructions.
-- Write an introduction to greet their user.
-- Write a conclusion to thank the user.
-
-### Deliverables
-
-- A testing protocol script.
-- Photos from the tests.
-- A PDF file with the key learnings from the tests (5 tests are required) and from this phase.
-- In the same PDF file you need to place at least 3 learnings or iteration suggestions to be made for the next version.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ux/seamstress/third-ideation/README.md

@@ -1,21 +0,0 @@
-## Third Ideation
-
-### Instructions
-
-Run at least one of the Ideation techniques in the design process.
-
-### Deliverables
-
-- A PDF document with the script of the tool context.
-- Completed tool: a board with all the ideas - on paper or digitally on Miro or Figma.
-- A PDF document with the key learnings from this phase.
-
-Don't forget to:
-
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-
-**Tips:**
-
-- Use as many tools as needed, and make sure you do all the process in 4 working days!
-- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

subjects/user-experience/piscine-ux/seamstress/ux-strategy/README.md

@@ -1,52 +0,0 @@
-## UX Strategy
-
-**Context:**
-
-Elsa is a seamstress. She makes swimsuits on demand through her instagram account. It's going well, her community is growing as well as the amount of requests from customers.
-
-However, she loses a lot of time every time there is a request. To complete an order, she needs to ask for the shape of the swimsuit, the size, the color preferences and the expected delivery time. On top of that, she needs to make sure she has enough time to sew one piece. (every piece requires 6 hours)
-
-For now, she only works with private messages but she wishes she could spend less time on that part.
-
-You offer to help her design a solution to manage her time and workshop better. You have 4 working days.
-
-### Instructions
-
-Now you have discovered and practiced many tools in the design process, organize a time frame for the next 4 working days.
-
-Select at least one tool for each phase, name it, and take into account the amount of time each phase may require.
-
-- Empathy / User Research
-- Define
-- Problem Statement
-- Ideation
-- Prototype
-- Test
-
-### Deliverables
-
-- A time frame, on PDF or on Figma, of the project, including:
-
-  - The working days ahead.
-  - Each phase of the process.
-  - The main tools you plan to use for each phase.
-  - The time you plan to spend for each tool.
-
-Don't forget to:
-
-- Upload the PDF or Figma document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within the document.
-
-**Tips:**
-
-- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
-
-**Resource:**
-
-- [A sum up of all the tools that have been practiced](https://www.figma.com/file/x0xfoz9TaEDiAfGPFqKJcs/RECAP-UX%2FUI-Program?node-id=0%3A1). Focus on the UX part!
-
-**Quotes:**
-
-- Design needs to fail. Failure is even a necessary step, but ideally it should happen before a product is launched, during the prototype and test phases
-- “UX Strategy lies at the intersection of UX and business. It provides a much better chance of creating successful products. It enables teams to see the “Big Picture” to achieve the business goals under uncertain conditions” Jamie Levy | UX Strategy: How to Devise Innovative Digital Products That People Want
-- UX Strategy is the method by which you validate that your solution solves a problem for real customers in a dynamic marketplace because the market is constantly changing.

subjects/user-experience/piscine-ux/sunday-night-movie/README.md

@@ -0,0 +1,165 @@
+## Iteration
+
+### Instructions
+
+Based on your previous tests, pick one of your 3 prototypes.
+
+Implement the 3 ideas you wrote down as suggestions.
+
+Run another series of test (and adapt your test protocol if necessary).
+
+Write a report with the conclusion you made out of this iteration loop.
+
+### Deliverables
+
+- Pictures of the new test.
+- A report with your conclusions, your impressions and your key learnings from this iteration (PDF document).
+- Comparison between V1 and V2 of the prototype in the report.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- This report will be handed on to the CEO. Pay attention to the details and make sure the document is clean and easy to use!
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+## Movie wireframes
+
+### Instructions
+
+Based on the 3 user flows, design 3 series of wireframes.
+
+### Deliverables
+
+- 3 series of wireframes (6 to 12 screens per flow) on Figma.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+
+**Tips:**
+
+- Drawing paper prototypes before going digital might save you some time.
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+- Vocabulary
+  - Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg).
+  - Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png).
+  - High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif).
+
+**Resources:**
+
+- [How to start sketching and wireframing](https://uxdesign.cc/how-to-start-sketching-and-wireframing-84a821f092e2)
+- [Why should product teams use wireframes more often?](https://uxdesign.cc/why-should-product-teams-use-wireframes-more-often-60e34a2bc55)
+- [The 5-pass reduction wireframing: A minimalist UX technique](https://uxdesign.cc/the-5-pass-reduction-wireframing-a-minimalist-ux-technique-aa415aad9ce2?sk=a218ac4db9d1049249bd381fbc5edeee)
+- [The art of designing good wireframes](https://uxdesign.cc/the-art-of-designing-good-wireframes-8a2a9c10a95b)
+
+**Recommended tools:**
+
+- Figma.
+
+**Quote:**
+
+- "77% of users return to content and information sites because of ease-of-use. Only 22% return because the site belongs to a favorite brand." Forrester
+## Test on features
+
+### Instructions
+
+Test your wireframes!
+
+Focus on the journeys. Prepare a test protocol with your research goals (what you want to test), test it on 5 different people and write down 3 ways to improve the prototype. Do this for all your wireframes!
+
+### Deliverables
+
+For each of the tests:
+
+- A PDF document with a test protocol.
+- Pictures of the ongoing tests.
+- A PDF document with 3 ideas to improve the prototype based on you users' feedbacks.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [How to do a user interview (tutorial from Google Ventures)](https://www.youtube.com/watch?v=Qq3OiHQ-HCU)
+- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
+- [Usability testing: what is it and how to do it?](https://uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d)
+- [Analyzing usability testing data](https://uxdesign.cc/analysing-usability-testing-data-97667ae4999e)
+- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
+- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
+## Third user flow
+
+**Context:**
+
+Your company's client is a movie theaters chain called, "Movie 4 all".
+
+They want to launch a platform for people who want to watch movies but don’t want to spend endless time selecting one.
+You are replacing someone in the company who has already worked on the user research, the problem statement and the list of features they plan to develop. Your goal is to prototype and test these features.
+
+### Instructions
+
+Based on the 3 features that have come out of the ideation workshops led by your colleges, design 3 user flows (1 per feature).
+
+Features:
+
+- 1: Adding a filter based on their current mood.
+- 2: Offer a selection of 3 movies to be watched.
+- 3: Ask users to rate the movie after watching it for further recommendation.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
+
+### Deliverables
+
+- 3 user flows on a board (digital or pictures of a paper board).
+
+**Tips:**
+
+- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [User flow glossary](https://www.productplan.com/glossary/user-flow/)
+- [Site flows vs User Flows](https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/)
+- [How to make a User Flow diagram](https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram)
+
+**Recommended tools:**
+
+- Figma.
+- Whimsical.
+## Wireframes animation
+
+### Instructions
+
+Animate your wireframes on Figma.
+
+Think about multistate!!
+
+This exercise is to be made individually.
+
+### Deliverables
+
+- An animated prototype on Figma.
+
+Don't forget to:
+
+- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within the file.
+
+**Tips:**
+
+- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
+
+**Resources:**
+
+- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)