Portfolio chatbot eLearning prototype

Build a portfolio chatbot as a product experience.

This self-paced prototype walks you through why a portfolio chatbot can help, how to design one around real visitor questions, how to create keyword-routed answers, and how to evaluate your finished chatbot with five criteria.

Start the course Back to ID Tools & Resources

FormatWeb-based eLearning prototype

PracticeScenarios, routing checks, builder, feedback

OutputA downloadable chatbot file

EvaluationFive product-minded criteria

Intro

Use this as a guide, not a single right way.

This is not an AI chatbot build guide. It does not teach you to train a model, connect an LLM, or launch a live AI assistant. It is a practical guide for designing and prototyping a portfolio chatbot experience that routes visitors through intent, keyword groups, answer mapping, fallback behavior, and links to relevant proof.

You will see one way to frame the product problem, map likely visitor questions by intent, group keywords, write grounded answers, plan fallback responses, connect answers to work samples, build a simple rules-based or keyword-routed prototype, and evaluate whether the experience is useful. Your own bot can be simpler, deeper, more technical, more conversational, or more focused depending on your audience and goals.

What this course can help you do

Think like a product designer, identify useful bot topics, draft grounded answers, connect people to proof, and test whether the experience works across desktop and mobile.

What you should still experiment with

Your own content structure, tone, supported questions, fallback behavior, privacy needs, accessibility checks, and the amount of guidance your visitors actually want.

Lesson 1

Start with the product problem.

A portfolio chatbot should not exist because chatbots are trendy. It should solve a real visitor problem.

In this course, the problem is portfolio discovery. A visitor may not know where to start, what proof matters most, or which work sample answers their question. A chatbot can act as a guided layer that helps people move from intent to evidence.

Quick-scan visitor need

Fast clarity: who you are, what you do, what tools you use, where to find examples, and why your work is credible.

Deeper-context visitor need

Meaningful proof: how you think, how you make decisions, how your work connects to outcomes, and whether the experience is useful beyond one page.

Scenario practice: The visitor has 90 seconds.

A visitor opens a portfolio and asks, “What should I review first?” What should the chatbot do?

The five criteria you will use throughout the course

Purpose and audience fit

Does the bot solve a real visitor need?

Answer quality and trust

Are answers grounded and honest?

Routing and recovery

Do likely questions reach the right answer?

Proof and navigation

Does the bot connect to evidence?

Responsive and accessible experience

Does it work well on mobile, desktop, keyboard, and screen readers?

Lesson 2

Design the answer base before the interface.

A helpful chatbot starts with the questions people are likely to ask and the proof you want it to surface.

Quick-scan visitor questions

What does this person do?
Where should I start?
What tools do they use?
What kind of work do they create?
Which samples should I review first?

Deeper-context visitor questions

How does this person approach ambiguous problems?
How do they work with partners and subject matter experts?
How do they connect work to outcomes?
Can they support technical or workflow-heavy content?
How do they design for scale?

Practice: Choose the strongest answer.

The visitor asks, “Why did you build this chatbot?” Which answer is strongest?

Answer-base template

Each answer should include intent, a grounded response, proof paths when they are useful, safe fallback language, and a quick risk check.

Example answer base entry

Intent: What does Amanda do?

Keywords: what do you do, product learning, customer education, instructional design, portfolio overview.

Answer: Amanda designs customer education and product learning experiences that make complex SaaS workflows easier to understand and apply.

Proof path: Work Samples, Toolkit, Resume.

Fallback: If the question is too broad or outside this intent, guide the visitor back to supported topics: “I can help with Amanda’s work samples, toolkit, product learning approach, accessibility, measurement, or contact information.”

Risk check: Does not overclaim. It connects to actual portfolio positioning and gives the bot a safe recovery path.

Downloadable planning workbook

Complete the mapping workbook before you add code. It gives you separate tabs for site inventory, answer-base writing, keyword routing, fallback boundaries, and final evaluation.

Visitor need	Example question	Intent	Grounded answer	Proof path	Fallback boundary
Quick clarity	What do you do?	Overview	A short answer that states your role and value in plain language.	About, work samples, resume	Redirect unrelated personal questions to supported topics.
Find relevant examples	Can I see examples?	Work sample discovery	Point to the strongest examples and explain what each one shows.	Work Samples section	Do not invent work that is not on the site.
Unsupported question	What is your favorite pizza?	Fallback	Apologize briefly and list supported topics.	Suggested questions, site navigation	Do not make up an answer just to be conversational.

Download mapping workbook

Lesson 3

Route likely questions and recover cleanly.

Keyword routing works when it is specific enough to catch real questions without sending people to the wrong answer.

A simple portfolio chatbot can use keyword groups such as resume, tools, customer education, AI tools, work samples, accessibility, and measurement. For short words like “AI,” standalone matching matters because the letters can appear inside unrelated words.

Routing practice: A visitor types “AI.”

What should happen?

Fallback pattern

When the chatbot does not have a specific answer, it should apologize briefly, explain its scope, and offer helpful next steps.

Fallback: “Sorry, I do not have a specific answer for that yet. I can help with work samples, tools, customer education, product learning, accessibility, measurement, or contact information.”

Show the product thinking behind fallback design

A fallback is part of the experience, not an error message. It protects trust, clarifies the bot’s scope, and nudges the visitor toward supported questions.

Lesson 4

Build your chatbot starter file.

Use this builder to create a starter chatbot file. It is intentionally simple so you can read, revise, and add it to your own site.

Before you build

