Forked from
2024 Competition / Tsinghua
700 commits behind the upstream repository.
-
HouTeng Chan authoredHouTeng Chan authored
inclusivity.html 19.48 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<style>
body {
font-family: Calibri, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h2 {
scroll-margin-top: 60px;
}
.row.mt-4 {
margin-right: 100px;
margin-left: 130px;
}
</style>
</head>
<body>
{% extends "layout.html" %}
{% block title %}Inclusivity{% endblock %}
{% block page_content %}
<div class="sidebar">
<ul>
<li><a href="#Future generations">Future generations</a></li>
<li><a href="#Socioeconomic status">Socioeconomic status</a></li>
<li><a href="#Accessibility needs">Accessibility needs</a></li>
<li><a href="#Global Outreach">Global Outreach</a></li>
<li><a href="#References">References</a></li>
</ul>
</div>
<div class="progress-container">
<svg class="progress-bar-circle" width="60" height="60">
<circle class="progress-circle" cx="30" cy="30" r="25" stroke-width="5" fill="transparent"></circle>
</svg>
<div class="progress-text">0%</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<hr>
<div class="image-container" style="display: flex; justify-content: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic.png" alt="ibd_figure" class="shadowed-image" style="width: 60%; max-width: 600px;">
</div>
<p>At MuScure, we believe that science thrives when everyone is included. Inclusive science not only reflects the diversity of our world but also unlocks new ideas, insights, and innovations that can change lives. Through our project, we have identified several focus areas: gender, accessibility needs, socioeconomic status, global outreach, and empowering future generations. These areas shape our commitment to ensure that our work is accessible, impactful, and empowering for all communities. Together, we can create a world where diverse minds contribute to groundbreaking discoveries that benefit all of humanity.</p>
<div class="image-container" style="display: flex; justify-content: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic2.png" alt="ibd_figure" class="shadowed-image" style="width: 45%; max-width: 450px;">
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h2 id="Future generations">
<h2>Future generations</h2>
<hr> <p>We believe that real change and the power to shape the future begins today. Education is the foundation of that change, and it starts from a young age. By inspiring future generations—especially middle schoolers and even younger audiences—we can nurture a passion for science early on.</p>
<p>People are most curious when they are young, and this curiosity enhances their brain's ability to learn, helping them retain information even if the subject is not initially interesting to them. This makes fostering curiosity in childhood essential for long-term learning and growth.</p>
<p>To achieve this, we created an engaging and easy-to-understand animation video designed to capture the attention of young minds. Our goal is to make science fun, relatable, and exciting for them.</p>
<h3>Simplifying Language for Young Audiences</h3>
<p>When designing our content, we used <b>specific techniques</b> to simplify the language so that even children could understand it. For example:</p>
<ul>
<li>We <b>avoided technical words</b> and instead used common, everyday terms to explain scientific processes.</li>
<li>We kept our sentences short and clear, breaking down complex ideas into bite-sized pieces that could be more easily digested. </li>
</ul>
<h3>Engaging Video Content</h3>
<p>To captivate young minds, we created several <b>animated videos</b> that were both <b>fun and informative</b>:</p>
<ul>
<li>Project Introduction Video: This animated video introduces our project in an engaging way, using <b>bright visuals, colorful characters, and simple narration</b> to explain what we do. The animation style is designed to capture the attention of children, making it easier for them to stay focused and absorb the information.
<p> </p>
<div style="text-align: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic16.png" alt="ibd_figure" class="shadowed-image" style="width: 45%; max-width: 450px;">
</div>
<p> </p>
</li>
<li>15-Minute IBD Educational Video: One of our cornerstone videos is a 15-minute-long animation focused on <b>IBD (Inflammatory Bowel Disease)</b>. We took great care to explain the condition in a way that children can understand, using <b>cartoon characters</b> to represent different parts of the body and explaining the symptoms and treatments in a <b>relatable and non-scary way</b>.
<div style="text-align: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic17.png" alt="IBD_educational_video" style="width: 50%; max-width: 500px;">
</div>
<br>
<div style="text-align: center; display: flex; justify-content: center; align-items: flex-start;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic3.png" alt="IBD_character_1" style="width: 45%; max-width: 450px; height: auto; margin-right: 10px;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic5.jpg" alt="IBD_character_2" style="width: 45%; max-width: 450px; height: auto; margin-left: 10px;">
</div>
</li>
</ul>
<p>ADD LZF PART HERE </p>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h2 id="Socioeconomic status">
<h2>Socioeconomic status</h2>
<hr>
<p>In China, while tremendous strides have been made in reducing poverty, many children still face significant socioeconomic barriers, particularly in rural areas. By 2020, the government successfully eradicated extreme rural poverty, yet as of 2018, 19% of children were still living in multidimensional poverty, which includes limited access to education, healthcare, and other essential resources. [2]</p>
<p>To do our part, we traveled to a rural area in Sichuan, where we engaged with local children, introduced our project, and raised awareness about inflammatory bowel disease (IBD). Through activities and discussions, we aimed to inspire curiosity in science and provide them with the tools to envision a brighter future.</p>
</div>
<div style="display: flex; justify-content: center; align-items: flex-start; gap: 20px;">
<div class="image-container" style="flex: 1; max-width: 45%;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic6.png" alt="ibd_figure" class="shadowed-image" style="width: 100%; height: auto;">
</div>
<div class="image-container" style="flex: 1; max-width: 45%;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic7.jpg" alt="ibd_figure" class="shadowed-image" style="width: 100%; height: auto;">
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h2 id="Accessibility needs">
<h2>Accessibility needs</h2>
<hr>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h3>Wiki</h3>
<p>Ensuring that our wiki is accessible to individuals with diverse cognitive and visual challenges, such as autism, dyslexia, color blindness, low vision, and ADHD, was a priority for our team. Drawing from research on digital accessibility and user-centered design, we implemented a range of solutions tailored to meet the specific needs of these user groups. Below is a detailed breakdown of the steps we took, why we made these choices, and how we implemented each accessibility feature.</p>
<p>Many individuals, including those with autism, dyslexia, color blindness, low vision, and ADHD, face challenges when interacting with digital content. Common issues include difficulty processing overwhelming visuals, navigating unclear structures, and reading non-accessible fonts or low-contrast text.</p>
<h4>1. Predictable and Structured Design for Autism</h4>
<h5>Why We Focused on This?</h5>
<p>Research shows that individuals with autism often experience difficulty processing overwhelming stimuli, which can lead to anxiety and frustration when navigating digital environments. According to the Journal of Autism and Developmental Disorders, individuals with autism benefit from predictable patterns, consistent layouts, and minimized sensory input,This allows them to better process and engage with information.</p> <h5>How We Implemented It?</h5>
<ul>
<li>Clear Navigation: We implemented a<b> linear navigation structure</b> where all key content is easily accessible through a consistent menu bar and breadcrumb trails. This ensures that users can predict the next steps and won't feel overwhelmed by complex or unfamiliar pathways.<li>
<li>Consistent Layouts: Each page of the wiki follow a <b>uniform template</b>. We maintained consistent placement of headers, body text, and images across all sections.<li>
<li>Muted Color Schemes: We avoided bright and jarring color schemes that could contribute to sensory overload. Instead, we used muted tones and soft contrast, following recommendations from studies on sensory processing in individuals with autism. This reduces the likelihood of discomfort and makes the interface more user-friendly.<li>
<ul>
<h4>2. Dyslexia-Friendly Fonts and Text Design</h4>
<h5>Why We Focused on This?</h5>
<p>Individuals with dyslexia often struggle to read standard fonts, as they can appear distorted or jumbled. According to Annals of Dyslexia, specialized fonts such as Dyslexie and OpenDyslexic improve readability for dyslexic individuals by reducing letter confusion through distinct shapes. Additionally, avoiding excessive italics or underlining improves text clarity.</p>
<h5>How We Implemented It?</h5>
<ul>
<li>Font Switch Feature: We introduced a <b>font-switching option</b> that allows users to toggle between standard fonts and dyslexia-friendly fonts like Dyslexie and OpenDyslexic. These fonts are designed with heavier bottom weights and distinct character shapes, making it easier for dyslexic users to differentiate between letters.<li>
<li>Avoiding Italics and Underlining: In the body text, we avoided using italics and underlining—both of which can distort the visual form of words—following guidelines from the British Dyslexia Association. Instead, we relied on bold formatting to highlight important text.<li>
<li>Letter Spacing: We ensured that text had <b>larger letters</b>, which makes it easier for dyslexic users to track lines of text without losing their place. This design choice was based on recommendations from accessibility experts in the International Dyslexia Journal.<li>
<ul>
<div class="image-container" style="display: flex; justify-content: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic18.png" alt="ibd_figure" class="shadowed-image" style="width: 50%; max-width: 500px;">
</div>
<h4>3. High Contrast and Readability for Low Vision and Color Blindness/h4>
<h5>Why We Focused on This?</h5>
<p>Individuals with low vision or color blindness face challenges in distinguishing between colors and reading small, low-contrast text. According to the World Blind Union and research on low-vision accessibility, high-contrast color schemes and adjustable text sizes are critical for making digital content readable.</p>
<h5>How We Implemented It?</h5>
<ul>
<li>Clean Design: We used a <b>minimalistic design</b>, ensuring that each page was free from distracting elements like unnecessary images, animations, or banners. This helps users focus on the core content without being sidetracked.<li>
<li>Clear Headings: Each section of the wiki was broken down into <b>concise, clearly labeled headings</b>, making it easier for users to skim and locate the information they need. This approach is supported by research from the Journal of Attention Disorders.<li>
<ul>
<div class="image-container" style="display: flex; justify-content: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic9.png" alt="ibd_figure" class="shadowed-image" style="width: 60%; max-width: 600px;">
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h3>Booklet</h3>
<p>Similarly, we applied these design principles to our booklet by using high-contrast colors and readable fonts for users with low vision or color blindness. Additionally, we created an audiobook version for individuals who are blind or for those who simply prefer listening to books, ensuring that the content is accessible to everyone.</p>
<div class="image-container" style="display: flex; flex-direction: column; align-items: center;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic12.png" alt="ibd_figure" class="shadowed-image" style="width: 60%; max-width: 600px;">
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h3>Educational content</h3>
<p>For our educational videos, we included written text and visuals over the speech to ensure the content is accessible to those who are deaf or hard of hearing, as well as individuals who may have difficulty understanding spoken language. Which can be found <a href="https://2024.igem.wiki/tsinghua/education" style="color: #FF5151" >here</a></p>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h2 id="Global Outreach">
<h2>Global Outreach</h2>
<hr>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h3>Promotion video and booklet</h3>
<p>Global outreach was a key priority for us, as we aimed to make our content accessible to people from all over the world. To achieve this, we translated our booklet into four of the most widely spoken languages: Chinese, Arabic, English, and French, and also created accompanying audiobooks in these languages.</p>
<p>Additionally, we expanded our efforts to make our promotion video available in five languages—Chinese, Arabic, English, French, and Dutch—further broadening our reach. By making our educational content available in multiple languages, we emphasize the importance of inclusivity and ensure that people from diverse linguistic and cultural backgrounds can participate in and benefit from our project.</p>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h3>Hardware design</h3>
<p>To ensure that our hardware design catered to different cultural backgrounds, we developed two distinct devices to accommodate the preferences and needs of diverse users.</p>
<p>For our Asian audience, we created a scented bag, inspired by the cultural significance of scented sachets, particularly in Chinese culture. These sachets, often filled with aromatic herbs, are deeply rooted in tradition, symbolizing health, protection, and good fortune. This made the scented bag design a culturally relevant and familiar choice for users in Asia, where such items are frequently used in daily life and traditional festivals. By incorporating this design, we aimed to blend our scientific solution with cultural practices, making it more acceptable and attractive for users in these regions.</p> <p>At the same time, to accommodate users outside of Asia or anyone who prefers a more discreet and modern option, we designed a bracelet. This allows the device to be more inconspicuous and seamlessly integrated into daily wear, making it both practical and stylish. The bracelet caters to those who may prefer a more subtle solution.</p>
<p>By offering two distinct designs, we ensure that our hardware is not only functional but also resonates with the cultural and aesthetic preferences of our global audience.</p>
<div class="image-container" style="display: flex; justify-content: center; gap: 10px;">
<img src="https://static.igem.wiki/teams/5187/wiki-hardware-fig/fig1.png" alt="ibd_figure" class="shadowed-image" style="width:30%; max-width: 250px;">
<img src="https://static.igem.wiki/teams/5187/wiki-hardware-fig/fig7.png" alt="ibd_figure" class="shadowed-image" style="width:30%; max-width: 250px;">
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h3>Educational Content</h3>
<p>In order to reach a wider audience and promote inclusivity, all our content is produced in both English and Chinese. We make our materials accessible globally by posting on international platforms like YouTube, Instagram, and TikTok, while also ensuring we connect with our Chinese audience through popular local platforms such as Bilibili and others. This dual-platform approach allows us to bridge cultural and linguistic gaps.</p>
<div class="image-container" style="display: flex; justify-content: center; gap: 10px;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic13.png" alt="ibd_figure" class="shadowed-image" style="width: 60%; max-width: 600px;">
</div>
<div class="image-container" style="display: flex; justify-content: center; gap: 10px;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic14.png" alt="ibd_figure" class="shadowed-image" style="max-width: 350px;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic15.png" alt="ibd_figure" class="shadowed-image" style="width: 40%; max-width: 300px;">
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h3>International interviews</h3>
<p>We conducted interviews with individuals from diverse regions to gain insights into how the illness manifests across different populations. Among our interviewees were Ms. Zheng and Mr. Zao from Asia, as well as Mrs. Sara Levitt an IBD advocate from Canada. These conversations helped us understand the unique experiences and challenges faced by people in different geographical areas. Additionally, we shared our survey on international platforms, allowing participants from around the globe to contribute their responses, providing us with a broader perspective on the global impact of the illness.</p>
<div class="image-container" style="display: flex; justify-content: center; gap: 10px;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic10.png" alt="ibd_figure" class="shadowed-image" style="width: 40%; max-width: 250px;">
<img src="https://static.igem.wiki/teams/5187/wiki-inclusivity-fig/pic11.png" alt="ibd_figure" class="shadowed-image" style="width: 40%; max-width: 250px;">
</div>
<p style="text-align: center; font-size: 0.9em; margin-top: 10px;">Mr. Zao and Ms. Sara Levitt @saralevs</p>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12">
<h2 id="References">
<h2>References</h2>
<hr>
<p>[1] Cell Press. (2014, October 2). How Curiosity Changes the Brain to Enhance Learning. ScienceDaily.</p>
<p>[2] World Bank. (2018, September 19). Poverty and shared prosperity 2018: Piecing together the poverty puzzle.</p>
</div>
</div>
</body>
</html>
{% endblock %}