A comprehensive system designed to automate the processing of CFE (Comisión Federal de Electricidad) utility bills. The application features both desktop and mobile interfaces, allowing users to upload, process, and verify utility bill information through various methods including direct API integration and manual uploads with OCR processing. The system includes contextual help, glossary references, and multiple operational modes to accommodate different user workflows.
My approach followed an iterative delivery model that evolved into a stand-alone UI while ensuring a seamless user experience. Instead of waiting for a full overhaul, I focused on continuous enhancements that improved usability over time. By incorporating responsive design, the system adapted across desktop and mobile devices, allowing users to navigate workflows effortlessly. A dual-interface system ensured both experienced and new users could choose between power mode for flexibility and guided mode for structured step-by-step assistance.
The UI integrated status indicators and contextual help to guide users through the bill processing journey, ensuring clarity at every step. Automating data extraction and verification through OCR services and backend integrations streamlined the workflow, reducing errors and manual effort. Over time, the system transitioned from its checklist-based integration to a fully independent UI with intuitive navigation, live support access, and a cleaner, distraction-free experience. This progressive approach minimized risk, allowed adaptability based on user feedback, and built stakeholder confidence while continuously refining the experience.
A comprehensive UX flow design for an asynchronous wizard interface that guides users through the solar installation process. The wizard breaks down a complex process into manageable steps, allowing users to complete each stage at their own pace. The design includes various stages such as welcome screens, CFE bill upload, proposal review, identity verification, credit checks, property documentation, technical visits, project design, payment setup, customer approval, and tax situation verification.
Created an intuitive step-by-step wizard interface that simplifies the complex solar installation process. Designed a user-friendly flow that allows customers to complete steps asynchronously, improving conversion rates and reducing drop-offs. Focused on clear visual cues, progress indicators, and contextual help to guide users through each stage of the process. Collaborated with stakeholders to ensure the design met both user needs and business requirements.
A comprehensive dashboard designed for Biocom members to track and visualize their membership benefits. The platform provides detailed insights into purchasing savings, event attendance, committee memberships, and additional benefits, allowing members to maximize the value of their membership.
Developed an intuitive, data-driven dashboard as a proof-of-concept prototype for Phase 1 of a multi-phased project. The existing system was tightly coupled within a WordPress site, relying on outdated Salesforce APIs that passed data through a PHP-based middleware layer before being processed by an aging jQuery front end. My role was to refactor and redesign the front end to create a modern, polished, and scalable interface while improving maintainability.
To meet tight timelines and business goals, I hired a backend engineer to refactor the Salesforce APIs and made the strategic decision to bypass the PHP layer entirely, integrating directly with Salesforce APIs to fetch data. In the process, I applied separation of concerns, modular patterns, and a rudimentary MVC approach to streamline development and deliver a functional prototype.
The redesigned dashboard featured interactive visualizations for purchasing savings and event attendance metrics, user-friendly filtering and sorting, and a responsive design that worked seamlessly across devices, particularly optimizing data export and printing functionality. Originally planned as an interim solution before transitioning to a standalone React app, the prototype was so well received by leadership and end users that Biocom leadership opted to continue using this version as the final product.
A comprehensive redesign and architectural overhaul of Biocom's corporate website, implementing a headless WordPress instance with a React/Next.js front end. This project consolidated multiple company websites and properties under the primary domain, concentrating web traffic and streamlining content management while providing an enhanced user experience.
Developed and executed a strategy to unify Biocom's scattered web presence under a single, scalable architecture, ensuring that all sub-sites could be dynamically managed within a centralized CMS. Designed and implemented a headless WordPress instance with a React/Next.js front end, allowing new microsites to be effortlessly spun up or retired while maintaining a cohesive brand and user experience.
Led Architecture, Design, and Engineering, while also shaping Information Architecture, playing a key role in structuring the site map and navigation to optimize discoverability, usability, and marketing impact. Engineered a modular content system that streamlined governance, improved SEO, and concentrated web traffic under the primary domain—reinforcing Biocom's digital presence.
Additionally, architected and implemented a location-based content system that tailored site content based on the user's detected location (with permission). This ensured visitors received region-specific information relevant to their nearest Biocom satellite location, enhancing engagement and making the site more actionable for members and prospects.
Further expanded functionality by developing a full-stack event management platform with custom plugins for event registration and membership management, integrating Salesforce and Stripe POS systems. Designed a custom dashboard for Sales and Membership teams, surfacing data visualizations and KPIs to measure engagement, ROI, and retention—empowering strategic membership growth efforts.
Modalis is a powerful media asset management and distribution platform tailored for media companies to efficiently organize, tag, and deliver digital content. It offers robust metadata management, workflow automation, and seamless multi-platform distribution.
Spearheaded the development of a highly interactive and scalable UI in Angular, ensuring fluid navigation and efficient media handling. Crafted an intuitive user experience that streamlined metadata tagging, bulk asset operations, and workflow automation. Focused on performance optimizations, ensuring smooth handling of large media libraries. Led the UX strategy, refining interactions, accessibility, and visual consistency for an enhanced user experience.
A sophisticated web-based platform that automates video transcription and caption editing. Videos are first processed through a proprietary cloud-based transcoding service, then transcribed using Azure Speech-to-Text. The transcriptions are stored in Firebase, where an AI-powered analysis tool detects potential errors, highlights them, and suggests corrections, allowing users to refine captions with a single click.
Engineered a timeline-based transcript editor in Angular, enabling seamless AI-assisted transcription review and real-time editing. Integrated Azure transcription services with Firebase to provide users with an efficient, AI-enhanced workflow. Designed a clean, intuitive UI that prioritized accessibility and streamlined error correction. Led user research and iterative UX improvements, refining the interaction design to make transcript editing faster and more user-friendly.
An innovative learning tool that allows educators to embed interactive quizzes directly into video content. Questions can be placed at precise timestamps, tracking student engagement and generating insightful performance analytics. The system is powered by Azure for backend processing and storage, ensuring scalability and reliability.
Led the development of a dynamic, engaging quiz-building interface in Angular, making it effortless for instructors to create and embed interactive assessments. Built an instructor-focused analytics dashboard, providing rich insights into student performance. Focused on UX refinement, designing an intuitive workflow that simplified quiz configuration and improved student engagement. Ensured a smooth integration with Azure services, optimizing data flow and real-time response tracking.
