InterACT: Facilitating conversations about online safety
InterACT: Facilitating conversations about online safety
CONTEXT
CONTEXT
In Alaska, costly and unreliable internet access is improving with satellite service. Many parents are concerned about safety as they learn to navigate the internet themselves. To address this, the Alaska Children’s Trust (ACT) created a deck of cards with discussion questions and educational information.
In Alaska, costly and unreliable internet access is improving with satellite service. Many parents are concerned about safety as they learn to navigate the internet themselves. To address this, the Alaska Children’s Trust (ACT) created a deck of cards with discussion questions and educational information.
ROLE
ROLE
Designer
Designer
TIMELINE
TIMELINE
Feb - May 2025
Feb - May 2025
TEAM
TEAM
1 Product Manager
3 Product Designers
1 Product Manager
3 Product Designers
SKILLS
SKILLS
Figma/Figjam, User Research,
User Testing, Prototyping,
Mobile Design, 0-1
Figma/Figjam, User Research,
User Testing, Prototyping,
Mobile Design, 0-1
FINAL SOLUTION
FINAL SOLUTION
In collaboration with ACT, Hack4Impact designed th app InterACT to consolidate conversation starters, parenting tips, and activity ideas, and make this resource more accessible for all families.
In collaboration with ACT, Hack4Impact designed th app InterACT to consolidate conversation starters, parenting tips, and activity ideas, and make this resource more accessible for all families.
CURRENT SOLUTION
CURRENT SOLUTION
Pain points with physical deck
Pain points with physical deck
ACT’s Conversations for Families is a ring-bound deck of cards with discussion questions on one side and educational information on the other, organized by maturity level and topic.
ACT’s Conversations for Families is a ring-bound deck of cards with discussion questions on one side and educational information on the other, organized by maturity level and topic.
Physical deck of cards attached by a ring
Front side of card shows a discussion question
Back side of card contains information and parent tip
ACT was concerned about the physical deck’s limited scalability. With the rise of AI, they wanted to provide more information than the deck’s size and production costs allowed.
ACT was concerned about the physical deck’s limited scalability. With the rise of AI, they wanted to provide more information than the deck’s size and production costs allowed.
Hard for users to quickly find a card on their desired topic
Hard for users to quickly find a card on their desired topic
Hard for users to quickly find a card on their desired topic
Physical size limits the amount of information available
Physical size limits the amount of information available
Physical size limits the amount of information available
Printing and distributing physical deck is costly
Printing and distributing physical deck is costly
Printing and distributing physical deck is costly
USER RESEARCH
USER RESEARCH
Understanding both prospective users
Understanding both prospective users
My team interviewed 10 teenagers and parents to understand their feelings about the current solution, as well as their goals and use cases.
My team interviewed 10 teenagers and parents to understand their feelings about the current solution, as well as their goals and use cases.
Parent POV
Parent
POV
Parent
POV
Want to tailor the deck to focus on specific topics and skip sensitive ones
Want to tailor the deck to focus on specific topics and skip sensitive ones
Want to tailor the deck to focus on specific topics and skip sensitive ones
Unlikely to reuse the deck but still want
to monitor child’s usage
Unlikely to reuse the deck but still want
to monitor child’s usage
Unlikely to reuse the deck but still want
to monitor child’s usage
Info is useful, but unlikely to change their behavior
Info is useful, but unlikely to change their behavior
Info is useful, but unlikely to change their behavior
Don’t want to be lectured about how they use technology
Don’t want to be lectured about how they use technology
Don’t want to be lectured about how they use technology
Child
POV
Child
POV
Child
POV
COMPETITOR RESEARCH
COMPETITOR RESEARCH
Designing for education vs conversation
Designing for education vs conversation
Since this resource aims to teach online safety through honest conversations, I drew inspiration from two apps that excel in these aspects.
Since this resource aims to teach online safety through honest conversations, I drew inspiration from two apps that excel in these aspects.
Duolingo utilizes gamification to make learning fun.
Duolingo utilizes gamification to make learning fun.
Duolingo utilizes gamification to make learning fun.
Engaging visual and motion design
Engaging visual and motion design
Engaging visual and motion design
Visuals could distract from conversation
Visuals could distract from conversation
Visuals could distract from conversation
Points and streak trackers encourage consistency
Points and streak trackers encourage consistency
Points and streak trackers encourage consistency
Competition isn’t conducive to honest conversations
Competition isn’t conducive to honest conversations
Competition isn’t conducive to honest conversations
Holsom focuses on building relationships through dialogue.
Holsom focuses on building relationships through dialogue.
Holsom focuses on building relationships through dialogue.
Minimal UI and color scheme
Minimal UI and color scheme
Minimal UI and color scheme
Focuses on driving conversation
Focuses on driving conversation
Focuses on driving conversation
Not suited for providing additional information or resources
Not suited for providing additional information or resources
Not suited for providing additional information or resources
IDEATING SOLUTIONS
IDEATING SOLUTIONS
How might we...
How might we...
Based on our interview insights, my team developed these questions to guide feature ideation
Based on our interview insights, my team developed these questions to guide feature ideation
Create comfortable environments for discussion of sensitive content?
Create comfortable environments for discussion of sensitive content?
Create comfortable environments for discussion of sensitive content?
Guide parents who may also be inexperienced with the internet?
Guide parents who may also be inexperienced with the internet?
Guide parents who may also be inexperienced with the internet?
Help parents navigate large amount of information?
Help parents navigate large amount of information?
Help parents navigate large amount of information?
Encourage more consistent tool usage and ongoing conversation?
Encourage more consistent tool usage and ongoing conversation?
Encourage more consistent tool usage and ongoing conversation?
We organized our solution ideas on the following priority matrix, focusing on the features with the highest impact.
We organized our solution ideas on the following priority matrix, focusing on the features with the highest impact.
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
Keeping it simple
Keeping it simple
To keep the focus on conversations, we designed a simple information architecture. I worked on the ‘Home’ screen, while my teammates designed ‘Explore’ and ‘Deck.’
To keep the focus on conversations, we designed a simple information architecture. I worked on the ‘Home’ screen, while my teammates designed ‘Explore’ and ‘Deck.’
ITERATION
ITERATION
Simple home page
Simple home page
When I was initially iterating on the “Home” page, I wanted to prioritize setting the tone for genuine conversation rather than seeking gamification-based achievements.
When I was initially iterating on the “Home” page, I wanted to prioritize setting the tone for genuine conversation rather than seeking gamification-based achievements.
A. Jump back into recent decks
Recent
Online Interaction
Medium
Topics
Inappropriate
Content
Online
Interactions
Platforms &
Privacy
Age Range
Easy
8+
Medium
11+
Hard
13+
Jump back into ongoing conversation
Scrolling to find desired deck can be annoying
B. Overview of all topics, filter by level
All
Easy
Medium
Hard
Inappropriate
Content
Easy
Online
Interactions
Easy
Platforms &
Privacy
Easy
Screen Time
Easy
Social Media &
Mental Health
Easy
Can see all topics at once
Removes the need for a separate “Filter” page
Resume button is less obvious than dedicated “Recent” row
C. Highlight achievements
Topics
Inappropriate
Content
Online
Interactions
Platforms &
Privacy
Age Range
Easy
8+
Medium
11+
Hard
13+
5
conversations
1
completed deck
3
week streak
Removes the need for a separate ‘Achievements’ page
Sets the tone that “Achievements” is goal rather than conversation
A. Jump back into
recent decks
A. Jump back into recent decks
Recent
Online Interaction
Medium
Topics
Inappropriate
Content
Online
Interactions
Platforms &
Privacy
Age Range
Easy
8+
Medium
11+
Hard
13+
Jump back into ongoing conversation
Scrolling to find desired deck can be annoying
C. Highlight achievements
Recent
Online Interaction
Medium
Topics
Inappropriate
Content
Online
Interactions
Platforms &
Privacy
Age Range
Easy
8+
Medium
11+
Hard
13+
Removes the need for a separate "Achievements" page
Sets the tone that "Achievements" is the goal rather than conversation
B. Overview of all topics, filter by level
Can see all topics at once
Resume button is less obvious than dedicated "Recent" row
Removes the need for a separate "Filter" page
All
Easy
Medium
Hard
Inappropriate
Content
Easy
Online
Interactions
Easy
Platforms &
Privacy
Easy
Screen Time
Easy
Social Media &
Mental Health
Easy
Adding hypothetical “Scenarios”
questions to teach best responses
Adding hypothetical
“Scenarios” questions
to teach best responses
Adding hypothetical
“Scenarios” questions
to teach best responses
To help children feel more comfortable discussing sensitive online behaviors, I suggested reframing questions from
“Have you ever...” to “What would you do if...”
Using hypothetical scenarios allows parents to teach children how to respond to different situations without making them feel judged for their past behavior.
To help children feel more comfortable discussing sensitive online behaviors, I suggested reframing questions from
“Have you ever...” to “What would you do if...”
Using hypothetical scenarios allows parents to teach children how to respond to different situations without making them feel judged for their past behavior.
Tracking achievements...
Tracking achievements...
I wanted to track users’ progress and frame them as achievements to excite users to return to the app. I thought it could be helpful.
I wanted to track users’ progress and frame them as achievements to excite users to return to the app. I thought it could be helpful.
A. Monthly progress tracking
A. Monthly progress tracking
15
15
15
10
10
10
5
5
5
0
0
0
Jan
Jan
Jan
Feb
Feb
Feb
Mar
Mar
Mar
Apr
Apr
Apr
May
May
May
Jun
Jun
Jun
July
July
July
18 Cards
18 Cards
18 Cards
Child 2
Child 2
Child 2
Child 1
Child 1
Child 1
43 Cards
43 Cards
43 Cards
Encourages consistent conversations
Encourages consistent conversations
Encourages consistent conversations
Looks cluttered for 3+ siblings
Looks cluttered for 3+ siblings
Looks cluttered for 3+ siblings
Less meaningful with limited number of cards
Less meaningful with limited number of cards
Less meaningful with limited number of cards
B. Overview of all topics, filter by level
B. Overview of all topics, filter by level
B. Overview of all topics, filter by level
Empower your child to navigate the online world safely
Empower your child to navigate the online world safely
Empower your child to navigate the online world safely
25
25
25
Cards
Remaining
Cards
Remaining
Cards
Remaining
1 month ago
1 month ago
1 month ago
Last check-in
Last check-in
Last check-in
5
5
5
Decks completed
Decks completed
Decks completed
Emphasizes cards remaining to encourage returning to the app
Emphasizes cards remaining to encourage returning to the app
Emphasizes cards remaining to encourage returning to the app
Reminds parents of the app’s goal to encourage completion
Reminds parents of the app’s goal to encourage completion
Reminds parents of the app’s goal to encourage completion
or skills learned instead!
or skills learned instead!
I shifted the focus to tracking which cards have been discussed for each skill within a topic to show parents a measurable metric on how the app has helped them educate their child about online safety.
I shifted the focus to tracking which cards have been discussed for each skill within a topic to show parents a measurable metric on how the app has helped them educate their child about online safety.
A. Dropdown
Inappropriate Content
Inappropriate Content
Inappropriate Content
Asking for consent
Asking for consent
Asking for consent
Reporting content
Reporting content
Reporting content
Handling mature photos
Handling mature photos
Handling mature photos
Online Interactions
Online Interactions
Online Interactions
Platforms & Privacy
Platforms & Privacy
Platforms & Privacy
Screen Time
Screen Time
Screen Time
Social Media & Mental Health
Social Media & Mental Health
Social Media & Mental Health
Can compare skills across different topics
Can compare skills across different topics
Can compare skills across different topics
Continually pressing dropdown can be annoying
Continually pressing dropdown can be annoying
Continually pressing dropdown can be annoying
B. Cards + Modal
Inappropriate Content
Inappropriate Content
Inappropriate Content
1 of 2
1 of 2
1 of 2
Online
Interactions
Online
Interactions
Online
Interactions
Platforms &
Privacy
Platforms &
Privacy
Platforms &
Privacy
2 of 3
2 of 3
2 of 3
Screen Time
Screen Time
Screen Time
1 of 2
1 of 2
1 of 2
Social Media &
Mental Health
Social Media &
Mental Health
Social Media &
Mental Health
0 of 3
0 of 3
0 of 3
Asking for consent
Asking for consent
Asking for consent
What does “consent” mean to you?
What does “consent” mean to you?
What does “consent” mean to you?
Do you ask your friends for consent before you post about them online?
Do you ask your friends for consent before you post about them online?
Do you ask your friends for consent before you post about them online?
Handling mature content
Handling mature content
Handling mature content
Have you ever seen something online meant for adults?
Have you ever seen something online meant for adults?
Have you ever seen something online meant for adults?
On a scale of 1 to 5, how comfortable would you be
telling me if someone asked you for a nude photo?
On a scale of 1 to 5, how comfortable would you be
telling me if someone asked you for a nude photo?
On a scale of 1 to 5, how comfortable would you be
telling me if someone asked you for a nude photo?
What would you say or do if someone showed you a nude picture of someone else?
What would you say or do if someone showed you a nude picture of someone else?
What would you say or do if someone showed you a nude picture of someone else?
Inappropriate Content
Inappropriate Content
Inappropriate Content
Skills for navigating boundaries and mature content
Skills for navigating boundaries and mature content
Skills for navigating boundaries and mature content
“Achievements” screen is simpler
“Achievements” screen is simpler
“Achievements” screen is simpler
Opening and closing modals can be annoying
Opening and closing modals can be annoying
Opening and closing modals can be annoying
Actually...I need to keep it SIMPLE
Actually...I need to keep it SIMPLE
After further discussion with the client, I learned that creating new ‘Scenarios’ questions for all topics or labeling each card with skills would be unfeasible. Instead, the client preferred focusing on conversation starters for current topics, such as AI usage. I streamlined the features to focus on enabling honest conversations while keeping them exciting.
After further discussion with the client, I learned that creating new ‘Scenarios’ questions for all topics or labeling each card with skills would be unfeasible. Instead, the client preferred focusing on conversation starters for current topics, such as AI usage. I streamlined the features to focus on enabling honest conversations while keeping them exciting.
Recent + Recommendations
Recent
Recent
Recent
Online Interaction
Medium
Online Interaction
Medium
Online Interaction
Medium
Topics
Topics
Topics
Inappropriate
Content
Inappropriate
Content
Inappropriate
Content
Online
Interactions
Online
Interactions
Online
Interactions
Platforms &
Privacy
Platforms &
Privacy
Platforms &
Privacy
Age Range
Age Range
Age Range
Easy
8+
Easy
8+
Easy
8+
Medium
11+
Medium
11+
Medium
11+
Hard
13+
Hard
13+
Hard
13+
Encouraging progress
Empower your child to navigate the online world safely
Empower your child to navigate the online world safely
Empower your child to navigate the online world safely
25
25
25
Cards
Remaining
Cards
Remaining
Cards
Remaining
1 month ago
1 month ago
1 month ago
Last check-in
Last check-in
Last check-in
5
5
5
Decks completed
Decks completed
Decks completed
DESIGN SYSTEM
DESIGN SYSTEM
Adding playfulness through color and style
Adding playfulness through color and style
We chose Goldplay for playful headers paired with Jost for clean, readable body text, and we drew inspiration from ACT’s brand colors (blues, greens, and purples).
We chose Goldplay for playful headers paired with Jost for clean, readable body text, and we drew inspiration from ACT’s brand colors (blues, greens, and purples).
Heading / Large
Heading / Large
Heading / Large
Font size: 32px (2rem) | Line height: 40px | Tracking -2.1%
Font size: 32px (2rem) | Line height: 40px | Tracking -2.1%
Font size: 32px (2rem) | Line height: 40px | Tracking -2.1%
Heading / Large
Bold
Heading / Large
Bold
Heading / Large
Bold
Heading / Small
Heading / Small
Heading / Small
Font size: 26px (1.625rem) | Line height: 32px | Tracking -2.0%
Font size: 26px (1.625rem) | Line height: 32px | Tracking -2.0%
Font size: 26px (1.625rem) | Line height: 32px | Tracking -2.0%
Heading / Small
Bold
Heading / Small
Bold
Heading / Small
Bold
Subtitle / Large
Subtitle / Large
Subtitle / Large
Font size: 24px (1.5rem) | Line height: 32px | Tracking -2.0%
Font size: 24px (1.5rem) | Line height: 32px | Tracking -2.0%
Font size: 24px (1.5rem) | Line height: 32px | Tracking -2.0%
Subtitle / Large
Semi Bold
Subtitle / Large
Semi Bold
Subtitle / Large
Semi Bold
Subtitle / Small
Subtitle / Small
Subtitle / Small
Font size: 20px (1.25rem) | Line height: 24px | Tracking -1.7%
Font size: 20px (1.25rem) | Line height: 24px | Tracking -1.7%
Font size: 20px (1.25rem) | Line height: 24px | Tracking -1.7%
Subtitle / Small
Semi Bold
Subtitle / Small
Semi Bold
Subtitle / Small
Semi Bold
Paragraph / Large
Paragraph / Large
Paragraph / Large
Font size: 14px (0.875rem) | Line height: 20px | Tracking -1.1%
Font size: 14px (0.875rem) | Line height: 20px | Tracking -1.1%
Font size: 14px (0.875rem) | Line height: 20px | Tracking -1.1%
Paragraph / Medium
Regular
Paragraph / Medium
Regular
Paragraph / Medium
Regular
Paragraph / Small
Paragraph / Small
Paragraph / Small
Font size: 12px (0.75rem) | Line height: 20px | Tracking -0.6%
Font size: 12px (0.75rem) | Line height: 20px | Tracking -0.6%
Font size: 12px (0.75rem) | Line height: 20px | Tracking -0.6%
Paragraph / Small
Regular
Paragraph / Small
Regular
Paragraph / Small
Regular
Label
Label
Label
Font size: 12px (0.75rem) | Line height: 20px | Tracking -0.6%
Font size: 12px (0.75rem) | Line height: 20px | Tracking -0.6%
Font size: 12px (0.75rem) | Line height: 20px | Tracking -0.6%
Label
Regular
Label
Regular
Label
Regular
Neutral
Neutral
Neutral
These colors are used as supporting secondary colors in backgrounds, text colors, seperators, models, etc
These colors are used as supporting secondary colors in backgrounds, text colors, seperators, models, etc
These colors are used as supporting secondary colors in backgrounds, text colors, seperators, models, etc
50
50
50
#FAFAFB
#FAFAFB
#FAFAFB
100
100
100
#F0F0F2
#F0F0F2
#F0F0F2
200
200
200
#D5D6D8
#D5D6D8
#D5D6D8
300
300
300
#BBBBBB
#BBBBBB
#BBBBBB
400
400
400
#80838B
#80838B
#80838B
500
500
500
#595B61
#595B61
#595B61
600
600
600
#484A4F
#484A4F
#484A4F
700
700
700
#3E3E3F
#3E3E3F
#3E3E3F
900
900
900
#1C1C1E
#1C1C1E
#1C1C1E
Primary
Primary
Primary
Used for all key interactive components across the UI
Used for all key interactive components across the UI
Used for all key interactive components across the UI
200
200
200
#D8DDE1
#D8DDE1
#D8DDE1
300
300
300
#98B5C3
#98B5C3
#98B5C3
400
400
400
#8CC5CF
#8CC5CF
#8CC5CF
500
500
500
#498496
#498496
#498496
600
600
600
#476469
#476469
#476469
900
900
900
#374466
#374466
#374466
Secondary
Secondary
Secondary
Used for less prominent components
Used for less prominent components
Used for less prominent components
50
50
50
#E4DEA0
#E4DEA0
#E4DEA0
100
100
100
#E5C572
#E5C572
#E5C572
150
150
150
#B5CC84
#B5CC84
#B5CC84
700
700
700
#6EB644
#6EB644
#6EB644
800
800
800
#5E7A26
#5E7A26
#5E7A26
900
900
900
#355025
#355025
#355025
Tertiary
Tertiary
Tertiary
Used for accents components
Used for accents components
Used for accents components
50
50
50
#7C448E
#7C448E
#7C448E
200
200
200
#5A3C62
#5A3C62
#5A3C62
Shades
Shades
Shades
0
0
0
#FFFFFF
#FFFFFF
#FFFFFF
100
100
100
#000000
#000000
#000000
FINAL FLOW
FINAL FLOW
Putting it all together
Putting it all together
I decided to focus on these features for the MVP:
Achievements
Encourage full deck usage
Explore Decks
Easy filter / search through all decks
Recent
Continue previous conversations
Recommendations
Try similar topics / levels
I decided to focus on these features for the MVP:
Achievements
Encourage full deck usage
Explore Decks
Easy filter / search through all decks
Recent
Continue previous conversations
Recommendations
Try similar topics / levels
REFLECTION
REFLECTION
My own learning
My own learning
This was my first time designing 0-1, and I learned a lot about the product design process and client work. I’m really grateful to my PM and fellow designers for their support and advice.
This was my first time designing 0-1, and I learned a lot about the product design process and client work. I’m really grateful to my PM and fellow designers for their support and advice.
Don't assume the user is like you
Don't assume the user is like you
While I grew up surrounded by tech in the Bay Area, many Alaskans are still unfamiliar with the internet. My team initially jumped into design but hit a roadblock without concrete user data, so I realized we needed to step back and conduct interviews. Research revealed that some Alaskan parents are just as new to the internet as their children, leading me to design a simple app focused on clear information and conversation.
While I grew up surrounded by tech in the Bay Area, many Alaskans are still unfamiliar with the internet. My team initially jumped into design but hit a roadblock without concrete user data, so I realized we needed to step back and conduct interviews. Research revealed that some Alaskan parents are just as new to the internet as their children, leading me to design a simple app focused on clear information and conversation.
Honor the client’s constraints
Honor the client’s constraints
I was excited about features like the “Scenario” questions, which would let children practice online safety without feeling interrogated, and the “Skills” tracking, which would show parents the progress they’ve made. But I had to recognize the client’s constraints and goals. Since the client wanted to prioritize creating new question cards on current issues like AI, they were unable to provide the extra material needed to implement these features.
I was excited about features like the “Scenario” questions, which would let children practice online safety without feeling interrogated, and the “Skills” tracking, which would show parents the progress they’ve made. But I had to recognize the client’s constraints and goals. Since the client wanted to prioritize creating new question cards on current issues like AI, they were unable to provide the extra material needed to implement these features.