At this point, you should already have a small content map. The builder below is for turning one mapped answer and one fallback into a working starter file. The full chatbot should come after you define the categories, answers, fallbacks, proof routes, and risk checks in the workbook.

Download mapping workbook

How the workbook connects to the code

The spreadsheet is the planning layer. The code is the display layer. You do not need to understand every line of JavaScript before you can plan a strong chatbot, but you do need a clear map before the code can behave well.

Workbook column

Intent becomes the answer category.
Keywords become the words or phrases the bot listens for.
Grounded answer becomes the message visitors see.
Proof path becomes a link, button, or suggested next step.
Fallback boundary becomes the safe response when the bot cannot answer.

Code location

HTML controls the visible panel, buttons, and text fields.
CSS controls the colors, spacing, layout, and mobile behavior.
JavaScript controls keyword matching, answer selection, fallback behavior, and downloads.
The safest place to add a simple widget to a static site is usually near the bottom of the page before the closing body tag.

See how your worksheet becomes chatbot behavior

Yes, this is the part that eventually becomes code, but the workbook itself is not code. Think of one workbook row as a recipe for one chatbot answer.

Workbook row

Intent: Work samples
Keywords: examples, samples, portfolio
Answer: Start with the work samples section.
Proof path: Work Samples section or #work-samples

What the chatbot does with that row

When someone types a question like “Can I see examples?” or “Where is your portfolio work?”, the chatbot checks the keywords, chooses the Work samples answer, shows the answer text, and points the visitor to the proof path.

The visitor never sees the spreadsheet. They only see the chatbot response. The spreadsheet helps you decide what the response should be before you, a developer, or an AI tool translates it into the JavaScript answer list.

Two build paths: with AI help or without AI help

No-AI path

Fill out the workbook manually.
Use the Code Handoff tab to decide where each field belongs.
Copy one answer into the builder below.
Download the starter file.
Ask a developer, technically comfortable reviewer, or your future self to compare the code to the workbook.
Run the testing checklist before publishing.

AI-assisted path

Fill out as much of the workbook as you can first.
Use the AI Prompt Pack tab to ask ChatGPT, Claude, DeepSeek, or another LLM to review the map.
Ask the tool to identify gaps, risky claims, missing fallbacks, and weak proof paths.
Have it explain where each workbook field belongs in the starter code.
Manually verify every answer, link, and claim before publishing.

AI can help with drafting, checking, and explaining. It should not invent your experience, publish unreviewed code, or decide what is true about your work.

What you need before testing or deployment

Content

Completed workbook, answer base, proof paths, fallback language, and suggested questions.

Site access

An existing portfolio site, a duplicate test page, or a simple static HTML page where the chatbot can be added.

Site platform

Your website builder, content management system, or static-site hosting service. Use the one that already runs your site when possible.

Testing plan

A local browser test, mobile check, keyboard check, contrast check, link check, fallback test, and a preview or test URL from your site platform.

Review resources Download checklist workbook

Preview

Portfolio guide

What do you do?

I design product learning and customer education experiences that make complex workflows easier to understand and apply.

Proof: View work samples

What is your favorite pizza?

Sorry, I do not have a specific answer for that yet. Try asking about work samples, tools, product learning, accessibility, measurement, or contact information.

Generated code preview

The downloaded file includes this same answer pattern. You can change the answers, add keywords, and paste the widget into your site.

Code preview moved to a pop-up.

Open it when you want to inspect the starter HTML without making this lesson stretch sideways.

Lesson 5

Evaluate the chatbot with five criteria.

The final check asks you to evaluate your own chatbot as a product, not just a code snippet.

1. Purpose and audience fit

2. Answer quality and trust

3. Routing and recovery

4. Proof and navigation

5. Responsive and accessible experience

Your feedback will appear here.

Score each criterion, then get targeted feedback.

Next step

Use the resources section below the course for planning, AI-assisted or no-AI build paths, implementation, testing, accessibility, and site publishing references. Start with the workbook, then move to code only after your answer base, routing, proof paths, and fallback behavior are clear.

Go to resources Download mapping workbook

Back to ID Tools & Resources

Return to the main portfolio to browse the reusable tools, frameworks, and resources created for learning designers and learning teams.

Back to ID Tools & Resources

Resources

Planning, AI support, testing, and site publishing references.

Start with the mapping workbook before you add HTML, CSS, or JavaScript. Then use the code handoff, test checklist, and resource links to build a safer version for your own site.

Download: chatbot mapping workbook

An editable spreadsheet with instructions, definitions, site inventory, visitor questions, answer-base planning, keyword routing, code handoff, AI prompts, test checklist, and final evaluation criteria.

Download: starter kit ZIP

A simple HTML, CSS, and JavaScript starter pattern to use after your answer base and routing plan are mapped.

Course section: how the workbook connects to code

Use this section to understand how intents, keywords, answers, proof paths, and fallbacks become a working chatbot.

Example hosting docs: Netlify static-site deploys

Netlify is one example of a site hosting and deployment platform. Use this only if you choose Netlify, or look for the equivalent publishing instructions for your own site platform.

Example hosting docs: GitHub Pages

Use this if your portfolio files live in GitHub and you want to publish a static site from a repository.

Example hosting docs: Cloudflare Pages direct upload

Use this as another example of a static-site hosting service that can publish uploaded site files.

MDN: querySelector

Use this to understand how JavaScript selects page elements.

MDN: addEventListener

Use this for button clicks, form events, and interactions.

WCAG 2.2 Quick Reference

Use this for accessibility checks, including focus, contrast, and target size.

WebAIM Contrast Checker

Use this to check readable text and button contrast.