Course information
Grade 9 · Portfolio design

AI portfolio prototype sprint

Build a clear journey through your HTML portfolio, test it with another student, and use what you observe to improve it.

For this lesson

Open student handout (Word)All Grade 9 handouts →

3 pages · Use the handout for the complete instructions, examples and response spaces.

Related assignments

  • Assignment 2. Portfolio Prototype SprintDue 14 Sept 2026 at 09:00 · China time

    Follow the linked handout and the submission instructions in Toddle.

    Assignment on the calendar →

Submit in Toddle. The assignment instructions above specify what to hand in.

Work through the lesson

1. Back up your portfolio

Duplicate your existing website folder before making changes. Give AI the current code or files. Explain that you make the UX and design decisions and AI implements them in HTML, CSS and JavaScript. Ask it to identify the existing pages, navigation and sections before changing anything.

2. Make the user journey work

Your visitor should be able to arrive, understand who you are, find your work, inspect one project, and return. Check the journey Home → Projects → One project → Back or Home. Identify and build any missing parts.

3. Build the portfolio essentials

Make the homepage communicate who you are, what you make or do, and where visitors should go next. Include at least three projects; placeholders are acceptable at this stage. Give at least one project a detail view with its title, problem, process, result and images or placeholders. Keep Home, Projects and About navigation consistent so visitors do not get trapped.

4. Add one useful interaction

Choose one interaction that improves the portfolio experience, such as project filtering, an expandable process section, an image gallery, a before-and-after comparison, or previous/next project navigation. Tell AI exactly what the visitor should be able to do and test what it builds.

5. Run a silent usability test

Swap computers. Ask the tester: “Find what you think is my strongest project, learn what I did, then return to the homepage.” Say nothing while they try. Record their first click, hesitation or confusion, unexpected clicks, and whether they completed the task.

6. Direct an evidence-based revision

Describe the observed problem precisely to AI and ask for a focused change. For example, if a tester clicks project titles because they do not realize the images are links, make the entire project card clearly clickable. Test the change again.

7. Save evidence of the change

Save before and after screenshots. Finish “My user …, so I changed …” to explain how the test influenced your design.

Keep this evidence

  • A working Home → Projects → Project → Return journey
  • One useful interaction
  • Observed user-test behaviour
  • Before and after screenshots
  • One sentence connecting user evidence to a revision
Read the handout text online

For diagrams, visual examples and the full layout, open the handout above.

AI PORTFOLIO PROTOTYPE SPRINT

GRADE 9 DESIGN • UX + HTML • BUILD / TEST / ITERATE

MISSION: Turn your existing HTML portfolio into a clear user journey, test it on a real person, then direct AI to fix one observed UX problem.

BUILDCONNECTTESTITERATE

YOU = UX DESIGNER / PROJECT MANAGER AI = WEB DEVELOPER

ATODAY'S USER JOURNEY

A portfolio is not just a collection of pages. It is a sequence of things a visitor tries to do.

1. ARRIVEWho is this?2. FIND WORKWhere are the projects?3. INSPECTWhat did they make?4. RETURNCan I navigate back?
Can your website already complete this whole journey? What is missing or weak? ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________
BBACK UP + BRIEF YOUR AI DEVELOPER

FIRST: duplicate your entire website folder. Never experiment on your only copy.

Backup folder name: ________________________________________________________________________

Suggested opening instruction to AI:

I am designing a personal portfolio website and you are my web developer. I will make the UX and design decisions; you will implement them in HTML, CSS and JavaScript. Here is my existing website. Do not redesign it yet. First identify the existing pages, navigation and major sections, then wait for my instructions. ________________________________________________________________________
CBUILD THE PORTFOLIO EXPERIENCE

Use AI to implement what your current site is missing. You decide the requirements.

HOMEVisitor understands who you are, what you do, and where to go next.
PROJECTSAt least 3 project cards with image/placeholder, title and short description.
PROJECT DETAILAt least one project shows the problem, process, result and evidence/images.
NAVIGATIONHome • Projects • About. The user must not get trapped.
What is the FIRST thing you need AI to build or improve? ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________
Write the instruction you will give AI. Be specific about what the USER should be able to do. ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________
DADD ONE USEFUL INTERACTION

Add ONE interaction that genuinely improves the portfolio. No random fireworks.

□ Project filter□ Expandable process□ Image gallery
□ Project preview/modal□ Interactive timeline□ Next/previous project
□ Before/after view□ Category buttons□ Other: __________
My interaction should help the user by… ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________
EREAL UX TEST — DO NOT HELP THE USER

Swap computers. Give your tester ONE task:

FIND WHAT YOU THINK IS MY STRONGEST PROJECT, LEARN WHAT I DID, THEN RETURN TO THE HOMEPAGE. ________________________________________________________________________

The website owner stays silent. Observe behavior instead of explaining.

What did they click first? ________________________________________________________________________
Where did they hesitate? ________________________________________________________________________
Did they click something that was not clickable? ________________________________________________________________________
Did they get lost? Where? ________________________________________________________________________
Did they complete the task?□ YES □ NO
FDIAGNOSE → DIRECT AI → FIX

Do not tell AI 'make it better.' Use the evidence you just observed.

The UX problem I observed was… ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________
My specific revision instruction to AI: ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________

Example: “My test user did not realize the project images were clickable. Make the entire card clickable and add a subtle hover response. Do not otherwise change the layout.”

GBEFORE / AFTER EVIDENCE
BEFORE SCREENSHOTPaste screenshot hereAFTER SCREENSHOTPaste screenshot here
My user __________________________, so I changed __________________________ because __________________________. ________________________________________________________________________ ________________________________________________________________________