Course Project
NeuroLogic
A tool for users to understand neuroscience and the brain in a more interactive way - for those who are unfamiliar with how the brain works and how basic neuroscience principles are understood.
Role
Frontend Development
Timeline
2 months
Skills
CSS
HTML
Javascript
three.js
Tools
Figma
Github
VSCode
Defining Scope
Educational Neuroscience
NeuroLogic is an interactive website designed to help users gain a foundational understanding of neuroscience and brain function. Aimed at college students and curious adults, NeuroLogic serves as an accessible first resource for those unfamiliar with basic neuroscience principles. The site features a minimalistic, bold design that facilitates easy navigation and engagement.​
It is important for us to pose essential questions about the brain’s nature, our understanding of it, and the linkage between human behavior and brain activity. NeuroLogic offers further learning resources, including complex research papers, to encourage exploration.​
Prototyping
Early Wireframes
I first wanted to create a general layout of information for each page. I added a home page for basic navigation and posing broad questions. The goal of the brain areas page was to create an interactive tool to view the brain and localizations of different units. The simulation page will show how various stimuli can change brain activity, giving users the ability to toggle various factors. I also added resources to further the educational motivation of the site.
Prototyping
Usability Testing
​​
I conducted usability tests to address two main parts: functionality and design evaluation. Participants were guided through key tasks using a think-aloud protocol to observe their navigation and interaction with the website.
​
Identifying Main Page Functions ​
​
Exploring Brain Regions
​
​
Running Simulations
Users were asked to list and describe the functionalities available on the home page, providing insights into their initial perceptions and understanding.
Participants navigated to different brain regions, utilizing hover and click features to access detailed information, which helped assess the website's navigation ease and clarity.
Users attempted to initiate simulations on the simulation page to evaluate the intuitiveness and accessibility of this feature.
Feedback + Design Changes
​There was valuable feedback for enhancing user interaction, simplifying complex content, and improving accessibility. A key suggestion was to streamline interactions by developing the brain interface with D3.js, making sure that visuals and controls are intuitive and well-explained while minimizing unnecessary features. I go recommendations to use both color and size variations for highlighting important information, making the platform more inclusive for users with color vision deficiencies. The feedback emphasized using images of the brain to illustrate different slices and activity areas, which would help users understand the complex structure more intuitively.
Deployment
Implementation
I made several significant changes from the original mockup and concept to enhance the website’s appearance and functionality. Initially using a brighter white and blue theme, I discovered that incorporating black, white, grayscales, and pops of red created a more dramatic effect and clearer contrast, ensuring that text and buttons are distinguishable without relying solely on color variations.
I also increased the pages dynamic layout, balancing a minimalistic design with sufficient text to support the site’s purpose. To add visual interest, I implemented elements like typing effects for titles and parallax backgrounds. The resource page now features flipping cards and interactive elements, such as shifting gears, to engage and satisfy users. Throughout the implementation, I gradually introduced more interactions and adjusted the theme to convey a more 'serious' and bold ambiance.
One of the biggest challenges was integrating the external brain visual, managing the terminal, eliminating errors, and cleaning up outdated code, which required me to learn and understand different rendering processes. Additionally, generating the brain for the simulation page proved difficult, so I leveraged generative AI to create accurate visuals, overcoming the complexities of rendering them manually.
Deployment
Interaction
Brain Areas
Allows users to explore different regions of the brain and understand their functions. The 3D interactive model lets users rotate and zoom in/out to view from various angles. Red dots on specific brain areas can be clicked to display their functions in an adjacent text box.​
Simulation
Demonstrates how various factors like stimulants and sleep affect neuron activity. Separate simulation tabs for Sugar, Caffeine, and Sleep allow users to focus on specific factors. They can adjust variables like dopamine sensitivity, stimulant levels, environmental effects, and sensitivity history.
Resources
Provides additional materials and references for users interested in expanding their neuroscience knowledge with flippable cards, links, and journal papers.