ZALES
Elevating the online shopping experience for a legacy jewelry brand
Project Brief
As part of a brand repositioning effort, Zales was looking to shift its legacy perception as a mall based jeweler to a more style-driven, everyday fashion brand. In parallel with a new media campaign, our team was tasked with reimagining their website through a strategic visual reskin that would reflect the brand’s new direction, enhance customer perception, and support more frequent, style-conscious engagement.
We conducted a reskin of the website with a focus on modularity, accessibility, and premium lifestyle storytelling. This included a robust design system to support long-term implementation across teams and templates.
Success Metrics
-
Reposition the Zales brand online with elevated yet approachable UI
-
Build a new design system with reusable, documented components
-
Improve navigation clarity, content hierarchy, and product discoverability
-
Modernize PDP, PLP, and homepage layouts with editorial-style storytelling
-
Support evolution and ongoing growth within rigid CMS constraints
The Process
01
Discovery
We began with a UX audit that uncovered inconsistencies in accessibility, navigation patterns, and UI treatment. This was paired with a competitive audit across luxury and DTC jewelry brands to benchmark modern eCommerce best practices.
02
UX Design
Based on audit insights, we developed wireframes for three primary page types:
-
Homepage: 3–4 templates
-
Product Landing Page: 6 templates
-
Landing Page: 3 templates
Homepage templates for Evergreen, Seasonal, and Collections
Mobile filter options for PLPs
03
System Design and Application
I created a modular design system to ensure scalability and efficiency and applied the refreshed visual system to all scoped templates.
3.1 User Interface
UI updates included typography, a new color system, buttons and icons.
Iconography included standard icons, diamond shapes, and arrows/action icons
Updated color palette with Tanzanite and Amethyst as the hero colors
Type exploration for button and label copy
3.2 Module and Template Development
With the system defined and approved, we applied the visual design first to component modules and then to the page layout templates.
Filter module for PLP pages with expandable/collapsable state variants
Shop by Category module for desktop and mobile screens
Shop by Shape module for desktop and mobile screens
Visual Navigation module for desktop and mobile screens
In-line Promo Cards module for desktop and mobile screens
2 Homepage and 1 PLP templates with sample photography
Results & Reflection
The redesign positioned Zales as a more elevated, fashion-forward brand and simplified the overall shopping journey. The modular design system equipped the internal team to roll out seasonal campaigns and category updates quickly and efficiently, without sacrificing a consistent brand look and feel.
Challenges
-
CMS limitations required us to design within existing modular structures
-
Balancing legacy identity with new brand direction
-
Designing for varied template uses - evergreen, seasonal, new launches, etc.
-
Scope focused on templates for three high-traffic page types, maximizing immediate impact but leaving lower-priority pages unchanged
Original
Wireframe
Final Design
