Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 40 additions & 44 deletions docs/slides/content/ux.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ TL500 <!-- {.element: class="title-color"} -->



### Exercise - Do you know what is....
### Exercise - What does it mean?

![UserTopics](images/ux/ux_topics.png) <!-- {.element: class="" style="border:none; box-shadow:none;"} -->

![Excercise](images/ux/exercise.png) <!-- {.element: class="" style="border:none; box-shadow:none; height:100px; float:left; margin-left:100px;"} -->
1. Break out into teams and research a topic [5mins]
2. Generate a presentation with graphic [5mins]
2. Generate a presentation with a graphic [5mins]
3. Playback your findings [3mins]


Expand Down Expand Up @@ -41,16 +41,16 @@ TL500 <!-- {.element: class="title-color"} -->
#### Foundation or Discovery?
_You can use Empathy Mapping at various times in the product lifecycle_

We use empathy maps during the facilitation of product discovery, user research, getting early feedback on conceptual design, prototypes, and visual designs. It can also be used to capture feedback regarding the user testing of developed application features.
We use empathy maps during the facilitation of product discovery, for user research, getting early feedback on conceptual design, prototypes, and visual designs. Empathy mapping can also be used to capture feedback regarding the user testing of developed application features.



### Pop Quiz

![Question](images/ux/question.png) <!-- {.element: class="" style="border:none; box-shadow:none; height:300px; float:left;"} -->
<p align="left">The main responsibility of a UX designer is to create nice looking user interfaces?</p><!-- {.element: class="" style="margin-top: 120px;"} -->
<p align="left">The main responsibility of a UX designer is to create nice-looking user interfaces.</p><!-- {.element: class="" style="margin-top: 120px;"} -->

<p align="left">TRUE **or** FALSE</p>
<p align="left">TRUE? or FALSE?</p>



Expand All @@ -59,7 +59,7 @@ We use empathy maps during the facilitation of product discovery, user research,
![LightBulb](images/ux/light-bulb.png) <!-- {.element: class="" style="border:none; box-shadow:none; height:300px; float:left;"} -->
<p align="left">I’m a designer.</p><!-- {.element: class="" style="margin-top: 120px;"} -->

<p align="left">**No**, I don’t just make things pretty.</p>
<p align="left">FALSE - No, I don’t just make things pretty.</p>



Expand All @@ -76,24 +76,20 @@ We use empathy maps during the facilitation of product discovery, user research,


