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 landing page improved first-screen comprehension and reduced friction in the path to sign up.

• +28% click-through on the primary CTA in the hero
• +19% time on page for visitors from ads
• −24% bounce on mobile

‍

“Clean, fast, and exactly the tone we wanted. The new page finally explains Auralis without getting in the way.”

‍

Services delivered

Website design, UI/UX design, visual direction, interaction design, design system setup, hand-off docs.

‍

Tools

Figma for design and prototyping, Webflow for build, lightweight motion for micro-interactions.