Milana

The starting point was that a fashion shopping product cannot rely on strong imagery alone. Customers still need to compare size, colour, price, and delivery information quickly, without those decisions being obscured by the content.

The second problem was continuity. Filter choices had to carry into the catalogue, selected colour and size into the cart, and cart totals into checkout. I wanted the kit to describe these state changes, not only the individual screens.

Visual product search was a separate feature added to the core shopping flow. A photo selected from the gallery had to lead to the closest matching pair of glasses in the catalogue, with enough product information to continue shopping.

Design approach

• I first mapped the main path from catalogue to payment and identified the product states that had to persist at each step. Screens were designed as parts of that flow.
• The discovery screen uses category tabs and large product imagery, with price, favourite, and cart actions available at card level.
• Sorting, product type, size, and colour are grouped in a dedicated filter panel. The active-filter count remains visible after returning to the catalogue.
• Product detail combines colour and size selection with price, quantity, and add to cart. The selected variant appears again in the cart summary.
• Checkout presents the items, delivery address, subtotal, and payment method together before the final confirmation.

Deliverable: the screens and product states required for catalogue, filtering, product detail, cart, checkout, and visual product matching were defined within one mobile UI kit.