I led the UX/UI strategy and design, ensuring that the page was optimized for user engagement, accessibility, and conversion.
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 Considerations
- 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
✅ Optimized SEO metadata for discoverability
✅ 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
Google Analytics post-launch data showed:
0
%
increase in total Workwear-related page views post Campaign page launch
What worked well:
- Successfully balanced brand storytelling with a commerce-driven layout.
- Optimized for speed, mobile responsiveness, and SEO.
- Increased Workwear visibility sitewide.
Opportunities:
- Conduct heatmap tracking (Lucky Orange or Hotjar) to analyze user interactions and scroll depth.
- Gather data on AOV, demand and conversion rates from the quick-add functionality.
This project successfully merged Volcom’s brand identity with high-performing UX design. By applying user-focused strategies, interactive elements, and performance optimizations, we created a visually compelling and conversion-driven landing page—all without developer support.
Leveraging Shopify’s CMS, custom code, and dynamic content capabilities, we built a seamless, high-converting experience that balanced brand storytelling with intuitive navigation, ensuring users could easily explore the collection and make purchases.
©2025 Kyle Takesue