Volcom Workwear Campaign
Volcom needed a visually compelling, interactive landing page for its Workwear collection—built entirely in Shopify CMS without developer support—that balanced brand storytelling with conversion-driven UX.
ROLES
UX/UI Strategy & Digital Art Direction
TOOLS
Figma, Adobe Creative Suite (Photoshop, Illustrator), Shopify CMS
DELIVERABLES
Wireframing & Prototyping, Shopify CMS Implementation
The Challenge
The Volcom Workwear campaign required a high-converting, visually compelling landing page to promote its durable workwear collection. The challenge was to balance brand storytelling with conversion-driven UX, ensuring that users could engage with Volcom’s rebellious identity while efficiently navigating to product pages for purchase.
With no developer support, the page had to be designed and built entirely within Shopify’s CMS, utilizing dynamic content capabilities and restraints, my own custom HTML/CSS/Javascript code, and creative UX strategies to deliver a seamless, interactive experience.
Discovery & Research
Understanding the Audience
Since we didn’t conduct direct user testing, I based UX decisions on industry research and user behavior patterns for workwear shoppers:
- Workwear customers prioritize durability & performance - users need to quickly assess material quality, product longevity, and functionality.
- Users expect clear, easy-to-navigate product discovery - data from ecommerce trends suggest that feature highlights improve shopping efficiency.
- Brand trust and credibility influence purchasing decisions - displaying authentic lifestyle imagery and product field tests increases engagement and conversions.
Competitive Analysis
I analyzed workwear brands such as Carhartt and Dickies to identify industry-standard UX best practices:
✅ Structured content hierarchy improves product discovery.
✅ High-contrast CTA buttons steer users to convert.
✅ Mobile-first optimization increases engagement (70% of Volcom users use mobile vs 30% desktop).
UX Strategy & Design Process
Information Architecture & Wireframing
To optimize the user journey, I structured the landing page into key sections:
- Hero Section: High-impact lifestyle video.
- Product Benefits Overview: Icon-based features emphasizing durability, breathability, and waterproofing.
- Shoppable Product Grid: Seamless transition from branding to purchasing with quick-add functionality and high-contrasted CTAs directly linking to product pages.
- Shop by Category: Quick access to relevant workwear (Jackets, Pants, Accessories, etc.) and quickly adding to cart.
Visual & UI Design
- Typography & Color: High-contrast, bold styling to align with Volcom’s punk-rock aesthetic while maintaining ADA compliance.
- Imagery: Featured real workers using Volcom gear, reinforcing authenticity & brand connection.
- Navigation & UX Flow: Built a persistent Sticky Nav for anchoring to specific parts of the landing page and also ensured quick paths to product pages, reducing friction in the purchasing process.
Final Design
High-Fidelity Execution
✅ ADA-compliant (using live text and alt text on images), mobile-friendly design
✅ Utilized custom code (HTML, CSS, Javascript) for immersive interactions and animations.
✅ Fast-loading interactive content (optimizing compressed video and image sizes)
Sticky Navigation
✅ Facilitates seamless navigation with anchor-linking for quick access to sections.
✅ Slim and responsive design, ensuring a smooth experience on both desktop and mobile.
Results & Reflections
GA4 data showed:
0
%
increase in total Workwear-related page views post Campaign page launch
What worked well:
- Balanced Volcom’s bold storytelling with a commerce-optimized layout.
- Delivered SEO & ADA-compliant, mobile-responsive experience with no developer support.
- Increased Workwear section visibility sitewide (+59% page views).
- Built a reusable, scalable landing template for future campaigns.
Opportunities for next steps:
- Deploy heatmap tracking to understand scroll behavior and engagement.
- Analyze quick-add cart performance for insights into average order value and conversion effectiveness.
Through a user-first strategy and custom implementation, this project merged Volcom’s rebellious identity with high-performing UX—creating a captivating, scalable landing page that balances brand storytelling with intuitive navigation and seamless conversion.
