DATE
18/05/2023
Watermelon
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.
Web
SaaS
Services
Web design & Web development & Mobile Development
Category
Mobile Web
Client
© Watermelon B.V.
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.
Brand Design
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.
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.
Result
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.
Full Stack
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.
