Shop the Look

Shop the Look lets a merchant build "looks": a main product, with a choice of its image, plus related products or a collection, shown together on the product page so shoppers can buy the whole look. Merchants choose one of nine layouts, where it is placed and how it is styled, and a look saves as a draft or goes live. The app did all of that, but its screens made merchants work for it:

• A tab bar across the top of the app stood in for Shopify's own navigation
• The dashboard showed three numbers above a wall of tips written as plain text
• Layout, placement and style were split across three tabs, so a change was never seen next to the rest
• Settings was one long form of toggles and fields

The team needed a redesign that makes the app feel native to Shopify and lets a merchant go from a product to a live look in a few steps.

Phase 1: Audit

Audit: Documented every screen of the existing app: dashboard, looks, layout with its placement and style tabs, and settings

Navigation: Compared the app's own tab bar with Shopify's navigation, which the redesign uses instead

Phase 2: Directions

Look builder: Explored how a look is made, one decision at a time: the main product, its image, the related products and their order, and the status

Phase 3: Design

Design: Designed a dashboard with its numbers first, a Looks list with draft and live looks, a look builder in Polaris sections, a layout page with all nine styles, placement and style on one screen, and settings in sections.

States: Designed the empty states for the dashboard and the looks list, and the Save as Draft and Save as Live states of a look.