Contextual AI Layer

Contextual AI Layer hero visual
Role
Sr. Product Designer
Core activities
AI UXAgentic WorkflowsContent Ops
Period
2025
Product Tags
ScomplerAgentic WorkflowsAI UX

Context

Scompler is a workflow-heavy B2B SaaS platform for strategic content orchestration. It helps teams plan and govern content from strategy through execution.

Product, segment and users

  • Strategy layer: Topic briefing → Story structure → alignment to strategic parameters and personas/target groups.
  • Execution layer: Articles → Multi-post → channel-specific versions such as social posts, blog posts, newsletters and press releases.
  • Planners and managers define direction, structure, timing and strategic consistency.
  • Editors, creators, copywriters and content specialists write, rewrite, adapt, translate and prepare channel-ready content.

Team setup

A cross-functional product team of product management, engineering and design worked with customer-facing teams and leadership. Customer input came from survey signals and usability testing sessions on interactive prototypes.

Scope and timeline

Discovery and framing → opportunity shortlist → clickable prototypes → usability testing → iteration → implementation handoff and delivery, from 2024 to 2025.

Problem and success criteria

Marketing teams struggled to align content with strategy across Topic → Story → Article and to adapt content to channels efficiently, while competitors increasingly used AI as a productivity differentiator.

Pain points

  • Strategy alignment did not scale: teams manually reviewed multiple screens and depended heavily on individual expertise.
  • Channel adaptation was repetitive work: editors transformed similar ideas into channel-specific formats, tones and constraints, increasing inconsistency.
  • Generic chat in a B2B product felt disconnected from real work, reducing trust and control.

Root causes

  • A complex Topic → Story → Article → Multi-post model distributed context across briefings, personas, content models, strategy parameters and custom fields.
  • Dense interfaces risked cognitive overload when AI entry points and guidance were unclear.
  • Users could not trust generic outputs when the AI context was invisible.

Success criteria

  • Faster alignment checks and improvement actions at Story level, with fewer steps to create channel-ready variants.
  • Frequent AI tool usage on key screens and sessions that result in Apply rather than read-only output.
  • Improved discoverability, clearer command naming and reduced result overload through progressive disclosure.

Complexity map

The assistant had to work across the strategy and execution layers without disrupting an established, data-dense product workflow.

Domain and workflow map

  • Topic: briefing, strategic parameters and target groups/personas.
  • Story: narrative, alignment to Topic and timing planning.
  • Article and Multi-post: writing and channel adaptation.

Real-world constraints

  • Legacy, data-dense UI; complex permissions and roles; multilingual quality expectations; MVP timelines.
  • Apply actions must respect edit rights, while view-only users still need useful read-only suggestions.
  • The solution had to handle incomplete metadata, varied content types, custom fields and different configuration setups.

Risk areas

  • AI too hidden → low adoption.
  • AI too prominent → an overwhelming interface.
  • Generic output → reduced trust.
  • No clear apply flow → productivity collapses into copy/paste.

Approach

The process moved from discovery and framing through prototype-led usability testing to an implementation-ready interaction model.

Discovery

  • Personas and JTBD mapping highlighted two major jobs: aligning content with strategy for planners, and creating or adapting content efficiently for editors.
  • Customer feedback showed that adaptation and improvement guided by existing context were more valuable than blank-page generation.
  • Competitive research showed that AI was becoming expected; differentiation depended on context and workflow integration.

Hypotheses

  • The highest value comes from context-aware alignment checks and recommendations using structured strategy inputs already in the system.
  • Adoption improves when AI is embedded where work happens—in objects, fields and forms—not isolated behind a separate chat.
  • Trust improves when users can control context inputs and turn output into an action through Apply or Replace.

Iteration loops

