CSTM Canvas

CSTM Canvas — eCommerce Experience

CSTM Canvas is a personalized art brand dedicated to capturing cherished memories through custom street sign prints. The goal was a storefront that feels sentimental, trustworthy, and effortless, guiding visitors from inspiration to a completed custom order in moments.

Role and scope

• UI/UX design
• Visual direction
• eCommerce optimization
• Hand-off and documentation

Objectives

• Showcase personalization immediately: Allow users to visualize the final product within the first few seconds.
• Build emotional connection: Use lifestyle imagery to show how the art transforms a home.
• Streamline the purchase flow: Create a frictionless path from "customizing" to "checking out."
• Instill trust: Highlight quality materials and the "100,000+ happy customers" social proof.

Audience

Couples, families, and thoughtful gift-givers looking to immortalize special dates and names. They are sentimental but busy; they want a high-quality, meaningful gift without a complicated design process.

Approach

The page is designed as an interactive gallery: an emotional hero section, clear product categories, a seamless customization preview, and undeniable social proof. Typography evokes elegance, while the layout focuses on the artwork itself, making the customization process feel like play rather than work.

Design highlights

• Hero: A warm, inviting lifestyle shot of a canvas in a living space, paired with a clear call to "Create Lasting Memories."
• Value grid: Three key benefits (Handcrafted Quality, Fast Shipping, Ready to Hang) using clean iconography.
• Product preview: A dynamic section where users can see different styles (Couples, Aussie Landmarks) and instantly understand the variety available.
• Social proof: A dedicated "Wall of Love" featuring customer photos and a "Rated Excellent" Trustpilot badge to validate the purchase decision.
• CTA section: A persistent, high-contrast action bar on mobile to ensure the "Shop Now" button is always within thumb's reach.

Visual language

• Type: A clean geometric sans-serif for modern readability, paired with a soft serif for headlines to add a touch of warmth and romance.
• Color: A clean white and dark-grey foundation to let the black-and-white street signs pop, with soft pink/red accents to highlight sales and special occasions (like Valentine's).
• Imagery: High-resolution texture close-ups mixed with cozy, well-lit interior scenes to help users visualize the scale and impact of the art.

Interactions

• Live Preview: The customization fields update the product image in real-time, providing instant gratification.
• Micro-interactions: "Add to Cart" buttons provide satisfying feedback, and image galleries feature smooth sliding transitions.
• Scroll & Fade: Sections reveal themselves gently as the user scrolls, maintaining a calm browsing pace.

Accessibility and performance

• Large touch targets for mobile users (crucial for social media traffic).
• High contrast text for readability across all devices.
• Lazy-loaded images to ensure the gallery feels instant, even on slower connections.
• Keyboard-navigable menus and forms for full inclusivity.

Outcome

The redesigned Shopify landing page for CstmCanvas focused on high-intent conversion pathways, clarifying the value proposition of custom artwork immediately upon arrival. By streamlining the selection process and mobile experience, we turned passive browsers into active shoppers.

Performance Metrics

The data reflects a significant shift in buyer confidence and navigating the custom ordering funnel:

• +28% Conversion Rate on the "Start Your Design" CTA in the hero section.
• +19% Increase in Average Order Value (AOV) due to better visual upselling.
• −24% Cart Abandonment Rate on mobile devices.

"Clean, fast, and built for conversion. The new Shopify flow finally makes the CstmCanvas ordering process feel as premium as the art itself."

Services Delivered

• E-commerce UI/UX Design: Focused on reducing clicks from landing to checkout.
• Shopify Theme Customization: Tailoring the Liquid architecture for bespoke brand elements.
• Visual Direction: High-fidelity product rendering and lifestyle imagery integration.
• Conversion Rate Optimization (CRO): A/B testing hero sections and product page layouts.
• Design System Setup: Reusable components for future product launches.

The Tech Stack

• Figma: For high-fidelity prototyping and user flow mapping.
• Shopify: Core engine for commerce, checkout, and inventory management.
• Klaviyo: Integrated for post-click sales recovery and abandonment flows.
• Alpine.js / Vanilla JS: For lightweight, high-performance interactions that don't bloat load times.

‍