ABHINAV VATS

Looping Loons is an AI-driven platform. As the product grew, UI inconsistency became a major bottleneck. The engineering team was spending excessive time rebuilding buttons, inputs, and layout grids from scratch for every sprint. Feature delivery was slow, and visual regressions were common.

The challenge was not just to design a beautiful interface, but to architect a highly structured system of design tokens and components that could be predictably implemented in code.

Before touching components, I established the foundational design tokens. This ensured that typography scales, spacing increments, and color palettes were mathematically sound and easily consumable by frontend engineers.

I systematically built over 50 components—ranging from atomic elements like buttons and badges to complex organisms like data tables and navigation structures. Each component was built with Auto-Layout in Figma, accounting for responsive behavior across breakpoints and ensuring strict accessibility contrast standards.

Because I straddle both design and development, my workflow didn't stop at Figma. I translated these design tokens and UI components directly into reusable, typed React components. By implementing code splitting and lazy loading where necessary, the UI library remained highly performant (yielding 95+ Lighthouse scores).

import { ButtonProps } from './types';
import './Button.css';

export const Button = ({ variant = 'primary', size = 'md', children, ...props }: ButtonProps) => {
  const className = `btn btn-${variant} btn-${size}`;
  
  return (
    <button className={className} {...props}>
      {children}
    </button>
  );
};

Through competitor analysis, I identified that the primary churn factor in modern dating apps is not a lack of users, but a lack of meaningful interaction. Users swipe endlessly but rarely converse. The core business and user problem was clear: We needed to architect a discovery mechanism that forced interaction without feeling like work. The proposed solution was an AI-facilitated conversational interface.

Assumption: Users are willing to talk to an AI "wingman" before being introduced to a real human.

Constraint (Trust): The AI interface could not feel "uncanny" or overly robotic. It needed to build trust rapidly.

Constraint (Cognitive Load): Typing is higher friction than swiping. The interface needed smart prompts to reduce the effort of starting a conversation.

Instead of a card stack, the home screen is a chat interface. By shifting the mental model from "catalog browsing" to "active conversation," I aimed to increase the baseline investment a user makes during onboarding. The AI asks profiling questions naturally, removing the need for a tedious 10-step form.

The primary challenge was not just selling plants, but designing a B2B conversion funnel. Corporate facility managers were visiting generic nursery sites but failing to convert because they couldn't confidently visualize scale, maintenance requirements, or architectural fit. Planto needed to serve as both an inspirational mood board and a frictionless procurement portal.

1. Contextual Visualization: Large botanical photography dominates the above-the-fold experience, but strictly shows plants *in office contexts*, not just isolated pots. This immediately answers the buyer's subconscious question: "Will this work in my space?"

2. Trust Signals Above the Fold: Clean statistics (250+ types, 1000+ happy customers) are presented immediately. B2B buyers require social proof before exploring catalogs.

3. Scalable Navigation: The product categories are grouped by architectural need (e.g., "Desk Setup", "Lobby Statement Pieces") rather than botanical genus, aligning the IA with the buyer's mental model.

The challenge was designing a mobile shopping experience that maintains the aspirational quality of luxury fashion while providing the practical functionality needed for product discovery, size selection, and checkout.

1. Editorial product presentation: Product cards use generous photography with minimal text overlay, mimicking the layout of fashion lookbooks rather than traditional e-commerce grids.

2. Refined filtering: The product filtering system uses horizontal category chips rather than dropdown menus, keeping the browsing experience fluid and visual.

3. Material & detail focus: Product detail pages prioritize material information and styling context, reflecting how luxury shoppers evaluate clothing.