The Project

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.

Research

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:

• Rule-based, which use a pre-determined conversation script, usually with limited input options.
• NLP (Natural Language Processing) chatbots, which use AI to interpret text or voice input.

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:

• Most volunteers had standard portfolio layouts, including contact information, social media, resume/CV's, and links to case studies.
• Volunteers were divided as to whether or not a chatbot would be useful or not - while some thought the idea was an interesting way to stand out, others suggested that it would be potentially superfluous, or even slower or more annoying if users had to type out their queries.

Defining the Design

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:

• Introduction of myself
• My work and projects
• My resume/CV
• Contact Information

Designing the Voice

I created a voice chart to help inform the content and conversation design. The main traits of the bot are: approachable, professional, and knowledgeable.

The Conversation Flow

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.

Miro Link

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.

Rough Sketches to Wireframes

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.

Prototyping with AI

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.

Usability Testing and Iteration

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:

‍

‍

Link Back Up to Prototype

Iterated Prototype

Final Thoughts and Next Steps

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.