My role
UX Designer/Researcher
UI Designer/software developer
Timeline
June - August 2021
The Problem
Fast fashion is the second biggest polluter in the world. However, this is a shocking statement to most. There is also a lack of fun and interactive environments to learn about what can be done. This is contributing to the knowledge behavioural gap.
Research Question
Can choosing an interactive animated pedagogy agent encourage reflection and help retain information about the effects of fast fashion?
Can the below design actions lead to aid behavioural change...
Outcome
Including scroll triggered interactions had a 23.33% increase in information learnt compared to the prototype without them when asked to do a memorability test two weeks after viewing the prototypes.
The Process
Lean UX Cycle - Think, Make, Check
Think
Semi-structured interview findings :
A new textile bin service to be brought to Ireland that offer pick up dates from homes.
A ban on textiles being put into waste bins. (Textile recycling bins becoming more available)
An increase of people donating to charity shops.
An increase of sales in charity shops.
A lack of knowledge around the value of keeping clothing in a cycle.
A lack of knowledge about the amount of water and emissions used to make one t-shirt, etc.
There has been an improvement in sustainable actions, but still a lack of in-depth knowledge as to why these sustainable actions are so important.
Technologies that currently support and promote charity shopping : “Thriftify” and “Calculadora Co2”.
Literature that aided the design :
1.Attitudes towards sustainable fashion
2.Behaviour change design to nudge
(Nudge theory - activating the reflective system of the brain to achieve behavioral change (Thaler and Sunstein, 2009).)
3.Social sharing
4.Emotional design
(incorporating interactions that encourage surprise and delight as well as giving the design a personality (Walter, 2011).)
5.Animated pedagogy agent
(applying facial expressions and gestures to the pedagogy agent to match the emotion of the content and context to increase emotional involvement and learnability (Davis et al. 2021).)
6.Experiential learning
(the application of the experiential learning cycle by David A. Kolb. 1) concrete experience, 2) observation and reflection, 3) forming abstract concepts and finally 4) testing in new situations (Chavan, 2009).)
Survey Results
The survey received 84 consented responses, consisting of open-ended questions that had been categorised and turned into qualitative data along with two types of likert scale multiple choice questions.
Link to survey questions can be found here: https://forms.office.com/r/VssPskGe9c
Personas based on User surveys
Persona (Aine)/ Shops often and is highly concerned about fast fashion
Aines's user journey with the product
Persona (Roy)/ Shops very little and is somewhat familiar/concerned about fast fashion
Roy's user journey with the product
Make
Experience Map
Primary hypotheses after hypotheses prioritisation:
1. We believe that with the presence of scroll trigger animations the artefact will achieve surprise and delight increasing memorability. We will know we’re right when we see sample B score higher in questions relating to surprise and delight from A/B testing, and further scoring higher in the second round of A/B testing focusing on memorability and retention.
2. We believe that by providing a choice of animated pedagogical agents to choose from will achieve reflection, engagement and help retain information during the use of a product. We will know we’re right when we see sample B score higher in questions relating to reflection, engagement and desired behaviour change from A/B testing as well as B scoring higher in the second A/B test focusing on memorability and retention.
3. We believe that an interactive APA content piece delivering awareness of an environmental issue will gain a greater reach than that of a piece with only text and imagery. We will know we’re right if reach scores higher in artefact B (with interactive APA) in A/B testing, and if we see a higher % of engagement versus % of impressions (this meaning a higher amount of people that visit the content share it compared to that of Layer0 and Social insider).
Design Iterations
The designs started by taking on a heavy street like visualisation to achieve immersiveness, similar to that of "Ben The Bodyguard" website, video of the interactive sight can be found here: https://www.youtube.com/watch?v=SYhaFi77jdM.
As I was researching and testing scroll triggered interactions that required GSAP (javascript) code and was primarily going to be viewed by mobile, it was more important to simplify imagery and achieve surprising interactions to aid memorability in order to validate the designed hypotheses.
Design Psychology used in the design
Dual coding theory, Miller’s law, The Von Restorff effect, Visibility of system status, The Thumb Zone, Psychology of persuasion.
Dual coding theory The pedagogy agent expresses negative information, the facial expression is sad to match the context of the information.
Dual coding theory
The pedagogy agent expresses negative information, the facial expression is sad to match the context of the information.
Miller’s law
Organise content into smaller chunks to help users process and memorise easily
The Von Restroff effect
A simple way to make important words stand out making them more memorable.
Visibility of system status
This tells the user where they are in a product. The user can see here that they are at 2/ 4 facts.
Thumb zone
placement of shareable icons under the like button on the user interface. If the icons are not easy to reach the content is less likely to be clicked and shared.
Psychology of persuasion
Social proof by showing the user how many other people have shared the content, this gives the content validation and credibility.
Check
Usability test
Tasks
1). Navigate to information to learn about the interactive piece
2). Select a character and enter experience
3). Navigate through the content
4). Share the content
Success = 7
Partial success = 5
Fail = 0
User testing results from figure 15. converted into a success rate percentage:
((7 + (5* 0.5))/12) X 100 = 79 % task completion rate.
Changes that were made after usability testing were as follows:
1) Some usability issues were observed with the second speech bubble when tested during task 3 on mobile, this was also resolved before entering the next round of testing.
2) Another usability issue that was observed was the lack of visibility of system status when users had picked a character (task 2). A change that has been made to this issue is as follows: the character that is not selected is now shaded out, so the user knows which character is selected.
3) An “x” icon button was put within the information content box to allow the user to close it again instead of toggling the “i” icon button. This allows the user to visually see exactly how to close it instead of guessing to repress the “i” icon button again.
4) As two of the users entered the solutions section, they thought the faded out element was the end of the website for a moment. To avoid this confusion a scroll down label was introduced into the content at this point.
A/B Testing
20 participants consented to taking part in the A/B test meaning, 10 participants took part in post task questionnaire A (the control) and 10 participants took part in post task questionnaire B (the artefact that allowed users to choose an animated pedagogy agent (APA) with scroll triggered interactions). Both groups A and B were asked the same question in each survey so that they could be compared.
Measuring surprise and delight to increase memorability,
to support hypothesis 1.
Measuring reflection and engagement to achieve retained information and desired behaviour change, to support hypothesis 2.
Measuring reach , to support hypothesis 3.
During the remote A/B testing there was also a series of open ended questions.
When asked the question “what did you like most about using the product?” the responses were as follows (some participants commented on more than one element):
• 1 participant referred to the interesting facts
• 3 participants comment on interactivity
• 4 participants commented on the scroll through journey/path
• 3 participants commented on the design,
• 2 participants commented on ease of use
• 2 participants commented on picking characters.
Two weeks after the initial A/B testing had been completed five participants from test A (the control) and five participants from test B (with interactive APA) were contacted to participate in a memorability and retained information test. The test given to both A and B were identical and required the participants to think back to their experience two weeks ago while using the artefact.
As Jakob Nielson put it “pay attention to what users do, not what they say. Self-reported claims are unreliable, as are user speculations about future behavior” (Nielsen, 2001).
Questions asked were in the order that they appeared and were separated into sections
Section 1 : Consent
Section 2 : General
Section 3 : Negative effects
Section 4 : Positive actions
Section 5 : Solutions
Section 6 : Ending
An interesting finding that can be seen in the diagram above is that the user remembered less and less as they moved through prototype A (the control). And users had a peak at the solutions section showing the interactive APA engaged the user to use the reflective part of the brain resulting in higher levels of retained information.
The aim of the research was to find a way to drive awareness and educate people about the effects of fast fashion in a way that would cause the viewer to reflect on what they were viewing and interacting with to increase memorability aiding behavioural change.
The results from A/B testing validated the research question as being true. Confirming that the presence of a scroll triggered interactive APA encouraged emotionally involvement, reflection and helped retain information about the effects of fast fashion.
The control (Prototype A)
Access prototype below:
https://xd.adobe.com/view/f9c55d75-478a-456f-9853-ae1fde95b490-ac96/
Interactive Animated Pedagogy Agent (Prototype B)
Access prototype below:
https://megan-sarah.github.io/sustainable-streets/
Video recording of hi-fi mobile prototype
Video recording of hi-fi web prototype
