Tubby Toms is a UK-based food brand known for its bold flavors and personality-packed branding. The original website lacked a structured visual narrative, felt outdated, and didn’t fully reflect the energy of the brand. My task was to revamp the homepage and key sections with a bold, creative, and high-converting design.

The client wanted something visually expressive and “out-of-the-box”, inspired by sites like Oatly, Closer, and Banky.io. The challenge was to balance creativity with usability, and keep a Shopify-friendly layout that the dev team could implement easily.

Bring bold storytelling and motion thinking into the layout

Enhance visual hierarchy and user flow for better product discovery

Create a flexible homepage layout that aligns with the brand’s loud, rebellious tone

Stay developer-friendly while adding creative micro-interactions

Analyzed reference websites provided by the client (Oatly, Closer, etc.) for creative patterns like layered typography, playful transitions, and bold visuals.

Studied Tubby Toms' brand voice, packaging, and existing assets.

Sketched out modular wireframes with sections like Hero, Shop by Flavor, Gift Ideas, Brand Story, and Hot Sauce Highlights.

Focused on storytelling: the site doesn’t just sell sauces—it sells personality.

Designed in Figma using a vibrant color palette, bold typefaces, and layered imagery.

Added placeholder notes for scroll animations and parallax to guide the development team.

Applied hover/transition states to CTAs and product blocks.

Shared early prototype via Figma. Incorporated minor client revisions including spacing, button styling, and copy tweaks.

Delivered final design assets ready for development.

A visually engaging and high-energy homepage that aligns with the Tubby Toms brand.

Clearer product navigation and storytelling flow.

Client was highly satisfied, awarded 5 stars, and invited me to collaborate on future projects.