I decided to create a chatbot that could introduce me and my work, as an alternative/enhancement to my standard portfolio website. In addition to being an interesting and useful new feature for my portfolio, it would allow me to exercise my conversation design and UX writing skills. One of my capstone assignments for the UX Writing course from Technical Writers HQ helped inspire this project.
I researched, designed the interface and conversation flow, and prototyped and tested PortfolioBot myself. I added the chatbot interface directly to this Webflow site, as seen above and on the homepage.
I did research into chatbots to try to get a better understanding of their design and use cases.
The UX Writing course from Technical Writer HQ offers a number of resources for learning more about chatbot and conversation design, including links to a number of chatbot examples.
There are generally speaking two kinds of chatbots:
Most of the examples I found were for commercial purposes (i.e. ordering products, tracking orders, scheduling showcases, etc.) or were general conversation bots intended for research, mental health support, or casual talk.
I also performed user interviews with a number of volunteers, mostly designers like myself who spent time reviewing portfolio sites and designing their own. Interviews were conversational, discussing what people had in their portfolios, how their portfolios were laid out, what they found useful and if they think a chatbot would help visitors to their portfolios.
The results of the interviews were as follows:
Based on my research, I decided to make my chatbot a rule-based one - setting up a full NLP system would not only be significantly more work-intensive, but would also likely be less efficient for my use case than a simpler bot with specified inputs.
I would focus on making a bot with excellent voice and copy design that would give users a conversational overview of myself and my work.
Also based on my research, I decided to focus the functionality of the bot around four main areas, based on standard portfolio design:
I created a voice chart to help inform the content and conversation design. The main traits of the bot are: approachable, professional, and knowledgeable.
I created a conversation flow map in Miro to plan out how my bot would function. This would also double as the script for my bot when implementing it.
This was the original assignment from the UX Writing course - I did the research and design definition steps before drawing up this flow. I also ran through some conversation paths with some volunteers to help me work out the dialogue and copy.
I created two versions - the first in a mind map format, and the second version below it in a more traditional flowchart format, based on feedback.
Note: an invalid text path is also included in the flow, despite the fact that this is a rule-based bot with limited response options. I included it to for the sake of experience designing fail-over copy, and in case I would need it for a potential future expansion of the bot's capabilities.
I brainstormed designs for the chat and the bot/user icons that represent each side of the conversation. For the color scheme, I decided to pick an alternating set of light, comfortable greens/blues.
As with my previous project, brktm, I decided to utilize the help of AI to help quickly create a functioning prototype of my design.
I ported over my Figma designs using the Figma to Webflow plugin and used ChatGPT to help generate the code framework necessary to make the bot function.
This was a somewhat complex process that necessitated planning and thoughtful code design. I found it helpful to keep a running record of the prompts I was using in ChatGPT in a separate document.
As was expected, I did have to do some tweaking and editing to the generated code to get exactly what I wanted, and I also had to manually add the script in a code readable format.
The result at the end was a scripted, fully-functional prototype of my chatbot.
I ran through some usability tests with the prototype with a number of volunteers. Participants were presented with the prototype and asked questions such as, "Where did I go to school?", "Where have I worked?", "What was the PaletteScry project about?", etc. They were then tasked with using the prototype to find answers to those questions.
The results were encouraging - practically all participants were able to quickly and easily find the requested information about me, with very little prompting from my part. Most participants said they enjoyed using the chatbot, and thought it a unique and interesting tool for learning more about me.
There was some feedback regarding some of the wording and copy, and so I updated a few sections of the script in response:
I found this an immensely interesting project to work on, and I was glad for the chance to utilize and enhance my UX writing and conversation design skills. I was also gratified that users seemed to find the concept interesting and useful.
I look forward to doing more testing and iteration on the design, especially as I do intend to incorporate it into my general portfolio.
I would especially be interested in exploring ways to make the interface more accessible, as well as whether or not there are use cases where full NLP-processing would make sense.