I stepped in as the Lead Designer for Poketo, an iconic lifestyle brand. My goal wasn’t just to make a “pretty website,” but to build a digital engine that turns art into commerce.

 In the early stages, I acted as a bridge between the business owners and the technical team. I started by using Gemini 2.0 to ingest years of Poketo’s brand history, customer reviews, and competitor data. This allowed me to instantly identify “User Friction”—the specific reasons why customers were leaving the site without buying. Instead of spending weeks on manual spreadsheets, I used AI to highlight that users loved the art but found the navigation “noisy.” This gave me a clear roadmap: Simplify the journey to the checkout.

Strategic Intent: Design is not just about how it looks, but how it works for the person using it. I applied the Design Thinking methodology to dismantle the “generic shopper” myth and identify the specific emotional and functional needs of Poketo’s audience. My goal was to move beyond a standard e-commerce grid and create a “Value-First” architecture. I broke the project into five rigorous stages: Empathize (understanding the user), Define (naming the problem), Ideate(brainstorming solutions), Prototype (building the draft), and Test (validating the logic).

AI-Augmented Implementation: To move faster than traditional research allows, I utilized Claude 3.7 to build and simulate Synthetic User Personas. I fed the AI Poketo’s historical sales data and brand sentiment to create three distinct, hyper-realistic archetypes. I then “interviewed” these personas to find navigation gaps.

The Synthetic Personas I Engineered:

• Persona A: “The High-Speed Gifter” (Maya, 29, Art Director)

  • The Goal: Needs a unique, high-design gift for a colleague in under 3 minutes during a commute.

  • The Friction: She found the original “Mega-Menu” overwhelming on mobile. Too many sub-categories made it impossible to scan quickly.

  • The Solution: I pivoted to a “Curated Discovery” model. I designed “Mood-Based Collections” (e.g., For the Home Office, Minimalist Vibes) that appeared directly on the landing page, reducing Maya’s path-to-purchase by 4 taps.

• Persona B: “The Methodical Collector” (Julian, 45, Architect)

  • The Goal: A long-time Poketo fan looking for specific restocks of limited-edition stationery to complete his set.

  • The Friction: Julian shops on a large desktop monitor and felt the white space was underutilized, making it hard to compare technical specs like paper weight or dimensions.

  • The Solution: I introduced an “Expanded Grid” view for desktop that Claude’s logic-check verified as 30% more efficient for high-intent shoppers who need to see more data at a single glance.

• Persona C: “The Inspiration Seeker” (Chloe, 22, Student)

  • The Goal: Not looking for anything specific; she wants to be inspired by the “Poketo Lifestyle” and might buy a low-cost item if the story is right.

  • The Friction: Traditional e-commerce felt too “transactional” for her. She wanted to see the products in a real-world context.

  • The Solution: I integrated Shoppable Editorial Content. Using Claude to map out the “Story-to-Cart” logic, I ensured that every lifestyle image was an entry point to a product page, turning “browsing” into “buying.”

The Result: By simulating these journeys, I identified that the mobile navigation was the biggest hurdle. Claude’s simulation showed that by simplifying the menu into four high-level “Life Pillars” (Work, Home, Accessories, Gifts), we could increase mobile conversion potential significantly before even moving to the high-fidelity UI.

Strategic Intent: In this phase, I transitioned from abstract psychology to tangible structure. I began with low-fidelity sketching—the “Skeletal Blueprint”—to define spatial relationships and visual hierarchy. My primary strategic challenge was the Homepage Hero Section. I had to decide: Should we show a gallery of many products to prove variety (The Catalog Approach), or one singular, powerful lifestyle image to sell the brand’s soul (The Editorial Approach)?

I leaned toward the “Single Hero” strategy. In a world of digital noise, Poketo’s strength is its curated aesthetic. By giving the user one clear point of entry, I could reduce cognitive load and guide them intentionally into the shop’s “creative funnel.”

AI-Augmented Implementation: To validate this “Single Hero” theory, I used Figma Make as an iterative engine. Instead of manually drawing ten different versions of a header, I used AI to rapidly explore layout “stress tests” based on my initial hand-drawn concepts.

The “Stress Test” Iterations I Prompted:

• Iteration 1: The “Z-Pattern” Layout

  • The Prompt: “Generate a high-impact responsive hero section for a design-led e-commerce site focusing on a 60/40 split between lifestyle photography and bold typography.”

  • The Insight: This version felt too “corporate.” While functional, it didn’t capture the playful, artistic energy that Poketo is known for. It was a safe “fail.”

