Jasper - The Color Bot

Jasper is a color tool to expand your color vocabulary and provide a new form of inspiration for all.

Building on colors inspiration tools like Adobe's Color, Design Seeds and LOLColors. I want to give users daily color inspiration from Pantone's color of the day. I would like to build a Slack bot to help users think about color in a new light (the Pantone light) and expand the user's color vocabulary. Additionally I would like users to have the option to request images that use that color for further inspiration. I plan to build this by pulling the color of the day from Pantone's Colorstrology and using the color to search Dribbble or other such sites to surfaces images for the user.

For this iteration, I decided to build with an SMS bot using Twilio, to keep complexity down. I do plan to port Jasper to Slack as the interactions for a team will be far more compelling than that of an individual.

Sadnote: Pantone does not store a public list of all their daily colors :(

Check out the code

This was the workflow I created for this iteration of Jasper. The interaction is started with the user saying "hi" or something similar. Then Jasper jumps in and introduces himself and what you should do next. From there the Jasper helps you expand your color vocabulary and gives you inspiration images around these colors.

In order to create a better bot experience I wanted to make sure Jasper had some personality. I filled in a couple different traits to help create the right tone of Jasper. I wanted a colloquial voice in order for the user to easily connect with Jasper just like a close friend. Being fun, trendy and relevant. One example of this is using emojis in responses as an added personality tool.

Some of Jasper's Fun Phrases: 

“Awesome sauce! Give me one second.” “Coming right up!” “Enjoy your Inspiration!” " Happy coloring! 🎨🎉" “You there? Wonderful colors await you!"  "I'm Jasper your friendly neighborhood color master"

As part of the development process I created this matrix in order to prioritize my time and what the essentials of Jasper were.

In this Version (V1.0) Jasper can pull up today’s color of the day provide up to 4 images what use that color, pull up yesterday’s color with images and have a bit of fun with the responses. The color data is scraped from Pantone's Colorstrology site and stored a database which is made up of 2 tables as show above. After the color data is collected a secondary function runs that scrapes 4 images from Dribbble given the hex value of the color, which is then stored in the images table. To help me develop this I used Nokogiri to handle the scraping and the Twilio Ruby gem to interact with the Twilio service outside of what was given in the base project.

A Couple Other Thoughts

For the next iteration of Jasper I would like to port him to Slack for an entire team to interact and add a couple more features. One of these features would be the ability to pull up images from several different sources in addition to Dribbble and be able to provide images that are more relevant to the project the user is working on. By providing photos for a presentation or UI images to help design a better UI feel in these color tones. Another feature I would like is to be able to pull images from a Slack conversation and create a potential color scheme given a wireframe and thematic words for example.

Looking back on this process I learned a fair bit about actually developing and deploying a bot, which will come in handy for any future development I do. I also learned about databases and how the best way to set up your tables are. From a creative aspect, I learned a bit more about all the aspects there are to consider when there is a human actor involved, people never do what you expect so you need to make sure to handle it in the best way possible while still having your application or bot staying in character, just as you would a stage production.