Clickable prototypes → usability testing → synthesis → refined IA, command naming, progressive disclosure and apply flows → updated prototypes → implementation handoff.

  • Too many options and unclear navigation → a clickable AI menu, fewer steps and clearer navigation.
  • Unclear labels and commands → names based on user intent, with hints and examples.
  • Overwhelming or generic-feeling suggestions → summary-first results with details on demand.
  • AI disconnected from text fields → inline actions plus Apply or Replace.

Key decisions

Each decision balanced user control, workflow relevance and scalability across a complex product surface.

Contextual tools instead of one global chat

The assistant surfaces relevant tools on Topic, Story, Article and Multi-post levels, plus inline tools in fields and forms. This was more complex than a global chat, but made the AI relevant where users already work.

Adapt, improve and check before generating from scratch

The MVP focused on transformation and validation tasks. This matched user jobs, used the product’s structured metadata and supported alignment checks, rewriting, translation and channel-specific transformation.

Explicit, controllable context

A settings step lets users choose attachments, descriptions, personas, models or classes, strategy parameters and custom fields. The extra UI created better relevance, trust and explainability.

Apply as a first-class outcome

One-click Use this text, Replace current text and Add as addition actions—together with confirmation states—kept work in-flow instead of falling back to copy/paste.

Progressive disclosure

Summary-first results with an option to show more details reduced cognitive load and let users build trust step by step.

A scalable interaction model

A consistent assistant surface introduced narrow and wide modes, pre-defined tools, recent chats, new chat, active context selection and inline AI in fields and forms.

Solution

I shipped a context-aware AI Assistant integrated across Topic, Story, Article and Multi-post, including pre-defined AI tools, recent chats, new chat, narrow and wide panel modes, and one-click apply through auto-insert or auto-replace.

Where the assistant lives

  • A side panel that expands and collapses between narrow and wide modes.
  • Tools relevant to the current object: Topic, Story or Article.
  • Inline tools inside text fields and forms for quick rewriting and translation.
  • Recent chats and new chat for continuity when switching tasks.

Planners: strategy alignment on Story level

  • Check Story alignment with the Topic briefing: select the inputs to validate, review a summary, drill into missing information and next steps, then apply fixes in place.
  • Suggest good timing for a Story based on relevant real-world events, including regional context.
  • Compare a Story with other stories in its Topic to find strategic drift, duplication or inconsistencies.

Editors: channel-specific content generation

  • Choose Create post text, select sources such as text, attachments, personas, models, strategy parameters and custom fields, then add tone, goal and constraint instructions.
  • Generate text, iterate with another option and apply it through Use this text or Replace current text, with confirmation.

Editors: inline text editing and multilingual work

  • Selected text exposes inline rewrite, correct errors, simplify language and translate commands.
  • Outputs support replace or add actions, confirmation, and multiple options for controlled iteration.

Impact

Post-launch metrics were not available because I left the company after usability testing and implementation. The impact below is expressed through validated adoption and workflow proxies.

  • De-risked adoption by surfacing and addressing discoverability, confusing naming, overload and disconnected-panel behavior in usability testing.
  • Improved workflow integration by designing AI actions as apply or replace with confirmation, not copy/paste.
  • Increased perceived control and explainability through context selection and object-level tools.
  • Validated that users value adaptation and alignment more than blank-page generation.

Reflection

The work turned an abstract AI opportunity into a concrete, testable and implementation-ready workflow layer.

What worked

  • Treating AI as a workflow layer rather than a standalone chat feature.
  • Designing for trust and control through context selection, apply options, confirmation states and progressive disclosure.
  • Using prototypes and usability testing to make the AI experience concrete and shippable.

Challenges

  • Early prototypes risked too many options and unclear navigation; an AI interaction model must stay strict to avoid adding complexity.
  • Generic output and multilingual quality expectations required stronger guardrails and clearer context.

What I would do differently

  • Define the product-wide AI interaction model earlier: entry points, naming, history, apply and undo patterns.
  • Instrument analytics before release—from opening a tool to running, applying and undoing—to capture adoption evidence and iterate post-launch.

Featured Projects

My product design cases from the last few years.