>

>

Wireframes: Collection Pages

Wireframes: Collection Pages

UX / UI

Wireframes

Collection Pages

Desktop and mobile wireframe variants available in respective sized windows.
Each Wireframe example scrolls independantly and can be expanded

Desktop and mobile wireframe variants available in respective sized windows.
Each Wireframe example scrolls independantly and can be expanded

Bra Collection Page

Collection pages were designed with flexible layouts that adapted to the featured products while maintaining a consistent theme, ensuring users always recognized they were browsing within a collection. User feedback revealed the need for greater clarity, leading to the introduction of subcategories across applicable collections.

In the bras collection, this meant organizing products into size-based groups. Carousels highlighted best-selling styles within each range, giving users a quick overview, while also offering the option to explore the full size category in depth. Additionally, featured collections were surfaced at the top of the page, providing multiple navigational pathways and making it easier for users to find what they were looking for.

Underwear Collection Page

The underwear collection page functioned as a more dynamic main hub, focused on style rather than size. Since most styles emphasized comfort, users could browse and filter with ease to find exactly what they were looking for. Like the bras collection, subcategories were introduced here as well, creating a clear and organized browsing experience.

Sale Collection Page

The initial sale page design presented a major challenge: bras, underwear, and sleepwear were all featured together, resulting in an overwhelming 22 filters displayed in sequence. To resolve this, filters were restructured so that each product type was nested under a parent filter. This allowed users to quickly access only the relevant options for the product they were shopping for, making the experience far more manageable and efficient.

Filter

Although it never made it to launch, a secondary filter enhancement was in development. The concept allowed users to expand and learn about more technical filters — similar to the explanations provided on the compare tool and product detail pages. This approach aimed to combine education with functionality, giving users a clear understanding of filter options at a glance while supporting more confident decision-making.

Original Design VS. Updated Design

Original Design
My Updated Design

Copyright Bradley Davis Design 2025 ©

Copyright Bradley Davis Design 2025 ©

Copyright Bradley Davis Design 2025 ©