Growth & Marketplace - UI engineering at product scale
From October 2021 to February 2024, I worked as a Senior UI Engineer on picsart.com - first with the Growth team, then with Marketplace.
The work: integrating the Picsart Design System, building the components it didn’t cover, adding right-to-left language support from scratch, and a large part of the accessibility work in my scope.
picsart.com is a large product surface, shipped by many teams at once. My job was to keep the UI in my team’s scope consistent, accessible and ready for every language.
Picsart’s website serves many products and page types:
Many teams ship to picsart.com at once. Each team has one person responsible for Design System integration - in my team’s scope, that was me.
I was the team’s primary UI developer, focused on the Picsart website:
A separate Growth product where people create visual and social content and adapt it to the formats each platform needs - text, imagery, titles and emoji in one editor.
As the Growth team’s primary UI developer, I implemented its interface in React, HTML/CSS, JSS and Styled Components.
I was the main UI and Design System integration owner for picsart.com and selected product branches in my team:
The shared components came from the Design System team.
When a need wasn’t covered, I built the missing components for our product branch, matched to the system so the product still felt like one.
I implemented multilingual support, including RTL/LTR, from scratch for my scope.
Instead of fixing left and right values page by page, I reworked layout direction around logical properties - inline and block, start and end - so a change of direction carries through the structure.
Accessibility was only minimally in place when I started. I handled a large part of the WCAG implementation work in my scope, building it into components rather than adding it afterwards.
Every component checked across breakpoints and browsers, so pages behaved the same for every visitor.
On the Growth team, I optimized the Discovery pages and their codebase.
Pages were measured before and after; the figures aren’t published here.
How the shared Design System was carried into the pages in my scope.
Use Design System components wherever they fit; build new ones only for real gaps.
New components follow the shared tokens, spacing and states.
Logical properties instead of left and right, so RTL works structurally.
Accessibility considered in every component, not added later.
Every component checked across breakpoints and browsers.
Five parts of the work, and how each was approached.
Switching a page between left-to-right and right-to-left usually means hunting down every left and right value.
I rebuilt the layout direction around logical properties:
A direction change now carries through the structure instead of being patched page by page.
Shared components from the Design System team, integrated across:
Placement followed product direction; consistency across branches was my responsibility in my team’s scope.
Some Marketplace needs weren’t in the shared system. For those, I built team-specific components that:
From a minimal starting point, accessibility became part of the components in my scope rather than a late fix. I handled a large part of that WCAG implementation work myself.
A separate Growth product for creating visual and social content and adapting it to each platform’s formats. As the team’s primary UI developer, I implemented its interface in React, HTML/CSS, JSS and Styled Components.
Tell me what you’re building. I reply within 2 business days.
A new website, a product interface, a design system, or improving what’s already live.
Previous and next projects.
Рус
Հայ
