Enhancing Digital Shopping Experience:
Web Design & UX Optimization
Web Design & UX Optimization
Overview
Overview
Overview
MPG is a B2C activewear brand at the intersection of performance and style. As Senior Designer, I lead the visual ecosystem across email, social, and web, transforming brand aesthetics into high-converting digital experiences. My focus is on bridging the gap between creative storytelling and conversion rate optimization (CRO).
Ricki’s is a prominent Canadian fashion retailer with over 250 stores and an e-commerce platform generating CAD 50M in annual sales. As a Web / UI-UX Designer, I focused on balancing brand aesthetics, Salesforce technical constraints, and business goals. My work centered on improving website usability, visual consistency, and cross-page integration to create a seamless shopping journey across all devices.
MPG is a B2C activewear brand at the intersection of performance and style. As Senior Designer, I lead the visual ecosystem across email, social, and web, transforming brand aesthetics into high-converting digital experiences. My focus is on bridging the gap between creative storytelling and conversion rate optimization (CRO).
Client:
Client:
Client:
Ricki’s (Fashion Retail)
Ricki’s (Fashion Retail)
Ricki’s (Fashion Retail)
Role:
Role:
Role:
Web / UI-UX Designer
Web / UI-UX Designer
Web / UI-UX Designer
Stack:
Stack:
Stack:
Salesforce CMS, Figma, Adobe Creative Suite, GA4, HTML, CSS
Salesforce CMS, Figma, Adobe Creative Suite, GA4, HTML, CSS
Salesforce CMS, Figma, Adobe Creative Suite, GA4, HTML, CSS
Focus:
Focus:
Focus:
Site Usability, Mobile Optimization, CMS Workflow
Site Usability, Mobile Optimization, CMS Workflow
Site Usability, Mobile Optimization, CMS Workflow
Solution 1
Data-Driven Visuals
Solution 1
I addressed visual fragmentation and site performance issues by standardizing design patterns and leveraging user data:
· Data-Informed Design: Used GA4 analytics to identify drop-off points, refining visual hierarchy and navigation to make product discovery more intuitive.
· Brand Consistency & SEO: Standardized typography and colors while replacing image-only banners with dynamic H1-text components to boost SEO and visual impact.
· Smart Asset Management: Implemented WebP/AVIF formats and Responsive Image Strategy, dynamic loading assets based on device to maximize load speeds without sacrificing quality.
I addressed visual fragmentation and site performance issues by standardizing design patterns and leveraging user data:
· Data-Informed Design: Used GA4 analytics to identify drop-off points, refining visual hierarchy and navigation to make product discovery more intuitive.
· Brand Consistency & SEO: Standardized typography and colors while replacing image-only banners with dynamic H1-text components to boost SEO and visual impact.
· Smart Asset Management: Implemented WebP/AVIF formats and Responsive Image Strategy, dynamic loading assets based on device to maximize load speeds without sacrificing quality.
I addressed visual fragmentation and site performance issues by standardizing design patterns and leveraging user data:
· Data-Informed Design: Used GA4 analytics to identify drop-off points, refining visual hierarchy and navigation to make product discovery more intuitive.
· Brand Consistency & SEO: Standardized typography and colors while replacing image-only banners with dynamic H1-text components to boost SEO and visual impact.
· Smart Asset Management: Implemented WebP/AVIF formats and Responsive Image Strategy, dynamic loading assets based on device to maximize load speeds without sacrificing quality.
Solution 2
Conversion-Driven Retail Strategy
Solution 2
I transformed the website into an active sales tool by integrating strategic UI modules designed to increase Average Order Value (AOV):
I transformed the website into an active sales tool by integrating strategic UI modules designed to increase Average Order Value (AOV):
I transformed the website into an active sales tool by integrating strategic UI modules designed to increase Average Order Value (AOV):
Contextual Cross-Selling: Integrated "Storytelling Cards" within Product Listing Pages (PLPs). For example, showcasing pants on a sweater page to mimic in-store outfit pairings and encourage multi-item purchases.
Contextual Cross-Selling: Integrated "Storytelling Cards" within Product Listing Pages (PLPs). For example, showcasing pants on a sweater page to mimic in-store outfit pairings and encourage multi-item purchases.
Contextual Cross-Selling: Integrated "Storytelling Cards" within Product Listing Pages (PLPs). For example, showcasing pants on a sweater page to mimic in-store outfit pairings and encourage multi-item purchases.
Cart & Wishlist Enhancements: Redesigned the checkout entry points by integrating personalized recommendations and browsing history, reinforcing the decision-making process at the final touchpoint.
Cart & Wishlist Enhancements: Redesigned the checkout entry points by integrating personalized recommendations and browsing history, reinforcing the decision-making process at the final touchpoint.
Cart & Wishlist Enhancements: Redesigned the checkout entry points by integrating personalized recommendations and browsing history, reinforcing the decision-making process at the final touchpoint.
Efficient Filtering & Discovery: Enhanced the "Sale" page filter system with price and size shortcuts. This allowed users to filter by their specific size and budget instantly, helping them "find what they want faster."
Efficient Filtering & Discovery: Enhanced the "Sale" page filter system with price and size shortcuts. This allowed users to filter by their specific size and budget instantly, helping them "find what they want faster."
Efficient Filtering & Discovery: Enhanced the "Sale" page filter system with price and size shortcuts. This allowed users to filter by their specific size and budget instantly, helping them "find what they want faster."
Solution 3
Salesforce CMS Flexibility & Workflow
Solution 3
To improve deployment speed, I bridged the gap between design and the technical environment of Salesforce Page Designer:
To improve deployment speed, I bridged the gap between design and the technical environment of Salesforce Page Designer:
To improve deployment speed, I bridged the gap between design and the technical environment of Salesforce Page Designer:
Figma-to-Salesforce Alignment: Created a modular UI Kit in Figma that mirrored Salesforce CMS components. This ensured design accuracy and significantly reduced the time-to-market for weekly campaigns.
Figma-to-Salesforce Alignment: Created a modular UI Kit in Figma that mirrored Salesforce CMS components. This ensured design accuracy and significantly reduced the time-to-market for weekly campaigns.
Figma-to-Salesforce Alignment: Created a modular UI Kit in Figma that mirrored Salesforce CMS components. This ensured design accuracy and significantly reduced the time-to-market for weekly campaigns.
Technical Agility & Customization: When standard CMS templates reached their limits, I utilized HTML, CSS, and Bootstrap to build custom animated banners and specialized grid layouts, elevating the content richness and brand feel.
Technical Agility & Customization: When standard CMS templates reached their limits, I utilized HTML, CSS, and Bootstrap to build custom animated banners and specialized grid layouts, elevating the content richness and brand feel.
Technical Agility & Customization: When standard CMS templates reached their limits, I utilized HTML, CSS, and Bootstrap to build custom animated banners and specialized grid layouts, elevating the content richness and brand feel.
Responsive Website Gallery
Polly Ho
Designer
Contact me
Build Great Design Together
I’m open to designer opportunities in UX/UI, Website, and e-commerce design.
Polly Ho
Designer
Contact me
Build Great Design Together
I’m open to designer opportunities in UX/UI, Website, and e-commerce design.
© Polly Ho 2026
Build Great Design Together
I’m open to designer opportunities in UX/UI, Website, and e-commerce design.
Polly Ho
Designer
Contact me