Client AI Portfolio - Conversational Concept

Executive Summary

• Designed a chat-style portfolio so recruiters can ask questions (About, Experience, Availability) or skim compact project cards (short blurb + optional Demo/Repo).
• Introduced an AI-ready chat box: works today with guided prompts + scripted answers, and can plug into an LLM later without UI changes.
• Accessibility was first-class: high contrast, keyboard operation, visible focus, and reduced-motion support (AODA / WCAG 2.0 AA oriented).

• Role: Freelance UI/UX Designer; Accessibility Tester
• Deliverables: Lo-fi wireframes (Balsamiq), hi-fi flows (Figma), chat UI model, a11y acceptance criteria, developer handoff notes
• Accessibility: Designed to conform to WCAG 2.0 Level AA (AODA); validated keyboard/focus patterns and reduced-motion behavior
• Timeline:
  • Wireframes (Balsamiq): 2025-09-03
  • Project hiatus: 2025-09-04 → present (awaiting client content/brand assets)
  • Hi-fi: TBD
  • Accessibility review: TBD
• Links: N/A

Context & Objectives

Client context The client needs to communicate credibility in seconds—fast access to resume, a concise picture of experience, and easy contact—without deep reading.

• Faster answers: guided prompts for “About me,” “Tools,” and “Availability.”
• Compact projects: small cards with a one-line summary and optional Demo/Repo link.
• Accessibility by default: predictable headings/landmarks, visible focus, and non-color cues.

AI Chat Box

• Prompt chips (About · Experience · Availability · Projects · Resume) populate the input with a suggested question.
• Scripted answers render as chat bubbles with scannable subheads and links (resume, featured projects).
• Free-text input is enabled; unknown queries fall back to a helpful menu (“You can ask about…”) instead of dead-ends.

• Same interface; swap the answer source to an API.
• Content model supports summarization: short bios, one-line project blurbs, tags, and canonical links for grounding.
• Safety & clarity: an “About summaries” note explains that generated answers are derived from on-page content.

• Keyboard: Tab to focus input; Enter sends; Shift+Enter inserts a newline; Esc clears suggestion.
• Announce replies: new assistant messages use aria-live="polite" for screen readers.
• Landmarks: <main> contains both chat and the project list; chat header is labeled (“Ask about [user]”).
• Focus: focus returns to the input after send; visible focus rings throughout.
• Reduced motion: typing indicators and scroll-to-latest respect prefers-reduced-motion.

Wireframing & Prototyping

• Right-rail prompts reduce cognitive load and route to key answers quickly.
• Dual entry paths: conversational prompt chips and standard nav (Projects/Resume) for familiar scanning.
• Compact project cards: title + short blurb + Demo/Repo link—keeps the page light and scannable.
• Accessible defaults: large targets, visible focus, logical tab order, reduced-motion awareness.

• 
  Balsamiq v4 — chat-focused layout with guided prompts and compact project cards.

Outcome & Next Steps

• Alignment on chat-first discovery with compact project cards and an AI-ready chat box for speed.
• Next: prepare hi-fi prototype, finalize brand visuals, expand the component library, and hand off for development with the established WCAG 2.0 AA acceptance criteria.

Status: On hold pending client content. Design deliverables are production-ready; development can resume immediately after asset delivery.