photo of me

Chrissy Gonzalez

Etsy Site Builder

The Marketing Site Builder project was a collaboration between the Design Systems team and Internal Platforms, with Design Systems in charge of defining marketing design patterns and Internal Platforms tasked with designing and building the actual tool. In research I uncovered unexpected stakeholders and translation workflows and helped narrow project scope, but the project was cancelled before I was able to start testing design solutions.

gif of shop and confetti gif of shop and confetti gif of shop and confetti
Three directions for page editing

Existing processes

I took this project over from another designer who had done the early research, so I was able to jump into how the tool might work. The designer on Design Systems had already created a workflow of their current landing page building process. Using that diagram, I mapped out how the new tool might improve their workflow in the future.

how marketing pages get built how marketing pages will be built in the future
Process for building marketing pages, before and after

Ownership and localization

There were a few important technical decisions early in the site builder project, mostly about integrating with Etsy’s automatic translation system, so had to investigate our translation processes. There were also some questions about who would be the main users of the tool. I made some lightweight design provocations to facilitate discussions.

design provocation design provocation design provocation design provocation Localization UI sketch flow of content through automatic translation system Flow of content without automatic translation system

Design provocations and localization and translation diagrams

Low-fidelity wireframes

The first set of wireframes I designed were mainly meant to get reactions from my team and the Design Systems team. There had been a lot of discussion about what the tool could do, but we needed something concrete to look at and start detailed discussions about how the tool would actually be used.

site builder landing page creating a new marketing campaign general campaign settings choosing site structure scheduling and publishing campaign performance

The first round of low-fidelity wireframes

Higher-fidelity wireframes

The low-fidelity wireframes gave us enough clarity to able to move on to higher-fidelity wireframes. My hypothesis was that content creators would be the primary users of the tool and marketing would have admin publishing permissions. But before I was able to test this theory, the project was cancelled.

Although this project was never built, it was a good lesson in the value of spending time in the upfront planning and research phase. Some research had already been done before I took over the project, but no one has put much thought into who would actually use the tool and who might be considered secondary users. I also uncovered some wrong assumptions about how content was translated at Etsy that could have created major problems in the future.

full page view: edit content full page view: preview content Side panel: edit and preview together individual sections: preview Individual sections: edit individual sections: high fidelity

Higher-fidelity wireframes focusing on ways to edit and preview page content

Previous Next