• Iteration 2: The “Immersive Minimalist” Layout

  • The Prompt: “Create a full-bleed immersive hero section with a centered CTA and a floating navigation bar that disappears on scroll. Priority: Visual Breathing Room.”

  • The Insight: This felt much closer to the brand. By using AI to instantly generate the “floating” nav-bar logic, I could see that this layout prioritized the art over the UI, which is exactly what the “Inspiration Seeker” (Persona C) needed.

• Iteration 3: The “Contextual Grid” (Mobile Optimization)

  • The Prompt: “Convert the full-bleed desktop hero into a mobile-first stacked layout, prioritizing the ‘Shop Now’ button above the fold while maintaining 44px touch targets.”

  • The Insight: Figma Make handled the heavy lifting of repositioning elements for a 390px width. It automatically suggested a “Sticky Header” for mobile, which I adopted because it ensured that the “High-Speed Gifter” (Persona A) never had to scroll back up to find the menu.

The Strategic Pivot: By using AI to “fail fast,” I realized that a static image wasn’t enough. I made the high-level decision to evolve the hero section into a “Dynamic Story Card.” I used the AI-generated layouts as a foundation but manually refined the “Golden Ratio” of the text-to-image placement.

The Result: By automating the repetitive task of building grid systems and basic UI components, I reclaimed 70% of my design time. This allowed me to focus on the “Human-in-the-Loop” decisions—like the specific placement of the “Free Shipping” banner to maximize conversion—ensuring the final blueprint was both algorithmically sound and emotionally resonant.

Strategic Intent: The final stage was the “Visual Masterclass.” This is where the structural blueprints were transformed into a vibrant, living brand experience. For Poketo, the UI had to be high-energy and colorful, yet clean enough to let the products breathe. My focus was “Inclusive Aestheticism”—the belief that a website should be as accessible as it is beautiful. I didn’t just want a site that looked good on a 2026 MacBook Pro; I wanted a site that was usable for everyone, including those using screen readers or navigating with limited motor control.

AI-Augmented Implementation: I utilized a suite of AI-driven Design Systems to ensure that every pixel was intentional. Instead of manually checking every color contrast ratio, I used AI to automate the “Compliance Layer,” allowing me to focus on the “Delight Layer”—the animations and transitions that make the site feel premium.

The Final UI Execution & AI Optimization:

• Smart Color Theory & Accessibility:

  • The Challenge: Poketo uses a very bright, eclectic palette. Bright yellows and soft pinks often fail WCAG (Web Content Accessibility Guidelines) for text legibility.

  • The AI Solution: I used an AI color-contrast agent to “nudge” the brand colors by just a few hex-code values. It optimized the colors for readability without losing the brand’s visual “pop.” I then generated an “Automated Dark Mode” using AI logic that inverted the UI while maintaining the same artistic mood—ensuring eye comfort for late-night shoppers like Persona C.

• Responsive Intelligence via “Figma Make”:

  • The Challenge: In 2026, e-commerce traffic is 85% mobile, but users expect a “Desktop-Level” richness.

  • The AI Solution: I used Figma Make to generate “Fluid Breakpoints.” Instead of building three fixed versions (Mobile, Tablet, Desktop), the AI helped me create a Variable Grid System. This means the layout doesn’t just “snap” to a new size; it flows smoothly across any screen, from a smartwatch to a 32-inch monitor. It automatically reorganized the “Art Pouch” gallery from a 4-column grid on desktop to a high-speed “Swipeable Filmstrip” on mobile, perfectly catering to Persona A’s need for speed.

• Asset Optimization & Visual Fidelity:

  • The Challenge: High-resolution lifestyle photography can slow down a site, killing conversion rates.

  • The AI Solution: I used AI-powered compression and “Contextual Alt-Text” generation. For every product image, the AI generated descriptive metadata that helps search engines (SEO) and screen readers understand the art. This ensured the site was lightning-fast (under 1-second load time) while remaining a visual feast.

The Final Result: The outcome is a high-performance, 2026-ready digital flagship. By merging my Human Creative Direction with AI Technical Precision, I delivered:

100% Accessibility Compliance (WCAG 2.1 Level AA).

Seamless Multi-Device Experience that feels custom-built for every screen.

A 40% Reduction in Production Time, allowing the brand to launch their new collections weeks ahead of schedule.

The UI was designed to be responsive to all device sizes.

Digital devices have become a part of our lives. These days you might see a family with either a desktop, a tablet or a mobile phone within reach; often a combination of all three.

The mobile version is simply a responsive version of the desktop, with all the same bells and whistles that make it a delight to use.