InstaLILY Site

I owned the visual design, page layouts, typography, product diagrams, graphic assets, interaction and motion design, responsive behavior, accessibility, front-end development, and deployment. I worked closely with lead designer Alex to turn the emerging brand direction into a complete web experience.

The early color palette was developed collaboratively with Nathan Williams. Company leadership and marketing shaped the main narrative and copy, a teammate migrated the existing Sanity content, and Tiffany later supported analytics, search engine optimization, and answer engine optimization.

The website became the first complete expression of the new brand system. Its color, typography, diagrams, graphics, motion, and layout principles now guide client-facing documents, presentations, and one-pagers.

Because the site is an ongoing company platform, the system has to accommodate new product stories and expanded pages without losing a consistent visual voice. The existing Sanity setup was retained so the team could continue managing content as the company grew.

As InstaLILY prepared to announce its Series B, the company needed a website and visual identity that reflected its next stage of growth. The experience had to speak to prospective customers, investors, future teammates, and C-suite and innovation leaders at industrial-goods companies.

The website also needed to support a company whose product, positioning, and industry stories would continue to evolve after launch. Rather than treating the release as a one-time campaign, we used it as the starting point for a longer-term brand and web system.

To demonstrate Lily in marketing contexts, I designed a conceptual terminal interface inspired by the product’s generative UI. The interface translates agent activity into a recognizable sequence of prompts, file reads, processing states, and responses without presenting it as the literal product UI.

The terminal gives forward-deployed engineers and clients a shared visual language for understanding how Lily works. I also created a 26-frame animation in After Effects that builds the Lily mark from terminal characters, connecting the identity to the product’s interface language.

The final animation was rendered as video and adapted for the website, sales decks, social media, and Series B launch materials. When motion is paused, the final frame provides the clearest static expression of the mark.

Rendering the animation as video made it straightforward to reuse across channels, but it also reduced the control available inside the browser. A key learning was to define reduced-motion behavior as part of the media specification from the beginning.

For ambient hero media, the reduced-motion version should pause the video and hold on an intentional static frame. This preserves the idea and visual quality without requiring visitors to experience continuous motion.