Shopify
Roles:
Technologies:
Description: I worked on the Core, Storefront/Themes team. I worked on the theme editor, code editor, and theme index.
The Theme.index in admin where merchants can view and manage their themes.
Theme Index
I worked on the Theme Index redesign as the current view was lacking any guidance and was one of the main entry points for new merhcants. The goal was to increase conversion rates of merchants who open their store to making their first sale. We successfully added new components and features to the Theme Index and increased the conversion rate, measured by instrumentation I worked on.Theme Editor
On the Theme Editor, I coauthored a prototype and eventual new feature, Custom CSS. I presented the prototype to SLT and got a go for the build phase. This feature allows merchants to add Custom CSS to their store without touching the code editor. It was built using React and Redux with complex state management which invovled rendering an embedded app within the editor. The CSS is parsed and validated for security purposes on the frontend and backend to prevent malicious injections into our backend.Code Editor
On the Code Editor, I worked file tabs and keeping them persistant with localStorage. I also worked on further instrumentation for to track which kind of files people were using the search bar for. I had begun work on the Shopify CLI integration for the Code Editor via LSP but left before it was completed.Quick Points
Co-authored a new feature into Shopify’s core Theme Editor allowing merchants to add custom CSS to suit their stores’ vision without touching the code editor, using React in congruence with enterprise-level Redux-state to render embedded editor apps
Wrote warning and error diagnostics Typescript functions that parse Merchant’s custom CSS input and convert it into UI feedback informing merchants if they’re writing invalid CSS incompatible with our scope and preventing malicious injections into our backend.
Spearheaded the redesign work our Shopify’s Theme Admin page, creating custom React components in tangent with Shopify’s Polaris component library to improve Merchant clarity on their Theme library’s pending update and their store’s status.
Wrote frontend instrumentation events for data tracking of Merchant’s workflow on the Theme Index page, A/B testing newly redesigned UX with proprietary software and Kafka topics to infer if users clicked or where there was the most friction in updating
Developed a comprehensive technical document outlining the rationale behind instrumentation features and functionality implemented in our open-source components library, which continues to serve as a reference for the current ownership team
Worked on a new feature prototype for Shopify’s Theme Editor, collaborating with the UX team and building through multiple iterations of content, views, and functionality which I presented to the senior leadership team to get a go for the build phase.