A comprehensive redesign of the Interactive Knowledge website, transforming it from a decoupled React-Drupal architecture to a unified, Drupal-only solution. This update enhances site performance, streamlines content management, and showcases the agency’s innovative projects with a focus on accessibility and user engagement. I contributed to this project as part of a collaborative engineering team.
Client Background:
Interactive Knowledge is a leading digital agency focused on creating interactive, educational experiences for cultural institutions, museums, and libraries. The agency’s website serves as a showcase of its unique projects, emphasizing the agency’s capabilities in delivering high-quality, interactive digital solutions.
Project Goals:
1. Transition the website from a decoupled architecture (React frontend with Drupal backend) to a full-Drupal solution, improving efficiency and simplifying content management.
2. Redesign the website’s layout and user experience to better highlight Interactive Knowledge’s portfolio and services in a cohesive, visually appealing way.
3. Ensure sitewide WCAG 2.1 accessibility compliance to make the website inclusive for all users, particularly those with disabilities.
4. Optimize performance to ensure fast load times and a seamless browsing experience across all devices, enhancing the site’s user engagement.
Challenges and Solutions:
1. Transition from Decoupled to Full-Drupal Architecture:
• Challenge: Shifting from a React-Drupal decoupled setup to a unified Drupal environment required careful planning to retain flexibility in design and functionality.
• Solution: Migrated the frontend components to Drupal’s templating system, leveraging Twig for streamlined rendering. This consolidation simplified maintenance while retaining a dynamic user experience.
2. Design Consistency and Accessibility Standards:
• Challenge: Ensuring that the new Drupal-driven design maintained visual consistency and high accessibility standards was critical.
• Solution: Standardized design elements and implemented accessibility features, such as ARIA labels, contrast adjustments, and improved navigation flow, to meet WCAG 2.1 standards and provide a user-friendly experience across all devices.
3. Performance Optimization:
• Challenge: Optimizing load times and maintaining performance in the new Drupal-only architecture, especially given the increased backend reliance.
• Solution: Integrated caching and minimized asset loading, which, combined with Drupal’s native optimizations, provided efficient load times and smooth user interactions.
Deployment and Testing:
• Incremental Deployment: Rolled out the redesign in stages, monitoring each phase to ensure stable functionality and seamless user adaptation.
• Cross-Platform Testing: Thorough testing across devices and browsers was conducted to ensure the new Drupal setup maintained performance, accessibility, and visual consistency.
• Post-Launch Monitoring: Continued performance monitoring post-deployment helped maintain optimal site performance and quickly address any issues that arose.
Results:
• Improved Content Management Efficiency: Moving to a full-Drupal architecture simplified the content management process, making it easier for Interactive Knowledge’s team to manage and update content.
• Enhanced User Experience: The redesigned website effectively showcases Interactive Knowledge’s projects and services, providing a more cohesive and engaging user experience.
• Increased Accessibility Compliance: With WCAG 2.1 standards met, the site is now more inclusive, accessible to users with diverse needs and abilities.
Value Added:
• Efficient and Scalable Infrastructure: The shift to a full-Drupal solution ensures streamlined content management and a scalable foundation for future updates and expansions.
• Unified, User-Centric Design: The redesign emphasizes Interactive Knowledge’s dedication to accessible, engaging digital experiences, helping to attract new clients and project partners.
• Commitment to Inclusivity: By meeting accessibility standards, Interactive Knowledge has broadened its site’s reach and reinforced its commitment to creating digital spaces that are welcoming to all users.
Interested in working together? I'm always open to discussing new projects and opportunities.
An interactive AI voice kiosk designed for the EarlyWorks Children’s Museum to welcome families, guide visitors through exhibits, support accessibility needs, and provide a playful, museum-themed digital ambassador. Gear-y blends curiosity, safety-focused communication, and a kid-friendly personality to create a warm, educational first point of contact for guests.
A 12-foot interactive alien oracle, combining a large inflatable sculpture with a reflective, poetic AI voice kiosk experience designed for the LEAF Global Arts & Music Festival. Athena guides visitors through gentle conversation, encouraging mindfulness, curiosity, and wonder while maintaining safe, inclusive dialogue.
A playful, educational mascot project developed for the City of Cedar Park to promote community-wide water conservation. The initiative included designing a warm, engaging character personality, creating conversation-safe AI interactions, and deploying a public-facing interactive kiosk that helps residents learn water-saving habits through humor, clarity, and accessible guidance.
Have an AI project in mind or need a secure, reliable system built? Let's talk.