AI Usage Summary

How AI supported the portfolio process.

We used AI as a supportive tool for drafting, refining, summarising, and structuring content during the portfolio process.

AI Usage Summary
How AI supported the portfolio process.
AI usage icon

We used AI as a supportive tool for drafting, refining, summarising, and structuring content during the portfolio process. AI did not generate any core design decisions, user research findings, or evaluation conclusions - all of those came directly from our team's primary work.

How AI supported specific parts of the portfolio:

Portfolio section How AI helped Team review action
Motivation & Research Summarised key points from our notes into draft paragraphs Rewrote to ensure accuracy and original voice
User Requirements Suggested clearer phrasing for requirement statements Checked against original user data
Ideation & Alternatives Generated alternative descriptions of design choices Selected the most accurate version
Evaluation & Reflection Provided sentence-level grammar and clarity suggestions Edited to match our actual testing experience
References Formatted citations consistently Verified each source manually

What AI did not do:

  • Generate persona details
  • Write usability testing findings or conclusions
  • Make decisions about design alternatives
  • Create any core logic or structure without human approval

Every AI-generated suggestion was reviewed, edited, and approved by at least one team member before inclusion. The final portfolio represents our own work, with AI used only as a writing and organisational aid.

AI Tools Used

Which AI tools we used and how they contributed.

This table records the main AI tools, their purposes, and the way they supported the portfolio work.

AI Tools Used
Which AI tools we used and how they contributed.
AI tools icon
Tool Main use Notes
ChatGPT Code generation, image prompt writing, layout planning, reflection drafting Used to generate interactive feature code, write prompts for image generation tools, refine reflection language, and suggest portfolio structure alternatives.
Codex Code completion, debugging, and logic assistance Helped complete repetitive code blocks, suggest function implementations, and fix syntax errors during web prototype development. All generated code was manually reviewed and tested.
Deep Seek Text refinement, wording optimisation, layout structure Used to polish section descriptions, improve sentence clarity, and reorganise content flow across portfolio sections. Particularly helpful for making technical descriptions more readable.
Doubao Image generation, image enhancement, and visual cleanup Generated conceptual visuals for the portfolio and helped improve existing images through brightness, contrast, and quality adjustments for a more professional look.
Jimeng Video generation for short clips Generated short animated clips to demonstrate user journey moments in the video demo, which were then edited into the final teaser video.
NotebookLM Image references, colour palette suggestion, and layout inspiration Used to explore colour scheme ideas and layout directions that helped guide the portfolio visual design and section presentation.

All AI-generated content including code, images, and text was reviewed, edited, and approved by the team before inclusion. No core design logic or user research was generated by AI.

AI Reflection

What we learned from using AI.

We reflected on both the benefits and limitations of AI assistance while keeping human judgement in control of the final output.

AI Reflection
What we learned from using AI.
AI reflection icon

What worked well

AI significantly accelerated our workflow in several concrete ways. For early drafts, tools like ChatGPT and Deep Seek helped us quickly generate multiple versions of section descriptions, allowing the team to compare different tones and structures before settling on a final direction. When polishing language, AI was particularly useful for rephrasing ambiguous sentences, fixing grammatical errors, and ensuring consistent terminology across the portfolio.

For visual content, Doubao and NotebookLM enabled us to generate concept images and colour mood boards without spending excessive time searching for stock assets. This allowed us to focus more attention on the core design logic and user research. In the development phase, Codex helped complete repetitive code patterns and suggest debugging fixes, which reduced manual coding time.

What we learned

The most important lesson was that AI should support the team rather than replace human thinking. While AI-generated suggestions were often helpful, they were never perfect. For example, AI-generated text sometimes sounded polished but lacked accuracy or missed important context from our actual user research. Similarly, AI-generated images often required manual adjustments (e.g., removing watermarks via Doubao, adjusting colours, or cropping) to fit our design requirements.

