Browse Source

docs(going-on-holiday): change order of exercises in quest to correct order

UX Quest 2 = Going on holidays
Ex 1 = Interview Guide
Ex 2 = Run Interviews
Ex 3 = Affinity Diagram
Ex 4 = Problem Statement
Ex 5 = Ideation
Ex 6 = User Flow
Ex 7 = Prototyping
pull/2069/head
davhojt 1 year ago committed by Dav Hojt
parent
commit
77faff7647
  1. 162
      subjects/user-experience/piscine-ux/going-on-holidays/README.md

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

@ -1,42 +1,3 @@
## 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:**
@ -84,6 +45,7 @@ Here are the recommended steps :
**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
@ -105,15 +67,21 @@ Then, write down the script on a written document, and give elements of context
**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
## Affinity diagram & Empathy map
### Instructions
To find creative solutions to your problem statement, use one of these techniques in groups of 5 people, twice.
Open your written scripts and extract the relevant information.
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.
1. Use paper or digital sticky notes (Post-its or Miro.com) to isolate the pieces of information your interviewees shared with you.
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!
**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:
@ -122,32 +90,25 @@ Don't forget to:
### 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.
- 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:**
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)
- [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:
**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
Remember, you are not the user, so your opinions are not absolute truth.
## Problem statement
### Instructions
@ -175,40 +136,50 @@ You may use the "How Might We" exercise in pairs.
**Quote:**
"Out of clutter, find simplicity. From discord, find harmony. In the middle of difficulty, lies opportunity.’ Albert Einstein
## Second prototyping
## Ideation
### Instructions
Give another dimension to your user flow and turn it into a paper prototype (6 to 12 screens max).
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:
- 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”.
- Add a title within all written documents.
### Deliverables
- Pictures of a paper prototype.
- Figma file with the Wireframes (mid-fi).
- 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:**
- 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)
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:**
- 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
- [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:**
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
Any design is like a joke …if you have to explain it, it’s bad.
## User flow
### Instructions
@ -238,3 +209,38 @@ Don't forget to:
**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
## 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.
Loading…
Cancel
Save