Back To Projects
Back To Projects

FlowSync Case Study

A design communication project focused on visualizing complex AI and blockchain interactions for educational storytelling. The goal was to develop technical storyboards and visual hierarchies that could guide illustrators and motion designers in translating abstract systems into intuitive, animated narratives.

Location:

San Francisco, CA, USA

Type of Work:

San Francisco, CA, USA

Timeline:

San Francisco, CA, USA

Overview

The FlowSync assessment was an internal creative exercise exploring how to communicate AI-driven blockchain transactions visually.The objective was to design a storyboard that could be passed to illustrators and animators—focusing on clarity, structure, and technical fidelity.The task involved transforming a dense script about on-chain AI agents, microservices, and micropayments into clear visual beats that could explain the concept without voiceover or heavy text.

Project
FlowSync Case Study
Art Director, Technical Designer, Concept Visualizer
Figma
3 hours (Assessment Challenge)
Challenge

The challenge was to illustrate how AI agents autonomously pay for and interact with microservices in real time using blockchain and stablecoins.The script outlined a continuous 5-step data flow—Request, Pay, Verify, Execute, Deliver—requiring visual pacing and hierarchy that conveyed machine-speed automation while maintaining legibility and visual simplicity.Additionally, the work had to align with a technical dark-mode aesthetic, use monospace typography, and maintain a tone suited for developer education rather than marketing.

Objectives
  • Translate complex AI and blockchain interactions into clear, sequential visual storyboards.
  • Maintain a technical, minimal aesthetic with readable line weights and structured flow.
  • Communicate narrative intent through design documentation suitable for illustrators and animators.
  • Provide motion guidance and pseudo-code elements to support educational storytelling.
  • Adapt the concept into both widescreen (16:9) and vertical (9:16) formats for presentation and social media use.
  • No items found.
    Approach

    I began by identifying the core narrative structure in the script — the autonomous data loop: Request → Pay → Verify → Execute → Deliver.
    Each beat was visualized as a modular sequence of actions between the AI agent, blockchain, and microservice.

    • Request: The AI agent initiates a data call to a sentiment analysis engine.
    • Pay: The agent sends a micropayment via its crypto wallet.
    • Verify: The facilitator confirms the payment and blockchain transaction.
    • Execute: The microservice performs the sentiment analysis task.
    • Deliver: Results are returned to the AI agent in real time.

    Visual elements included line-based systems, modular node layouts, and monochrome gradients, maintaining a “technical schematic” feel.
    I also added motion notes and lighting direction for animators, indicating when to pulse, pause, or transition camera focus between nodes.

    execution
  • Created storyboards in Figma using dark-mode frames, grid alignment, and vector icons.
  • Used thin linework and uniform stroke weights to maintain a clean technical aesthetic.
  • Incorporated monospace fonts and pseudo-code snippets to support the developer narrative.
  • Delivered a 16:9 storyboard and a 9:16 social media adaptation with simplified visual hierarchy.
  • Documented motion guidance, transitions, and callout layers for illustrators and animators.
  • Typography
    Font Selection

    Space Grotesk

    H1 Sizes

    FlowSync Case Study

    Size: Desktop:

    Tablet:

    Mobile:

    h2 Sizes

    FlowSync Case Study

    Size: Desktop:

    Tablet:

    Mobile:

    Paragraph / Regular M

    Every interface begins with empathy. We craft experiences that connect people, simplify decisions, and enhance how users move through the world.

    Size: Desktop:

    Tablet:

    Mobile:

    Colors
    Solid
    Primary
    #122C5F
    Secondary
    #254583
    Accent 01
    #EB5C1E
    Accent 02
    #071839
    Black
    #DCDEE3
    White
    #F2F2F2
    results
  • Produced a comprehensive storyboard package and visual system that clearly communicated narrative intent to motion designers.
  • Delivered in under 3 hours, demonstrating efficiency in technical translation and art direction.
  • Praised for the balance of visual clarity, technical tone, and creative cohesion, successfully meeting all evaluation criteria: hierarchy, style discipline, and communication clarity.
  • Testimonial

    “AJ impressed us with strong creative direction and clear problem-solving. Their use of AI-assisted imagery, attention to technical detail, and thoughtful approach to color and branding showed a rare mix of creativity and precision.”— Elizabeth Kozup, Creative Director, Poley Creative

    Let’s Collaborate

    Discover More Inspiring Work

    View All
    View All

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Location:
    This is some text inside of a div block.
    Type of Work:
    This is some text inside of a div block.
    Completion Date:
    This is some text inside of a div block.
    Building Agency
    Building Agency
    Building Agency

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Location:
    This is some text inside of a div block.
    Type of Work:
    This is some text inside of a div block.
    Completion Date:
    This is some text inside of a div block.
    Building Agency
    Building Agency
    Building Agency

    OKP x Talkhouse: Hip-Hop 50 Podcast Pitch Deck

    Designed a pitch deck for OKPlayer and Talkhouse’s Hip-Hop 50 Podcast, delivering a compelling visual narrative under a tight two-day deadline.

    Location:
    New York City, NY, USA
    Type of Work:
    Art Direction & Branding
    Completion Date:
    March 21, 2023
    OkayPlayer
    Anakya Pomare
    Art Direction, Graphic Design
    iInDesign, Photoshop

    3D Fashion & AR: Lauren’s Boutique Dress Animation

    Created a high-fidelity 3D dress for digital ads and AR, using Marvelous Designer, Cinema 4D, Mixamo, and Redshift to ensure realistic fabric movement and detai

    Location:
    Woodland Hills, CA, USA
    Type of Work:
    Motion Design
    Completion Date:
    December 17, 2023
    Lauren's Botique
    T. Trammell
    Art Direction, 3D Motion Design
    Cinema 4D, Marvelous Designer

    Nike House at SXSW – 3D Concept & Branding

    Designed a 3D ‘shoebox’ store concept for Nike at SXSW, blending low-poly aesthetics with clean topology for seamless UV mapping and high-quality mockup ads.

    Location:
    Washington, DC, USA
    Type of Work:
    Motion Design
    Completion Date:
    December 30, 2023
    Nike
    Personal Exploration
    Art Direction, 3D Design
    Blender