AEM & eCommerce Evolution
Boosted online sales by 500% and reached 96% accessibility compliance, by leading AT&T México's digital transformation through AEM and a complete eCommerce redesign.
unify the digital presence of a multi-brand telecom giant, built from Nextel, Iusacell, and Unefon acquisitions, into a single, accessible, high-converting experience?
Every acquisition brought a different tech stack: PHP, AJAX, Flash, CQ5, Drupal. There was no unified design language, no accessibility roadmap, and no shared component library. Users encountered a different AT&T depending on which URL they landed on.
Accessibility was not on anyone's roadmap until regulatory pressure made it unavoidable. The gap between brand promise and digital reality was enormous, and it kept growing with every acquisition.
The production storefront and internal UI-toolkit documents are client-confidential. The interactive recreation further down shows the resulting interface without any client-identifying detail.
Led the migration from CQ5 to Adobe Experience Manager (AEM), including a full year of custom component development. It was a long bet, but it paid off in long-term governance and content velocity.
Designed the 2021 AEM design system, then led the migration from Magento 1 to Adobe Commerce. Introduced voice contracts for users with disabilities, one of the first telecom accessibility programs of its kind in México. The 2020 AT&T Accessibility Award followed.
40 Components, One System
The entire system was built for Adobe Experience Manager (AEM), based on CQ5 (Java) with a database structured around IDs. I had to study directly with Adobe to grasp the development concepts needed to design and deploy the system.
- Created approximately 40 different components for AEM production
- CID (Computer Interaction Design) thinking: technical constraints informed before design decisions
- Atomic Design approach: components built from smaller components, storing information at nodes
- Templates first, then components: mapping what to embed (sliders, rich text, galleries) before building
- Extensive documentation: PPTs and PDFs describing templates, components, character limits, and resize properties
- 2019: a failed deployment. Adobe Brazil and Guatemala teams assisted directly, and we managed a one-year rollback
- 2020–2021: the design system became the foundation for all components across the platform
One Designer Across Every Function
Led the design team within Corporate Marketing Operations, operating across multiple concurrent roles throughout the engagement: UX Specialist · UI Designer · Project Manager · Web Design Lead · Content Facilitator.
- Translated AT&T's brand promise, strategy, and design language into world-class digital designs
- Monitored and planned projects with Adobe Brazil teams and agencies
- Managed AEM DAM assets, Information Architecture, and content creation pipeline
- Delivered analytics insights via Adobe Analytics, Google Analytics, and Google Tag Manager
- Managed eCommerce in a separate Magento 2 domain
- Oversaw multiple subdomains and partner initiatives (Netflix, Spotify, Warner, Google)
- Collaborated with Facebook, YouTube, Google, and Twitter on digital strategies
- Maintained AT&T Mexico's national leadership in accessibility, recognized by IFETEL Mexico
- Implemented Agile processes for the web team; trained agencies on UX and accessibility principles
Three Challenges That Shaped the System
Building the first design system for AT&T Mexico required overcoming three foundational challenges that no playbook covered:
- Challenge 1: Finding anyone who had the Digital Guidelines. That meant navigating from Branding to Compliance, speaking with managers and directors across departments
- Challenge 2: Establishing communication with US development and design teams. All files were in Photoshop format, so I had to recreate everything in Sketch, then later migrate to Adobe XD
- Challenge 3: Creating and demonstrating the system as the only designer, frontend developer, and coordinator on the team
Evolution timeline: Initial Sketch system (2016) → Found Adobe XD files from US agency (late 2018) → Full migration to Adobe XD → Left/Right/Viewports approach (desktop top + mobile right) → Modularity allowed live site changes without downtime (2019–2020).
Seguimiento y Atención e-Commerce — 2017
Interactive recreation of the AT&T México internal eCommerce process flow, originally documented in 2017 as the Magento integration went live. Chat agents followed this decision tree to handle order tracking, delivery follow-up, and cancellations. Hover any node.
The implementation required a full year of custom component development. It was a bet on infrastructure over features. Stakeholders wanted faster visible output. Making the case for foundational investment, and holding the line on it, was the critical design leadership moment.
Five years across three role changes is unusual for a single engagement. Systems that outlast individual roles require documentation-first thinking from day one. The components I built in year one were still in production when I handed off the system in year five. That's only possible when the rationale is written down, not just lived.
How the Storefront and Kit Felt to Use
The production storefront and internal component library are client-confidential. Below is an interactive recreation built for this portfolio, using the same interaction patterns, but with a generic brand and fictional data.
Illustrative recreation: interface rebuilt from memory in plain HTML/CSS/JS. Product name, brand names, and data are fictional.