PortfolioBot
A rule-based chatbot that introduces my background and projects.
The Project
I created a chatbot as an alternate entry point to my portfolio: a guided way to learn who I am, what I've built, and how I work.
One of my capstone assignments from the UX Writing course helped inspire this project.
I owned research, conversation design, interface design, prototyping, and testing for PortfolioBot.
Research
I researched chatbot design and use cases. The UX Writing course from Technical Writer HQ offers a number of resources, including links to chatbot examples.
There are generally two kinds of chatbots:
- Rule-based, which use pre-determined conversation scripts with limited input options.
- NLP (Natural Language Processing) chatbots, which use AI to interpret text or voice input.
I also interviewed volunteers who review/build portfolio sites. Results suggested mixed sentiment: some liked chatbots as a differentiator, while others felt they could be superfluous or slower than direct navigation.
Defining the Design
Based on research, I chose a rule-based chatbot. A full NLP system would be significantly more work-intensive and less efficient for this use case than a focused bot with specified inputs.
I focused functionality around four core portfolio areas:
- Introduction of myself
- My work and projects
- My resume/CV
- Contact information
Designing the Voice
I created a voice chart to guide content and conversation design. The main traits of the bot are approachable, professional, and knowledgeable.
The Conversation Flow
I mapped out the bot flow in Miro to function as both an interaction model and implementation script.
View the conversation flow board in Miro.
I created two versions: first a mind-map style version, then a more traditional flowchart version based on feedback.
Note: I included an invalid text path for fail-over copy practice and potential future expansion, despite the rule-based model.
Rough Sketches to Wireframes
I sketched the chatbot interface and bot/user icons. For color, I selected alternating light, comfortable greens/blues.
Prototyping with AI
As with brktm, I used AI to help quickly create a functioning prototype.
I ported Figma designs with the Figma-to-Webflow plugin and used ChatGPT to generate the code framework for bot functionality.
This process required planning, iterative prompting, and manual refinement of generated code/scripts before arriving at a fully functional scripted prototype.
Planning out the functionality and prompts...
...and getting code from ChatGPT
A section of the script in the code
As expected, I needed to tweak and edit generated code to get the exact behavior I wanted, and manually add the script in a code-readable format.
The result at the end was a scripted, fully-functional prototype of my chatbot.
Usability Testing and Iteration
I tested the prototype with volunteers using questions such as where I studied, where I worked, and project-specific prompts.
Results were encouraging: most participants quickly found requested information with minimal prompting and found the chatbot useful.
Based on feedback, I iterated wording for better concision and clarity in a few script sections.
Removed superfluous query text from "Project" intro.
Reworded "Resume" bot message for conciseness and voice.
Made the "Skills" bot message more concise and parseable.
Link Back Up to Prototype
Final Thoughts and Next Steps
This project was a strong exercise in UX writing and conversation design, and test participants generally found the concept useful.
Next steps include continued testing, accessibility improvements, and targeted evaluation of where NLP capabilities would add value.
Next.js Port Notes
As part of moving this portfolio into Next.js, I recreated the PortfolioBot prototype as a reusable React client component.
AI was used in this update to accelerate implementation and iteration during the React conversion, styling refinements, and content parity checks. AI was also used to review and refine copy updates while preserving intended behavior and presentation.
