NeuroCampus – Learning Support for Neurodiverse Students

UI/UX Design Submission Document

1. Overview

NeuroCampus is an accessible, thoughtfully designed web application created to support neurodiverse students in higher education. The platform focuses on improving academic organization, emotional awareness, and daily task management through an inclusive and calming user experience. The UI/UX design emphasizes accessibility, emotional safety, and clarity, ensuring that students with diverse cognitive and sensory needs can interact with the system comfortably and confidently.

2. Problem Statement

Many educational platforms fail to accommodate neurodiverse learners due to overwhelming interfaces, excessive visual stimulation, inaccessible navigation, and a lack of customization. These barriers can increase anxiety, reduce engagement, and negatively impact learning outcomes. NeuroCampus addresses these challenges by providing an accessibility-first interface that adapts to individual needs, reduces cognitive load, and supports emotional well-being alongside academic tasks.

3. UI/UX Objectives

The primary objective of NeuroCampus is to create a supportive and inclusive digital environment that prioritizes user comfort, accessibility, and ease of use. The interface is designed to minimize distractions, support emotional regulation, and provide clear feedback. Special emphasis is placed on customization, allowing users to control visual intensity, motion, typography, and contrast based on their personal needs.

4. Design Philosophy

NeuroCampus follows an accessibility-first and calm-design philosophy. Every UI decision is guided by WCAG accessibility standards and neurodiversity-aware design principles. The visual language avoids harsh contrasts and excessive motion, instead using soft colors, gentle animations, and predictable interaction patterns. The goal is to create a safe, reassuring digital space that promotes focus rather than overstimulation.

5. Visual Design System

The visual design system is built around warm, soothing colors that reduce visual stress and promote emotional comfort. Sage green serves as the primary color to evoke calmness and balance, while soft lavender and muted warm tones provide gentle contrast for backgrounds and secondary elements. Emotion-based color coding is used throughout the application to support intuitive understanding without relying solely on text.

Typography is a core accessibility feature within NeuroCampus. The Lexend font is used as the primary typeface due to its dyslexia-friendly letterforms, with system fonts serving as fallbacks. Font sizes are fully adjustable, ranging from smaller sizes for compact layouts to larger sizes for improved readability. Line height, font weight, and spacing are optimized to reduce eye strain and improve comprehension.

6. Layout and Responsive Design

NeuroCampus follows a mobile-first layout strategy, ensuring full usability on smartphones and tablets. The interface adapts seamlessly to larger screens while maintaining comfortable reading widths and spacing. Maximum width constraints prevent content from becoming visually overwhelming, and consistent padding ensures predictable structure. Touch-friendly elements and bottom navigation enhance usability for mobile users.

7. Emotion Tracking Experience

The emotion tracking feature allows students to check in with their mental and emotional state in a non-intrusive and supportive manner. Users select from a range of emotional states represented by clear icons and calming colors. Optional notes allow students to provide context without pressure. The interaction is designed to be gentle, with smooth transitions and reduced motion support, ensuring comfort for users sensitive to animation.

8. Task Management and Cognitive Support

The task management system is designed specifically for neurodiverse learners who benefit from breaking complex tasks into smaller, manageable steps. Tasks are visually categorized using priority-based color indicators, while progress bars provide immediate feedback on completion status. Expandable subtasks and time estimates help users plan realistically without feeling overwhelmed. All interactions support keyboard navigation and screen readers to ensure full accessibility.

9. Time Block Scheduling

The scheduling interface presents daily activities using clearly defined time blocks. Different activity types such as classes, study sessions, and breaks are visually distinguished through color and iconography. Active time blocks are highlighted to provide real-time context, while location indicators and time ranges ensure clarity. The layout prioritizes visual hierarchy and consistency to reduce cognitive effort when reviewing schedules.

10. Accessibility Customization Panel

The accessibility panel is a central feature of NeuroCampus and allows users to tailor the interface to their specific needs. Users can adjust font size, enable high-contrast mode, toggle reduced motion, switch between light and dark themes, and activate a dyslexia-friendly font. These preferences are designed to persist across sessions, empowering users to create a comfortable and personalized learning environment.

11. Navigation Experience

Navigation within NeuroCampus is designed to be simple, predictable, and always accessible. A fixed bottom navigation bar on mobile devices ensures that key sections are reachable at all times. Active states are clearly indicated through visual cues, while icons paired with text labels improve comprehension. Transitions are subtle and consistent, supporting orientation without distraction.

12. Quick Actions and Peer Support

Quick action components provide fast access to commonly used features, reducing the number of steps required to perform routine tasks. These actions are presented in a horizontally scrollable layout optimized for touch interaction. The peer support interface encourages community engagement through clear calls to action and supportive language. Visual hierarchy and button styling guide users toward meaningful interactions while maintaining emotional sensitivity.

13. Motion and Interaction Design

Motion within NeuroCampus is used with restraint and intention. Animations support orientation, feedback, and state changes rather than decoration. Fade-in, slide-in, and scale animations are gentle and short in duration. The application fully respects system-level reduced motion preferences, disabling or minimizing animations for users with motion sensitivity.

14. Accessibility and Usability Considerations

Accessibility is embedded throughout the application. Semantic HTML elements, proper ARIA attributes, and descriptive labels ensure compatibility with assistive technologies. Keyboard navigation is fully supported, with visible focus indicators and logical tab order. Decorative elements are hidden from screen readers to reduce noise, while dynamic content updates are announced appropriately.

15. Component Architecture

The interface is built using reusable and composable components based on shadcn/ui and Radix UI primitives. This approach ensures consistent behavior, accessibility, and styling across the application. Custom variants extend the base components while maintaining a unified design language. TypeScript enhances reliability and supports long-term scalability and maintainability.

16. Technical Implementation Overview

NeuroCampus is built using modern frontend technologies including React 18, TypeScript, Vite, Tailwind CSS, and React Router. State management is handled through React hooks and TanStack Query, while form handling and validation are implemented using React Hook Form and Zod. The styling system relies on design tokens and CSS variables to support dynamic theming and accessibility customization.

17. Conclusion

NeuroCampus demonstrates how thoughtful UI/UX design can create meaningful support for neurodiverse learners. By prioritizing accessibility, emotional comfort, and clarity, the platform reduces cognitive barriers and empowers students to manage their academic and emotional well-being more effectively. The design successfully balances modern aesthetics with inclusive functionality, resulting in a calm, adaptable, and supportive user experience.

Link : https://neurospark-campus.netlify.app/

GitHub : https://github.com/brahmaputraS/ui-ux-project.git

Download