Cognitopia
Front-End Development & Consulting
Cognitopia
Front-End Development & Consulting
Summary
Overview
Cognitopia is an assistive technology company focused on creating accessible digital learning tools. Their existing WordPress site had become outdated and increasingly unstable, experiencing repeated crashes and data integrity issues that required frequent restores from backup. To address these risks and support long-term scalability, the team transitioned the site to Drupal.
Over the course of a multi-phase collaboration, I supported Cognitopia through accessibility and UX consulting, followed by leading all front-end development for the Drupal rebuild—recreating the existing WordPress experience inside a more secure and scalable CMS without disrupting the user experience.
My Contributions
I led all front-end development for Cognitopia’s Drupal website rebuild, translating the existing WordPress site into accessible, responsive, and reusable front-end components. I worked collaboratively with two senior full-stack developers who were responsible for backend architecture and environment setup, aligning my front-end implementation closely with Drupal’s content structure and engineering constraints.
Throughout the project, I acted as a bridge between design intent and technical execution—ensuring visual consistency, accessibility standards, and editor-friendly components while integrating seamlessly into a larger engineering workflow.
Services
- Front-End Development
- Drupal Theming & Components
- Accessibility Implementation
- CMS Migration Support
- Responsive UI Development
My Role
Front-End Developer & Consultant
Phase 1
Phase 2
Strategy & Approach
Design & Development
Technical Scope
Project Takeaways
Phase 1 - Accessibility & UX Consulting
Phase 1 began as a formal accessibility audit of Cognitopia’s existing WordPress site, conducted using WCAG 2.2 Level AA as the evaluation standard. The goal was to identify accessibility barriers impacting assistive technology users and to address high-impact issues within the existing platform before determining the feasibility of longer-term improvements.
Key Focus Areas
Accessibility Barriers Identified
Evaluated keyboard navigation, focus behavior, screen reader usability, and non-text alternatives across core public pages.
Semantic & Structural Issues
Reviewed heading hierarchy, excessive DOM nesting, and markup patterns impacting assistive technology users.
Visual Contrast & Readability
Identified contrast and text sizing issues affecting readability and WCAG 2.2 AA compliance.
Platform Constraints
Documented CMS limitations that made consistent accessibility and long-term stability difficult to maintain.
Implementation & Findings
Following the audit, I implemented a series of accessibility improvements directly within the existing WordPress site, addressing priority issues related to contrast, text sizing, alt-text, and focus behavior. While applying these changes, deeper structural problems became apparent—including inconsistent markup patterns, excessive DOM nesting, and navigation behaviors that were difficult to remediate without broader architectural changes.
These findings aligned with issues the Cognitopia team had already been experiencing, including site instability and frequent restores from backup due to crashes and data integrity concerns.
Outcome
This phase established that incremental fixes alone would not sufficiently resolve the site’s accessibility, stability, or long-term maintainability challenges, leading to a decision to pursue a full rebuild on Drupal—where these issues could be addressed at the system level.
Phase 2 - Drupal Front-End Rebuild
With the limitations of the existing WordPress site clearly defined, the project shifted into a full front-end rebuild on Drupal. This phase focused on recreating the existing user experience within a more stable, accessible, and scalable CMS—while collaborating closely with senior engineers responsible for backend architecture and platform infrastructure.
Impact
This phase focused on delivering a stable, maintainable front-end foundation that reduced operational risk while preserving the existing user experience. The outcomes below reflect the broader business and technical impact of the Drupal rebuild rather than individual implementation details.
Reduced Risk
The new Drupal front-end provided a more stable foundation for Cognitopia’s website, eliminating the need for frequent recovery and reducing the risk associated with ongoing content and platform updates.
Seemless Transition
The rebuild preserved familiar layouts and interaction patterns, allowing users to move to the new platform without a noticeable change in experience while improvements were made behind the scenes.
Accessibility Built In
Accessibility considerations were integrated directly into the rebuilt front-end, creating a stronger baseline for future compliance and reducing long-term accessibility debt.
Scalable Architecture
A component-based front-end structure made it easier to manage content consistently and support future growth without introducing instability or design fragmentation.
Confident Iteration
With a more reliable CMS and front-end architecture in place, the Cognitopia team gained confidence in making changes, expanding content, and evolving the site without fear of breaking core functionality.
"Drew helped us with trade show design, motion graphics, and a full accessibility audit and implementation for our website. He’s been timely, professional, and highly responsive to feedback—exactly the kind of creative, self-driven partner a small team like ours needs. Plus, he’s a pleasure to work with.”
Strategy & Approach
The approach centered on making system-level decisions rather than pursuing incremental fixes. Rebuilding the front end within Drupal allowed structural and accessibility considerations to be addressed more holistically, while preserving existing layouts and interaction patterns to avoid disrupting the user experience.
Front-end implementation was guided by a component-based mindset aligned with Drupal’s content structure, prioritizing consistency and long-term maintainability. Throughout the rebuild, close collaboration with senior backend engineers ensured front-end decisions integrated cleanly with platform architecture and supported broader technical goals.
Design & Development Execution
Front-End Framework & Layout System
The front-end layout system was defined directly in code to establish consistent alignment, spacing, and content hierarchy across sections. The layout system was implemented using semantic HTML and custom CSS, supported by Bootstrap utilities, allowing individual content items to vary without requiring layout-specific overrides.
This approach ensured that layout behavior remained predictable and centralized, making sections easier to maintain and reuse across the site without introducing page-specific styling or dependencies.
Component-Based Implementation
Page layouts were constructed using reusable front-end components designed to support different content types while maintaining consistent structure and hierarchy. Components were implemented to accommodate varied content needs—such as product features, pricing information, and calls to action—without requiring custom layouts for each page.
This approach allowed shared components to be reused and adapted across the site while preserving visual consistency and reducing duplication.
Responsive Behavior
Layouts were tested and refined across common screen sizes to ensure content hierarchy, spacing, and interactions remained clear from mobile through desktop. Responsive adjustments focused on preserving readability and usability rather than introducing device-specific layouts.
This ensured a consistent experience across devices without relying on separate templates or one-off layout exceptions.
Accessbility in Execution
Accessibility considerations were applied directly during front-end implementation through semantic HTML, consistent heading structure, accessible focus states, and meaningful alternative text. Addressing accessibility at the component level ensured improvements were applied consistently across templates rather than handled as page-by-page fixes.
This integrated accessibility into the build process itself rather than treating it as a separate remediation step.
Technical Scope & Ownership
I owned front-end development for Cognitopia’s Drupal rebuild, translating the existing site experience into production-ready templates while shaping the visual flow and structural hierarchy of the user-facing experience. In addition to implementing layouts and components in code, I made aesthetic and structural decisions to improve clarity, usability, and understanding of Cognitopia’s offerings where the existing site patterns fell short.
This work was completed as part of a collaborative engineering effort, with senior full-stack developers responsible for backend architecture and CMS configuration. I worked closely with the team to advise on content structure, request additional copy where needed, and create supporting forms when existing content did not fully communicate key information. This collaboration allowed front-end decisions to integrate cleanly with Drupal’s systems while supporting a clearer, more cohesive user experience.
Project Takeways
This project reinforced the importance of front-end development as a bridge between user experience, content clarity, and platform stability. Working within an existing product while rebuilding it on a new CMS required balancing restraint with improvement—preserving what users recognized while making necessary structural and accessibility-driven changes behind the scenes.
Collaborating closely with senior engineers also highlighted the value of clear ownership and cross-disciplinary trust. Having autonomy over front-end structure and flow while aligning with backend architecture underscored how effective collaboration enables better outcomes than isolated decision-making, particularly in production environments with real users and long-term maintenance considerations.