The story
This was a hackathon project, completed over the course of a couple days. I was inspired by a chatbot quiz that I saw on Overtone’s website to choose your perfect hair color. At Lovepop, we had recently been discussing better ways to filter and suggest products, so it felt like a fun way to solve that challenge.
My contributions
I was the sole developer and ux designer for this project. This was built using the react-chatbot-kit package, and I added some custom styling & logic. Each question asked by the chatbot correlates to a filterable property on a product, and by the end tries to return the most relevant result based on those filters.
I also added a couple easter eggs, including the ability to ask for a joke. These jokes were sourced from jokes that my coworkers had shared at standup (shoutout funco).
In addition, I also created a custom emoji by combining some svgs from OpenMoji, to become the titular heart-eyed robot, “PopBot”:
The result
My project received positive feedback and was super fun to work on.
What I learned
I think the package that I used here was super helpful in building this quickly, which was ideal in a hackathon context, but was a little confusing to maintain. If I were to recreate this for production, I would probably either build out the logic from scratch or find a new library that fit the use case better.