Amazon Sagemaker Unified Studio - Query Editor
Situation
I was a Design Technologist on the Redshift Console engineering team when a newly formed organization began building what would become SageMaker Unified Studio (SMUS)—a unified platform for data analytics and machine learning. The platform consisted of multiple micro-front-end applications, each focused on different aspects of analytics, and the team needed a robust query editor.
Redshift Query Editor v2 (QEv2) was selected as the foundation. As a result, I joined the Zero-to-One team responsible for delivering the first iteration of the SageMaker Query Editor. It was April 2024, and senior leadership set an ambitious goal: launch at re:Invent in November.
Task
As one of the most senior front-end engineers on the team—and one familiar with QEv2’s architecture—I was tasked with determining how to extract and repurpose its core functionality for SMUS.
The challenge was to evolve QEv2 into a shared foundation that could power both products, while enabling distinct user experiences through theming and architectural flexibility.
Action
I partnered closely with the Principal Front-End Engineer to define the problem space and collaborated with another senior engineer to execute the vision. While others focused on backend and infrastructure design, I led the front-end theming and component architecture strategy and authored the design document that drove this effort forward.
Architectural Strategy
One of the primary challenges was ensuring QEv2 could continue to operate independently while also serving as a shared codebase for SMUS. I proposed and designed a theming architecture that:
- Extracted common editor components into a shared foundation
- Introduced a styling abstraction layer to support multiple UI systems
- Enabled visual differentiation through theming rather than duplication
QEv2 was built using Blueprint, while SMUS was aligned to a Material UI–based design system. To bridge this gap, I:
- Refactored existing styling to introduce wrapper definitions around atomic components
- Designed an override system that mapped Blueprint components to Material-inspired patterns
- Created an abstraction layer that would allow Blueprint components to be swapped out entirely in the future
This approach minimized short-term rework while enabling long-term migration to the official SMUS design system.
Design System Integration
Because the SMUS design system was still evolving, I worked closely with the product designer to minimize churn and ensure alignment. I leveraged Figma design tokens directly in the implementation so our components shared the same source of truth as the broader system. This ensured visual consistency across the product family and reduced future integration effort.
Delivery & Leadership
Within weeks, I built a working proof-of-concept and then helped lead the broader implementation. I:
- Built key front-end features, including the markdown editor and charting module
- Owned the majority of the UI styling and component polish
- Unblocked engineers by clarifying styling architecture and implementation patterns
- Maintained high UI quality standards across the team
Result
We successfully delivered the first iteration of the SageMaker Query Editor in time for re:Invent 2024.
My work enabled:
- A shared architecture that reduced duplication and supported two products
- A scalable theming strategy aligned to the future SMUS design system
- A high-quality, pixel-precise UI ready for executive visibility
The product debuted at re:Invent with strong polish and visual cohesion. This work was showcased by the AWS CEO during a 2024 re:Invent keynote.
Beyond the launch, the theming and abstraction strategy I introduced positioned the team for future migration away from Blueprint and toward a fully unified design system—creating lasting technical and design leverage.
