Product Composer

Originally, the product creation tool was hacked together atop the existing Blog post composer, leading to various inconsistencies and challenges. These issues significantly complicated the product creation and editing process, making it both tedious and less intuitive.

One of my primary objectives was to refine the tool's IA. The redesigned layout now features a clean, vertical stack with strategically organized sections and a logical sequence, improving user navigation and interaction.

To further declutter the interface, we implemented progressive disclosure for specific fields. For instance, the option to add a discounted price now only becomes visible when a product is marked as 'On Sale,' simplifying the user's decision-making process.

The original composer was laden with features that, while useful, overwhelmed the interface. My strategy involved reclassifying these numerous features into optional "add-ons," accessible from a unified section. This approach preserved functionality while maintaining a minimalist default interface.

A significant breakthrough in our project was the overhaul of how product variants are created and managed. Previously, each variant required manual entry, a tedious process for users. The redesigned Product Composer now enables bulk generation of SKUs with a single click, accompanied by a convenient web preview feature.

We designed the composer to be highly modular, allowing customization of sections according to the product type (e.g., Physical or Digital). This modularity not only facilitates easy adaptation across different devices but also personalizes the tool to the user's specific needs, streamlining the product creation experience.

The second milestone was porting over the designs to mobile. First, we integrated the new composer into the Commerce iOS app. Next, we added support for mobile web.

The product composer's type selector.