Enter the password to continue.
IBM Client Engineering's Innovation Designers run rapid, roughly four-week design pushes for clients exploring watsonx use-cases, and two patterns kept coming up on repeat: a conversational assistant, and a content-summarisation workflow. This is how two reusable Figma assets, built on IBM's Carbon for AI components, gave the whole practice a documented starting point for both instead of a blank canvas every time.
Client Engineering's Innovation Designers run short, high-pressure design pushes for IBM clients exploring watsonx use-cases. Two problems kept recurring across engagements: a conversational assistant or chat interface, and a workflow for summarising long or unstructured content.
Each time, designers were assembling the same Carbon for AI chat components, or the same multi-step summarisation flow, from scratch, with no shared reference for interaction states like hover, disabled, AI-processing or error, and no guidance on which chat layout actually fit the use-case.
Rebuilding it every time cost design hours the four-week timeline didn't have, produced inconsistent quality across engagements, and left Technology Engineers inheriting screens that hadn't been thought through past the happy path.
UX & interaction designer, mapped the core user flow for each pattern end to end: the assistant's message, upload and source-citation flow, and the summarisation wizard's create-to-review journey.
Designed and annotated every key screen and component state, active, hover, disabled, AI processing, AI present, error, loading/skeleton, so Technology Engineers inherited designs that were actually feasible to build, not just a happy-path mockup.
Design system author, built both assets on IBM's Carbon for AI component library rather than one-off custom components, so anything assembled from the template inherited Carbon's already-validated states and accessibility.
Wrote the "when to use," "why use it" and "how to use" guidance baked into each file, including the decision logic for chat placement, full-screen versus overlay versus push, and left versus right positioning.
Looked at recurring watsonx use-cases across engagements and identified two patterns worth turning into reusable assets.
Defined the core user journey for each pattern end to end, before touching any component.
Built every screen from Carbon for AI components, annotating states beyond the happy path.
Wrote the read me, usage guidance and layout decision logic baked directly into each file.
Shipped both assets into Client Engineering's shared Figma Asset Library for reuse across engagements.
The Agent Assistant asset is for any project with a chat or assistant interface. It's a simplified version of IBM's deeper Chat Component Library, Carbon for AI, built so Innovation Designers could put together something quickly and customised to a client without first mastering the full library.
A shift scheduler assistant, built from the template: a welcome message with quick starters, watsonx retrieving and sourcing a patient record, contextual follow-up actions, an editable-details flow with confirmation, and a full reference list pulled from the record's supporting documents.
When it's appropriate
Best used when chat is the experience itself, the primary interaction point, with the spotlight leveraging screen real estate a traditional chat lacks. This is the layout the template itself uses.
Justification
The chat prompt carries the entire interaction; nothing else on screen is competing for attention.
When it's appropriate
An overlay will likely obstruct page content, so it suits chats that are global in nature rather than tied to what's on screen. Triggered from an entry point available across the product, the UI shell's nav bar, a keyboard shortcut, a launcher, or a toast.
Justification
Left positioning when the chat has a direct impact on visible UI elements; right positioning when its role is more passive and supporting.
When it's appropriate
A push panel lets the user keep working with page content while chatting, an advantage when the conversation references or interacts with the UI itself.
Justification
Same left/right logic as overlay: left for direct UI impact, right for a supporting role.
Designed for any watsonx project that generates summaries of text-based input, long documents, meeting notes, customer queries, or social content. Every screen follows the same layout: platform and project details on the left, editable content on the right.
User starts a new project.
User supplies the knowledge base, file uploads, or copied-in text.
User sets requirements: tone of voice, min/max word count, one summary or several.
User reviews the generated summary and edits it if needed.
User reviews a read-only version and exports, copies or prints it.
A ministerial briefing assistant, built from the template: creating a new project, providing the source documents, defining tone and length, generating a summary with inline source references, and reviewing the finalised, exportable version.
Both assets include an annotated frame documenting every state a Technology Engineer would need to build against, not just what the screen looks like when everything goes right.
