Responsive & Product Design Review

Mobile navigation

The approved retail pattern.

The short ICO logo now anchors the left edge while Search, Cart, and Menu stay in a predictable utility cluster. Browsing moves through focused screens instead of lengthening one accordion drawer.

Search scope

The Search control is in its final header position and emits the integration event for the upcoming Search design task. No temporary search overlay is shown in this prototype.

Closed header

A 64px cream header with the supplied short logo and three 44px utility targets.

Root menu

Four primary destinations, compact utilities, and the two conversion actions.

Shop Industries Our Work Info

AccountFavoritesResource CenterContact

Start a ProgramTeam Stores

Shop by department

A focused second-level screen with a visible Back control and direct destinations.

‹ Shop

Shop by department

Front of houseBack of houseF&BSpa & recreationCulinaryHousekeeping & support

Shop by color

Four-column swatches maintain generous touch targets without turning the menu into a long list.

‹ Shop

Shop by color

WhiteBlackNavyGrey BeigeBlueBrownGreen OrangePinkPurpleRed TealYellow

Empty cart drawer

The right-side theme behavior is represented with a mobile full-width empty state.

Cart

Your cart is empty.

Browse uniforms

Standard media hero

One frame, flexible placement.

This module supports page-specific image or video media while retaining ICO typography, CTA styling, contrast, and mobile-safe spacing.

Horizontal

Vertical

Hospitality programs

Every role, properly dressed.

A full-width storytelling module for industries, services, campaigns, and conversion pages.

Start a Program View our work

Video-ready

The same media layer accepts muted native or external video, a mobile-specific source, and this image as its poster and reduced-motion fallback. Final video footage can be added without changing the content layout.

Phase 2 journeys

Mobile commerce, connected.

Open each working view in sequence to review message hierarchy, product browsing, swipe media, saved looks, and persistent Favorites behavior.

01Homepage 02Collection 03Product detail 04Gallery 05Favorites

Returns the default Favorites list and four sample lists to their presentation-ready state.

Favorites design direction

One save pattern, from inspiration to shortlist.

The standardized approach keeps the heart interaction fast during browsing, then reveals list organization only when it is useful. Looks and garments remain distinct inside each list, while the same save behavior is used in Shop, Product, and Gallery.

Front of house Metro II Blazer - Empire Grey

01

Save without interruption

The first heart tap saves directly to the default Favorites list and confirms the action without opening a large dialog.

02

Organize when needed

The confirmation offers Choose Lists. Returning to an already-saved item opens the same compact list sheet, with named lists and list creation in one place.

03

Review and share clearly

The Favorites overview uses four-item previews for fast scanning. Each list separates Looks and Garments, lets saved items move between lists, and supports a read-only share link.

Open Favorites overview Try it in Shop Try it in Gallery

Lower friction

Saving stays lightweight.

A shopper can keep moving through products and looks. List management no longer interrupts every first save.

One mental model

The heart always means save.

The same icon, selected state, confirmation, and list sheet appear across every commerce and inspiration surface.

Progressive disclosure

Complexity appears at the right moment.

Named lists and sharing remain available for program work without making the common save action feel administrative.

Included in this direction

Default Favorites, multiple named lists, browser-persistent prototype state, separate Looks and Garments views, list management and item moving, and read-only sharing.

Held outside this prototype

Collaborative editing, list copying, CSV or PDF export, administrative reporting, and B2B, CRM, or other downstream integrations.

Product content model

One product page, clearly owned content.

The product template combines native Shopify product data, product-specific metafields, shared storefront policies, and recommendation data. Each source has a defined place so the description stays useful without becoming a catch-all field.

Current mapped example

Metro II Blazer - Empire Grey

The prototype shows the intended division between product storytelling, structured specifications, fit and care support, program services, and related merchandise.

Native product: Title, price, media, color, size, length, availability, and cart controls.
Product content: Description, specifications, size guide, care, decoration guidance, and companion product.
Shared content: Shipping and returns language, program CTAs, and recommendation behavior.

Open the mapped product page

Proposed Shopify product content mapping
Product content	Shopify source	Rendered in	Primary owner
Title, price, media, options	Native product and variant fields	Gallery, heading, pricing, selectors, and cart controls	Merchandising
Introductory description	`product.description`	Product Details introduction	Merchandising
Department and style number	`custom.department`, `custom.style_number`	Product identity above the price	Merchandising
Fabric and construction	`custom.product_specs` list of `product_spec` metaobjects	Structured Product Details grid and feature list	Product operations
Size guide	`custom.size_guide` metaobject reference	Size Guide accordion	Product operations
Care instructions	`custom.care_instructions` rich text	Care Instructions accordion	Product operations
Decoration guidance	`custom.decoration_guidance` rich text	Decoration Options accordion	Program team
Companion product	`custom.companion_product` product reference	Companion product module	Merchandising
Shipping and returns	Shop-level or theme setting	Shipping & Returns accordion	Store operations
Related products	Shopify Search & Discovery recommendations	Complete Your Program product shelf	Merchandising

Rendering rules

Product Details opens first. Empty optional sections do not render, the native description appears only once, and structured specifications stay separate from the narrative description so content remains easy to maintain.

Phase 3 journeys

Mobile content, easier to navigate.

Review the longer sales and education templates with compact primary content, swipeable secondary shelves, accessible filtering, and chapter-level reading controls.

01

About ICO

Logo rail, process, proof

02

Hospitality

Compact lists, style shelves

03

Services overview

Primary service index

04

Service detail

Capabilities, process, FAQ