Novatto Site

Novatto — Interactive E-Commerce Experience

I build e-commerce experiences with a strong focus on front-end structure and platform integration. My work bridges visual design and development through custom components, AI-foundational scripts, performance-minded layouts, and clean data flow between products, variants, and content. I’m comfortable working within existing platforms to extend functionality while preserving usability, scalability, and brand consistency.

‍

Role and scope

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

‍

Objectives

• Communicate value in the first screen
• Show product visuals without clutter
• Create an optimal navigation for over 45 categories
• Keep performance, accessibility, and readability strong
• Draft a design systems guide for use across the Novatto team

‍

Audience

Contractors, realtors, businesses, and homeowners of all calibers

‍

Approach

The home page serves as a welcoming start to a commercial journey: a video hero with tabs directing to the store's three main pillars (bath, kitchen, bar); a clear navbar for direct access to relevant products;  animations and consumer testimonials to establish professionalism; and style-based categories for those still wanting to discover their vision. All of these sections are modular within Shopify's theme editor for special/seasonal events.

‍

Design highlights

• Variant Matrix: I created a metafield-based matrix that would allow me to assign custom swatches, with overlaps, to the ~2000 unique SKUs within one page template. ‍
• Vanity Builder: Combining this matrix with an extension to the "3 option limit" within Shopify admin, I was able to vibe-code a cascading product page with over 128 variants.‍
• Product Filters: Working with anchor-links and Globo.io's Smart Search and Filters, I integrated a "mobile app experience" for filtering product types within the major categories.‍
• 3D/AR Capability: I added a metafield-assigned button that opens GLB/USDZ model file inputs into a turntable modal over the product page. Inside this modal, mobile users may choose to view these product models in their own home or business.‍

‍

Visual language

• Type: I kept the type as close to the type-pairing choses for the brand guide. The more web-friendly Lato and Neuton take over for Brisbane and Arpona respectively.
• Color: The rich, cold purple creates an initial image of luxury, which is then made more grounded with the blues and playful interactivity throughout the site.
• Imagery: Industry standard imagery, made more consistent with the digitization of the catalog into 3D models.

‍

Interactions

• Motion is used to explain, not just to decorate. Buttons elevate slightly on hover, cards reveal micro-details, and sections fade in gently as they enter the viewport. The site feels alive without making any significantly sharp, jarring distractions.

‍

Accessibility and performance

• Minimum 14 px body size, strong color contrast, embedded readability features, and stable third-party app interactivity.
• Images are optimized and lazy-loaded. Animations respect reduced-motion preferences. Lenis makes scrolling easier on the eyes.

Outcome

The landing page improved first-screen comprehension and reduced friction in the paths to collections and signing up.

• +300% product page interaction
• +200% on key events: purchasing and sign-ups
• −50% bounce rate overall

‍

Services delivered

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

‍

Tools

Shopify for build, SEO, and CRM; Google for ads and analytics; GitHub and ChatGPT 5.2 for script references and vibe-coding.