Banana republic with Fairwinds
Launching Banana Republic
Factory Canada Through System-Led
E-commerce Design
Timeline
3 Months
Role
Product Designer
Team
Imperial Service at CIBC
Industry
eCommerce & Fashion
Skills
UX Strategy, Design Thinking, User Research, Prototyping
Context
Fairwinds is a boutique agency that works with retail brands in the luxury space. At Fairwinds, I had the privilege of reimagining the new experience for the Fashion and Factory website for Banana Republic US & Canada.
Banana Republic operates at the intersection of accessible luxury and mass retail. While the US Factory experience existed, Banana Republic Canada did not yet have a dedicated site — creating both risk and opportunity.
This allowed the team to define a distinct yet brand-aligned Canadian digital presence, modernize the Factory experience for a value-driven audience, and establish scalable UI patterns for future international growth.
Business Problem
01
Inconsistent UI patterns across pages
02
Limited scalability for future features and markets
03
Friction in collaboration between design and development
04
Missed opportunities to elevate discovery and conversion on PLPs
Role
Designing the
building blocks
I collaborated with a group of four other designers, each responsible for different aspects of the page. As a Product and Experience Designer, my focus was on the components that users interact with most.
01
Designing PLP product card components and variants
02
Contributing to the emerging design system and component library
03
Exploring enhancements to the Lookbook experience
04
Supporting sorting, filtering, and discovery patterns
05
Collaborating cross-functionally to ensure design-development parity
CHALLENGE
The core challenge was twofold: create a modern, intuitive shopping experience aligned with Banana Republic's evolving brand vision, and design for scale despite the absence of an existing design system.
This required balancing visual refinement with structural rigor — ensuring the experience could grow without rework.
Design Principles
01
Design for reuse
Not one-off screens. Every element should serve the broader system.
02
Support fast scanning
High-volume PLPs demand clear visual hierarchy and rapid comprehension.
03
Build shared systems
Create artifacts that designers and developers can co-own and evolve.
I create reusable components for the PLP product card, which became foundational to the experience. These components were built with scalability in mind, allowing them to be reused and extended across the platform.
Key considerations included clear hierarchy for product name, price, and promotional messaging; support for multiple states; flexibility for merchandising needs across categories; and responsiveness across all breakpoints.
Women's Clothing — Product Listing Page
Desktop 1512
Product Name
$99
Product Name
$99
Product Name
$99
Product Name
$99
Product Name
$99
Product Name
$99
Product Name
$99
Product Name
$99
system
Scaling the
Design System
At the start of the project, a robust design system did not exist. I worked closely with the design team and a design systems consultant to create reusable components and variants in Figma.
This work improved consistency and reduced ambiguity for both designers and developers. We defined states, sizing rules, icon usage, naming conventions, and documentation.
Quick Look Panel
Component Architecture
01
Product Card
Default, Hover, Sale, Out of Stock
02
Color Swatches
Active, Inactive, Disabled
03
Active, Inactive, Disabled
Available, Selected, Unavailable
04
Price Display
Regular, Sale, Clearance
05
Quick Look
Collapsed, Expanded, Loading
06
Filter Panel
Open, Closed, Applied
Color & Filter System
White
Beige
Gray
Black
discovery
Beyond transactional shopping, I explored how editorial storytelling could enhance engagement. The Lookbook was reimagined as a discovery and inspiration layer, emphasizing visual storytelling tied to real product pathways.
We explored shopping by occasion as an alternative mental model to categories — reducing cognitive load while preserving choice. Intuitive filtering supported faster decision-making across the experience.
Shop for the Occasion — Wedding Season
Work
Evening
Vacation
Weekend
Wedding Season
Cozy
Product Name
$99
Product Name
$99
Product Name
$99
Product Name
$99
Product Name
$99
Desktop
1512px
Full product grid with detailed filtering and side-panel quick look
Tablet
744px
Adapted grid with collapsible filters and optimized product cards
Mobile
393px
Single-column layout with bottom-sheet filters and swipeable carousels
IMPACT
A platform Built
to Evolve
The system-led approach positioned the platform to evolve without constant redesign. The design contributions delivered tangible value across consistency, collaboration, and scalability.
Scalable PLP foundations
Reusable product card and listing components
Stronger collaboration
Reduced design-development friction
Cross-breakpoint consistency
Unified experience across desktop, tablet, mobile
Market-ready launch
Banana Republic Canada digital presence
Success Indicators
Improved product discoverability and scanability on PLPs
Clearer merchandising hierarchy for price, promotions, and availability
Faster iteration enabled by shared components and standards
Consistency of UI across breakpoints and surfaces
Reduction in design-development friction through documented systems
rEFLECTION
01
Design systems are force multipliers
In retail platforms, the investment in a robust system pays dividends across every surface. A well-structured component library doesn't just create consistency — it accelerates the entire team.
02
PLPs are revenue surfaces
Product listing pages deserve deep design rigor. They're not just grids — they're the primary discovery mechanism for most shoppers, and every detail in hierarchy, density, and interaction matters.
03
Collaboration is essential when building from scratch
Without an existing system to reference, cross-functional alignment became the most critical skill. Shared language between design and development prevented costly rework.
04
Editorial and commerce belong together
The Lookbook and occasion-based shopping explorations showed that inspiration and transaction aren't opposing forces — they're complementary when designed intentionally.
additional work
explore more
Enquiries
social
© ilelosa eguavoen 2026