Simplifying BeeTrap's interface to enhance learning experience and reduce cognitive load.
Simplifying BeeTrap's interface to enhance learning experience and reduce cognitive load.
Simplifying BeeTrap's interface to enhance learning experience and reduce cognitive load.
Simplifying BeeTrap's interface to enhance learning experience and reduce cognitive load.
calendar_month
Timeline
Timeline
Timeline
Timeline
Dec - May 2023
Dec - May 2023
Dec - May 2023
Dec - May 2023
work
Role
Role
Role
Role
UI/UX Designer
UI/UX Designer
UI/UX
Designer
UI/UX Designer
groups
Team
Team
Team
Team
RocHCI Research
RocHCI Research
RocHCI Research
RocHCI Research
Introduction
BeeTrap is an educational AR game developed by the RocHCI research lab. It aims to teach middle schoolers about the “filter bubble effect”— an issue that occurs when recommendation algorithms limit exposure to diverse perspectives, trapping users in a bubble of content that reinforces their existing views.
The game uses analogy-based learning to give insight into how these algorithms work and how to avoid the filter bubble effect in their lives. Users take the role of a bee, observing how their choices in pollinating flowers affects which types of flowers grow in a garden.
BeeTrap is an educational AR game developed by the RocHCI research lab. It aims to teach middle schoolers about the “filter bubble effect”— an issue that occurs when recommendation algorithms limit exposure to diverse perspectives, trapping users in a bubble of content that reinforces their existing views.
The game uses analogy-based learning to give insight into how these algorithms work and how to avoid the filter bubble effect in their lives. Users take the role of a bee, observing how their choices in pollinating flowers affects which types of flowers grow in a garden.
My Role
I designed a visually and functionally improved interface and revised how the analogies are conveyed to enhance clarity and learning. I discussed ideas and implemented changes with the project manager and team of developers throughout this process.
I designed a visually and functionally improved interface and revised how the analogies are conveyed to enhance clarity and learning. I discussed ideas and implemented changes with the project manager and team of developers throughout this process.
Impact
Improved engagement in the game and comprehension of the metaphor among children at summer camp, creating a more immersive and effective learning experience.
Improved engagement in the game and comprehension of the metaphor among children at summer camp, creating a more immersive and effective learning experience.
Problem
I started by identifying the two main points for improvement by getting to know the current iteration of the product.
I started by identifying the two main points for improvement by getting to know the current iteration of the product.
Visual Clutter
Visual Clutter
Oversaturated colors, stretched text, translucent backgrounds, and scattered clipart strain users' eyes. A lack of visual organization makes it difficult to know what to pay attention to.
Oversaturated colors, stretched text, translucent backgrounds, and scattered clipart strain users' eyes. A lack of visual organization makes it difficult to know what to pay attention to.
Lack of Clarity
Lack of Clarity
Instructions and options throughout the experience use unfamiliar jargon and awkward phrasing.
Instructions and options throughout the experience use unfamiliar jargon and awkward phrasing.
How are users meant to know what some of the options on this menu mean?
How are users meant to know what some of the options on this menu mean?
Ideation
Ideation
Ideation
Ideation
Based on the issues I identified above, I created a list of action items and improvement suggestions for each screen in the current flow.
Based on the issues I identified above, I created a list of action items and improvement suggestions for each screen in the current flow.
UI Style
To address the visual clutter, I decided against using translucent cards, opting for opaque backgrounds instead. Being able to see the saturated colors of the 3D flowers through the cards made them hard to read.
To address the visual clutter, I decided against using translucent cards, opting for opaque backgrounds instead. Being able to see the saturated colors of the 3D flowers through the cards made them hard to read.
Before
After
I wanted the new UI to feel clean, simple, and welcoming. To achieve this, I opted for a Sans Serif font and warm color palette inspired by the colors of bees.
I wanted the new UI to feel clean, simple, and welcoming. To achieve this, I opted for a Sans Serif font and warm color palette inspired by the colors of bees.
Revising text and instructions
Before
close
After
check
“The buds got ranked.”
(Ranked? By what?)
“The buds got ranked.”
(Ranked? By what?)
“The beehive ranks the buds inside its pollen circle before it can help them grow. The closer a bud is to the beehive, the higher the rank.”
“The beehive ranks the buds inside its pollen circle before it can help them grow. The closer a bud is to the beehive, the higher the rank.”
"You just experienced the Filter Bubble because you are almost only surrounded by similar and clustered flowers. In real life, it is formed by the recommendation system. (music recommendation, shopping recommendation). In fact, healthy bees need to consume more diverse flowers.”
(Why did the Filter Bubble effect happen? How does it relate to recommendation systems?)
"You just experienced the Filter Bubble because you are almost only surrounded by similar and clustered flowers. In real life, it is formed by the recommendation system. (music recommendation, shopping recommendation). In fact, healthy bees need to consume more diverse flowers.”
(Why did the Filter Bubble effect happen? How does it relate to recommendation systems?)
“The beehive grew flowers similar to the ones you chose, so the garden went from being very diverse to one cluster of similar flowers. This is the Filter Bubble Effect. In real life, this happens with online recommendation systems (YouTube or TikTok, online shopping, etc). Websites recommend items similar to what you clicked on before. So you only see very similar things, which is unhealthy.”
“The beehive grew flowers similar to the ones you chose, so the garden went from being very diverse to one cluster of similar flowers. This is the Filter Bubble Effect. In real life, this happens with online recommendation systems (YouTube or TikTok, online shopping, etc). Websites recommend items similar to what you clicked on before. So you only see very similar things, which is unhealthy.”
“Try out the toggle button: find the ranked buds; what kinds of flowers will grow out?
(What does the toggle do? What attribute of flowers are we supposed to pay attention to?)
“Try out the toggle button: find the ranked buds; what kinds of flowers will grow out?
(What does the toggle do? What attribute of flowers are we supposed to pay attention to?)
“Use this toggle button to change which flowers the beehive chooses to grow. Pay attention to how the ranking changes when you click the button. Which one is better to increase diversity?”
“Use this toggle button to change which flowers the beehive chooses to grow. Pay attention to how the ranking changes when you click the button. Which one is better to increase diversity?”
Final Implementation
Final Implementation
Final Implementation
Final Implementation
Once designed, I implemented the new UI in parallel with RocHCI developer Andy in Unity. Before my redesign, BeeTrap’s interface was not only cluttered and abrasive but also difficult to understand. I had trouble figuring out what the game was trying to convey, so there was no way a middle schooler would understand it. Now, the game is easier to navigate and to understand. Here is a summary of the improvements I made.
Once designed, I implemented the new UI in parallel with RocHCI developer Andy in Unity. Before my redesign, BeeTrap’s interface was not only cluttered and abrasive but also difficult to understand. I had trouble figuring out what the game was trying to convey, so there was no way a middle schooler would understand it. Now, the game is easier to navigate and to understand. Here is a summary of the improvements I made.
Simplified and refined clipart assets
To maintain the fun spirit of the previous iteration, I adapted the clipart assets to make them cohesive with the new lineless visual style.
To maintain the fun spirit of the previous iteration, I adapted the clipart assets to make them cohesive with the new lineless visual style.
Emphasis through highlight color
To refrain from overwhelming the user when we needed to display longer paragraphs, I made use of the accent color to organize the information hierarchy.
To refrain from overwhelming the user when we needed to display longer paragraphs, I made use of the accent color to organize the information hierarchy.
Flowchart panel
To clarify which step of the pollination process the user is currently on, I opted to keep a flowchart panel active at all times.
To clarify which step of the pollination process the user is currently on, I opted to keep a flowchart panel active at all times.
Before and after comparison
Before
close
After
check
Reflection and next steps
Reflection and next steps
Reflection and next steps
Reflection and next steps
The UI changes implemented not only made navigation more intuitive, they were also able to bring clarity and simplicity in the analogy, deepening students’ engagement and better conveying the filter bubble effect. The six students we tested with were able to grasp complex concepts more easily, leading to a more effective learning experience.
This was an invaluable opportunity to hone my design skills, gain experience with Unity AR development, and learn how to communicate effectively in a research environment.
The UI changes implemented not only made navigation more intuitive, they were also able to bring clarity and simplicity in the analogy, deepening students’ engagement and better conveying the filter bubble effect. The six students we tested with were able to grasp complex concepts more easily, leading to a more effective learning experience.
This was an invaluable opportunity to hone my design skills, gain experience with Unity AR development, and learn how to communicate effectively in a research environment.
Future plans
Remodel the 3D flower and beehive as to not be visually abrasive
Integrate an animated 3D Bee virtual agent that can guide students through learning
Remodel the 3D flower and beehive as to not be visually abrasive
Integrate an animated 3D Bee virtual agent that can guide students through learning