Cereza

Lighthouse Optimization & Accessibility Leadership

Inherited a platform with failing Lighthouse audits across all metrics (Performance: 40, SEO: 50, Accessibility: 65-70, Best Practices: 50-70). Systematically analyzed every screen using both Navigation and Snapshot modes to capture interactive components requiring user input, documenting issues in Google Sheets similar to my PassPerfect methodology.

Achieved perfect 100/100 scores in SEO, Accessibility, and Best Practices, while improving Performance from 41 to 80 (remaining limitations were DevOps-related deployment optimizations). Key improvements included fixing HTML semantics, adding ARIA labels to icon buttons, optimizing image aspect ratios and alt text, improving color contrast ratios, and implementing accessible loading states throughout the application.

Developed a custom color contrast utility algorithm to dynamically determine whether chip text should be black or white based on the background color, ensuring WCAG compliance across the branch/filial identification system where each location had custom brand colors.

Complex Feature Development

Real-time Employee Tracking: Implemented a live map showing employee avatars with WebSocket connections, displaying real-time check-ins and geolocation relative to physical time clocks. The system validates whether employees are within acceptable range of their assigned location, providing instant visibility for HR managers.

Branch/Filial Management System: Built complete branch configuration allowing companies to define multiple locations, assign employees to branches, and visualize affiliations through color-coded chips in employee DataGrids. Each branch had custom colors, requiring the contrast utility to maintain accessibility.

Advanced Reporting & Export: Developed comprehensive reporting modules for attendance, permissions, and vacations with PDF and Excel export capabilities. Created an employee profile PDF export that aggregates data from multiple endpoints to generate CV-style documents including credentials with QR codes, company/branch information, and complete employee history.

Request Management: Implemented permission and vacation request workflows with real-time socket notifications. Admins and managers receive instant notifications of pending requests, while employees receive status updates on their submissions, creating a responsive approval pipeline.

Help Desk Ticket System: Developed integrated help desk module connecting to n8n workflow automation platform. Built complete ticket management with Material UI DataGrid featuring advanced filtering, individual ticket detail views with chat-style interaction history, and token-based authentication for secure ticket access. Users can create new tickets, track existing ones, and view full conversation threads for each support request, providing comprehensive support infrastructure.

Internationalization & UX Improvements

Implemented 4-language support (Spanish default, English, French, Portuguese) across all components to support the company's expansion strategy into Latin American and international markets. The pricing model of $5 USD per employee required multi-language capability to scale across diverse markets.

Enhanced user experience by redesigning the Organization/Employee mode switcher. Originally, the header showed the opposite mode as button text (showing "Employee" when in Organization mode), causing confusion. I convinced stakeholders to redesign it as a mode indicator with a dropdown, clearly showing the current mode with the alternative as a menu option—significantly improving usability.

Migrated numerous Basic Tables to Material UI DataGrids with advanced filtering capabilities, dramatically improving data management UX. Added loading states throughout the application where they were missing, providing better feedback during asynchronous operations.

Performance & Technical Problem Solving

Identified and resolved a critical performance bug where a component was making 10 redundant API calls to the same endpoint, optimizing it down to 2 calls and significantly reducing server load and improving response times. This demonstrated proactive performance monitoring and optimization beyond assigned tasks.

Worked with Material UI's built-in responsive design and dark mode capabilities, ensuring consistent experience across devices without dedicated design resources. All components were built directly with Material UI since the project had no designer or Figma files, requiring strong product thinking and UX intuition.

Results & Business Impact

• Platform deployed to production serving 750+ employees across 5 beta companies
• Lighthouse scores: SEO 100/100, Accessibility 100/100, Best Practices 100/100, Performance 80/100
• 80% of screens achieved perfect 100 accessibility score
• Reduced critical component API calls from 10 to 2 (80% reduction)
• 4-language support enabling international expansion (Mexico and Latin America)
• Real-time tracking and notification systems providing instant HR visibility
• Integrated Help Desk module with n8n automation providing structured support system
• Comprehensive export capabilities (PDF/Excel) for compliance and reporting
• Platform positioned for $5/employee/month pricing model at scale