We also learned that effective AI use requires clear prompting and iterative refinement. The first output was rarely usable, so we needed to test different prompts, compare results, and combine the best parts from multiple generations. Every AI-generated output - whether code, text, or image - was reviewed, edited, and approved by at least one team member before inclusion.

Limitations we encountered

Despite its benefits, AI had clear limitations. Image generation tools sometimes produced visuals with incorrect details or unnatural compositions, requiring additional editing or regeneration. Code generation tools occasionally introduced logic errors or used outdated syntax, which meant we had to manually debug and verify every code snippet. Additionally, AI-generated text could feel generic or overly formal, so we always adapted it to match our team's authentic voice.

Our approach to responsible AI use

To ensure academic integrity and follow the course policy, we adopted a structured approach:

  • AI was never used to generate core design logic, user research findings, or evaluation conclusions - these remained entirely our original work.
  • Every AI-generated image includes a caption such as "Image generated via Doubao".
  • All AI tools used are documented in the AI Tools table and reference list.
  • We maintained an /ai-logs folder in the system repository recording key prompts used during development.

Overall, all AI-generated content - code, images, and text - was reviewed, edited, and approved by the team before inclusion.

AI Citation

AI tools and references.

This section lists the AI tools and citation notes used for transparency and portfolio documentation.

Reference List
AI tools and figure citations used in the portfolio.
  1. [1] ChatGPT, GPT-4o, v1.0, accessed on 2026-04-20, available at https://chatgpt.com/. Used for refining portfolio section wording, improving grammar, planning page structure, and writing image-generation prompts.
  2. [2] Codex, GPT-5 Codex, v1.0, accessed on 2026-05-03, available at https://openai.com/codex/. Used for generating and debugging HTML, CSS, and JavaScript for the interactive portfolio website.
  3. [3] DeepSeek, DeepSeek-V3, v1.0, accessed on 2026-04-25, available at https://www.deepseek.com/. Used for rewriting long descriptions, polishing reflection paragraphs, and improving readability across the portfolio.
  4. [4] Doubao, Seedream image generation model, v1.0, accessed on 2026-04-27, available at https://www.doubao.com/. Used for generating and enhancing the Chloe student persona visual used as Fig.1.
  5. [5] Doubao, Seedream image generation model, v1.0, accessed on 2026-04-27, available at https://www.doubao.com/. Used for generating and enhancing the Dr. Lin teacher persona visual used as Fig.2.
  6. [6] ChatGPT, GPT-4o, v1.0, accessed on 2026-04-28, available at https://chatgpt.com/. Used for organising the integrated user journey map content and improving labels used as Fig.3.
  7. [7] ChatGPT, GPT-4o, v1.0, accessed on 2026-04-29, available at https://chatgpt.com/. Used for refining the captions and design direction for the Crazy Eights low-fidelity sketches used as Fig.4-Fig.11.
  8. [8] Doubao, Seedream image enhancement model, v1.0, accessed on 2026-04-30, available at https://www.doubao.com/. Used for improving brightness, contrast, and visual clarity of portfolio images before inclusion.
  9. [10] ChatGPT, GPT-4o, v1.0, accessed on 2026-05-06, available at https://chatgpt.com/. Used for refining the User Feedback image used as Fig.13.
  10. [11] ChatGPT, GPT-4o, v1.0, accessed on 2026-05-01, available at https://chatgpt.com/. Used for refining the evaluation summary wording and presentation structure used as Fig.18.
  11. [12] Jimeng, video generation model, v1.0, accessed on 2026-05-02, available at https://jimeng.jianying.com/. Used for generating short video-demo materials showing the user journey and interaction scenario.
  12. [13] NotebookLM, Gemini-based NotebookLM model, v1.0, accessed on 2026-05-02, available at https://notebooklm.google.com/. Used for exploring image references, colour palette ideas, and layout inspiration for the portfolio design.