Practice what you preach to boost conversion
We helped Watermelon with a reimagined chat widget, an extensible brand and design system, and a gorgeous new website.
Introduction
Watermelon brings all incoming customer inquiries and contact information together in one place. Through AI-powered software Watermelon easily manages valuable contact moments across different channels from one dashboard. Their flagship product, an advanced chatbot for Watermelon customers, can be created and applied to the most used channels to automate conversations with a human touch.
Challenge
Growth was slowing down for Watermelon as competition is fierce in the digital customer service industry. Their brand identity as well as their chat widget were in dire need of a next-level vision, such as an entirely new codebase for their chat widget.
Deliverables
Together with the Watermelon team we redefined the behavior of the chat widget Watermelon offers its customers. We scoped out various user-flows, for example what would happen when a user wants to talk to an agent vs the chatbot. We redesigned what the chat and its messages should look like and made sure to sprinkle micro interactions throughout the experience to make it feel quick, snappy and above all, human. And by working closely together with their back-end team we were able to uncover bugs and fixes fast.
With in-depth workshops we reimagined the Watermelon brand and created an easily extensible design system. One that laid the foundation for a gorgeous new website, as well as their chat widget. This refresh aligned the visual presentation with the current Watermelon vision.
A professional design process, a dedicated team and open communication. No nonsense, just hard work! They show that they care.
Marieke Mutsaerts
Team Lead Marketing at Watermelon
Flexible application of the brand
The flexible nature of the brand identity allowed for many different applications of the colors and typography, while staying recognizable. Whether it’s for the website, a business card or their own chat widget. Essential to the Watermelon brand is color and its combination with bold typography. The wide spectrum of color matches up with the nature of diverse-thinking people in their team. The characteristics of the typeface feel modern yet trustworthy, aligning perfectly with the behavior and nature of their chatbot. A chatbot that of course would need to be heavily customizable by brands using Watermelon.
An updated identity
The identity of Watermelon evolved during this project and is now ready for the years to come. We refreshed their logo shapes and colors to feel more current and forward-thinking. The green and red mark was and still is a very recognizable visual for the brand.
Improving behavior
Our UX Design team focussed on making the experience for chatting with a chatbot agent vs a human agent as seamless as possible, tying up any loose ends and making sure there was always a next step for the user to take.
Even though Watermelon uses the latest versions of GPT, AI is ever evolving. Some answers the chatbot provides could be incorrect, or not entirely related to a user's question(s). Through design we created an easy way for users to rate the answer given, or request to chat with a real human agent at any point in the conversation.
Micro interactions
Whether a user is typing, waiting, getting redirected or sending a message, animations can be found throughout the experience. Making it easier for the user to understand what is happening when, and when an action from them is required. These animations were ideated and designed by our Visual Design team, and custom built and optimized by our Development team using framer-motion. Additionally, each animation has its own unique chat bubble design and sounds to go along with it.
Design system and UI library
An extensive library of interface elements, set up with a clear set of guidelines and rules to follow creates an environment of consistent visuals. The elements adjust to the needs of our visual designers.
Building the entire codebase for their product and website
The pixel perfect designs were built using a modern tech stack to optimize for performance and SEO effectiveness. We created a blazing fast website and widget with a Lighthouse score over 90, as we utilized served sided rendering. The code was set up with an extra layer of quality, making it future proof and optimized.
For the chat widget we built an unfurl server using Fastify and NodeJS. This allowed us to check the URL a user/agent/chatbot has sent, grab the relevant metadata and send this back to the chat. In view of high traffic we chose to use Fastify due to the performance and scalability that Fastify provides compared to other frameworks.
Optimized for every device
With the chat widget being a crucial part of the website, our Development team set it up to be custom HTML elements. The eyecatcher, chat window and chat bubbles all communicate with each other through a web-API. This way the need to alter the pages the chat widget might appear on was minimized to reduce effort required by the Watermelon team. All so they can be the best at what they do for their customers.
