DOT THE CHATBOT
This page outlines the steps I took to create the icon design for 'Dot the Bot,' the chatbot support for the News Concierge website. During this project, I collaborated with multiple stakeholders and went through various ideation stages until I reached the final design. I utilised vector graphics and animation tools to achieve the final result.
BACKGROUND
Initially, the News Concierge chatbot icon was merely a help icon. The product manager and marketing team decided to create a personality for the chatbot. Since News Concierge's demographic is predominantly older, it was decided to give the chatbot the personality of a grandma, hence the name 'Dot' was created.
DESIGN
IDEATION
Based on that information, I began creating a design to match the persona of 'Dot the Bot.' I designed a robot with the aesthetics of a grandma. I explored multiple designs to ensure that the final version was simple and not overcomplicated, knowing that the icon would be particularly small on mobile screens.
ORIGINAL CONCEPTS
DESIGN REFINEMENT
I shared my designs with the rest of the team, but they did not quite hit the mark. So, I approached the design differently by making 'Dot the Bot' literally a 'Dot' and simplified the design using circles and half circles. This design became the clear winner. I also added more depth by making the background circle a gradient in the News Concierge blue colour palette.
FINAL CONCEPT
FINALISATION
The only note the team gave on the final design was that it might not be immediately clear that the icon represents a chatbot. I addressed this by making 'Dot the Bot' animated. I created an animation inspired by the old Word paperclip help icon, where the persona of 'Dot the Bot' transforms into the three-dot chat icon that most web users recognize as a help icon. This became the final design, which was implemented on News Concierge.