#### _What is it?_
* A tool to capture and visualize what key stakeholders are sensing when in a
particular context or completing a set of tasks
* A tool to capture and visualize what key stakeholders are sensing when in a particular context or completing a set of tasks
* A way to form a better understanding of users and build personas
* Information is captured directly from interviews, observations, and other
facilitated conversation exercises
* Information is captured directly from interviews, observations, and other facilitated conversation exercises
* Senses captured can include what the person is seeing, thinking, doing, and feeling
* Originated from Dave Gray of [XPLANE](http://www.xplane.com/)

Originated by Dave Gray of [XPLANE](http://www.xplane.com/)



#### _Why use it?_
* Captures information and learning directly from the end user affected by the
system/application/solution in question
* Enables a direct connection between important stakeholders and developers, e.g.
developers of an application can learn directly from end users using it
* The tool identifies pain points, opportunities, and starts to form a basis for
improvement and optimization
* The tool can be used to move from user empathy to value propositions
* Captures information and learning directly from the user affected by the system/application/solution in question
* Enables a direct connection between important stakeholders and developers, for example, developers of an application can learn directly from the users
* Identifies pain points, opportunities, and forms a basis for improvement and optimization
* Can be used to move from user empathy to value propositions



Expand All @@ -103,19 +99,19 @@ improvement and optimization

<!-- .slide: data-background-image="images/ux/empathy-map.jpg", class="black-style" data-background-opacity="0.15"-->
#### _How do we do it?_
1. Different colour stickies may be used for positive/negative feedback from the user
2. The moderator will ask the user prompting questions, while the group will capture the feedback
3. The "See" quadrant will contain what your user encounters in their daily experiences (people, activities, things)
4. "Say & Do" may include information around the tasks they undertake and how they describe or convay these tasks to their team
1. Use different color sticky notes to capture positive/negative feedback from the user
2. The moderator asks the user prompting questions while the group captures the feedback
3. The "See" quadrant contains what your user encounters in their daily experiences (people, activities, things)
4. "Say & Do" can include information about the tasks they undertake and how they describe or convey these tasks to their team



<!-- .slide: data-background-image="images/ux/empathy-map.jpg", class="black-style" data-background-opacity="0.15"-->
#### _How do we do it?_
5. "Hear" outlines what the user is hearing and how it may influence them (family, friends, media, coworkers)
6. "Think & Feel" what feelings are invoked? Consider positive and negative. What worries them? What are they lacking? What thoughts are triggered?
7. Pains & Gains - What does success and failure look like? Capture the obstacles and aspirations
8. Cluster collaboratively similar notes within the same quadrants, theme and discuss - the team should gain a shared understanding of the user
5. "Hear" outlines what the user is hearing and how it influences them (family, friends, media, coworkers).
6. "Think & Feel" captures the feelings that are invoked. Consider positive and negative feelings. What worries them? What are they lacking? What thoughts are triggered?
7. Pains & Gains identifies what success and failure look like. Capture the obstacles and aspirations.
8. Collaboratively, cluster similar notes within the same quadrants, identify the theme, and discuss. The team should gain a shared understanding of the user.



Expand All @@ -124,39 +120,39 @@ improvement and optimization
![Announcement](images/ux/announcement.png) <!-- {.element: class="" style="border:none; box-shadow:none; height:200px; float:left;"} -->

MORNING ROUTINE VENTURES™️ <!-- {.element: class="" style="margin-top: 100px; text-align:left;"} -->
Wants to invest in the people that are late for work market!
Wants to invest in the "people that are late for work" market!

<p align="left">**BIG OPPORTUNITY !** </p>
<p align="left">**BIG OPPORTUNITY!** </p>



### Exercise

![LeanUX](images/ux/lean_ux.jpg) <!-- {.element: class="" style="border:none; box-shadow:none; height:300px; float:right;"} -->
<p align="left" width="200px">Invent a product based on your value slicing excercise information. <!-- {.element: class="" style="width:500px;"} -->
<p align="left" width="200px">Invent a product based on your value slicing exercise information. <!-- {.element: class="" style="width:500px;"} -->

* **Step 1** - User Interview [5 mins]
* **Step 2** - Sketch - Prototype [10 mins]
* **Step 3** - User Testing [5 mins]
* **Step 4** - Build with Lego [15 mins]

<p>Quick Tips - Use an empathy map, Ask 5 ladder technique: WHY?WHY?WHY?WHY?WHY?</p><!--{.element: class="" style="text-align:left; font-size: smaller; font-weight: 100;"} -->
<p>Quick Tips - Use an empathy map, or Ask 5 ladder technique: WHY? WHY? WHY? WHY? WHY?</p><!--{.element: class="" style="text-align:left; font-size: smaller; font-weight: 100;"} -->



### User interview - useful tips
### User Interview - Useful Tips

* Well crafted open questions - Ask question which assist the interviewee to tell a story, avoid binary questions (questions which can be answered by yes/no)
<p> *e.g. <s>Do you like...?</s> What do you like about...?*
* Dig deeper, follow up:
<p> *e.g. you mentioned it was hard, tell me more about why...*
* Ask 'why', try to keep the conversation flowing
* Embrace the awkward silence - Silence is good, it gives the interviewee time to reflect on what they have said
* Do not use jargon
* Well crafted open-ended questions - Ask questions that help the interviewee to tell a story and avoid binary questions (questions that can be answered yes or no)
<p> *For example, <s>Do you like...?</s> What do you like about...?*
* Dig deeper and follow up
<p> *For example, you mentioned it was hard, tell me more about why...*
* Ask "why" and try to keep the conversation flowing.
* Embrace the awkward silence - Silence is good, it gives the interviewee time to reflect on what they have said.
* Do not use jargon.
![LeanUX](images/ux/interview.png) <!-- {.element: class="" style="border:none; box-shadow:none; height:150px; float:right; margin-left:200px;"} -->
* Keep your reaction neutral
* Do not mention the solution until the end
* Inconsistencies can lead to interesting insights
* Keep your reactions neutral.
* Do not mention the solution until the end.
* Inconsistencies can lead to interesting insights.



Expand All @@ -167,7 +163,7 @@ Wants to invest in the ‘people that are late for work market’!
* User Interview
* Product
* User Feedback
* Learnings & Future Plans
* Learning & Future Planning



Expand All @@ -188,11 +184,11 @@ Wants to invest in the ‘people that are late for work market’!

<!-- .slide: data-background-image="images/chef-background.png", class="white-style" -->
### Related & Used Practices
#### Technical Practices:
#### Technical Practices
- [Blue Green deployments](https://openpracticelibrary.com/practice/blue-green-deployments/)
- [Split Testing or A/B Tests](https://openpracticelibrary.com/practice/split-testing-a-b-testing/)

#### Human Centered Design Practices:
#### Human-Centered Design Practices
- [Empathy Mapping](https://openpracticelibrary.com/practice/empathy-mapping/)
- [AEIOU Observation Framework](openpracticelibrary.com/practice/aeiou-observation-framework/)
- [Proto Persona](openpracticelibrary.com/practice/proto-persona)
Expand Down