We conceptualized, designed and built a brand new website for conversational software scale-up Watermelon
An introduction
During our first meeting with Watermelon there was one thing in particular that caught our attention; their team's contagious enthusiasm. The Watermelon team asked for our help to create a new website. They were looking for something more innovative, something that would do justice to their conversational software. And at the same a website that would reflect their brand identity that incorporated the enthusiasm that struck us in our first meeting. We kicked the project off with our trusty Brand Sprint.
Brand Concept
The Brand Sprint led to a new look on who and why Watermelon exists, which in turn gave us the input we needed for the creation of the Brand Concept. We found a visual narrative that would bring out Watermelon's identity. Amongst other things through the use of summer'y colors, heavy set headings and the use of shapes as subtle hints to the fun-loving spirit of Watermelon as a brand.
This brand concept references designs from other products. We are not associated with these images nor do we claim to have created them.
Mood Board & Style Board
Although we had already accounted for many of the visual and creative possibilities of conveying the Watermelon brand identity in the Brand Concept, we took this even further with the Mood Board and Style Board. They helped carry over the Brand Concept ideas into an image collages of tangible and concrete style suggestions.
The mood board and style board reference images and designs from other products. We are not associated with these images nor do we claim to have created them.
Concept Session
Not long after sharing the Mood Board and Style Board it was time to start looking at the conceptual side of things. And by things we mean communication of the value proposition on the website. After having rounded off our thorough User Research stage, we planned a Concept Session together with the Watermelon team, lead by a few of our team's designers.
The goal of the Concept Session was to explore a new take on SaaS websites. Earlier on in the process Watermelon mention a strong desire to work towards a conversational website. As usual we didn't shy away from next-level creativity during this super fun client-collaboration.
Marieke Mutsaerts - Team lead Marketing at Watermelon
research & content
After the Concept Session was when the heavy lifting would take place in terms of User Experience. Besides the sitemap we created a Customer Journey Flowchart which in turn gave us the go-ahead to start molding everything into a Content Core document and subsequently the creation of a lot of wireframes.
The pricing page was one of the many pages that allowed us to go all out when it comes to sprinkling the newly refined Watermelon brand onto a seemingly basic pricing table. Large border radii, heavily set typography and strong contrasting color; a few of the ingredients for the distinct style direction. And of course also in more subtle ways. Notice how the subtle watermelon seed shaped list bullets?
chatbot as centerpiece
Whereas the pricing page and its content was rather conventional, the header on the home page would be the innovative center piece of the website. Using a centrally positioned chatbot design that matched the newly polished Watermelon brand, visitors would be able to navigate the website.
A the same time it would function as a preview of how well visitors would be able to help their customers if they too would use a Watermelon chatbot. The header chatbot would guide visitors to relevant content on the website. The research done earlier led to the creation of both questions asked by the chatbot as well as suggestions for answers, for visitors, to those same questions.
Atomic Design
From the start we knew that for an extensive website like the Watermelon website it would only be right to build, use and expand upon an Atomic Design component library. When laid out the visual cohesion shows throughout the particles that make up larger design elements.
components
Whereas the components were designed using our go-too design tool Figma, these same components were immaculately coded up into functioning pieces of art by our development team. Take the following disclosure accordeon component for example which features on many pages throughout the Watermelon website.
The user-friendly platform makes it easy to have a chatbot live over a period of two months. Our Customer Onboarding Specialist will guide you along the way and support you in getting your chatbot live quickly.
Sure! See which integrations are standards for Watermelon. Watermelon has an API key and webhooks available to allow your systems to communicate seamlessly Watermelon.
Yes, our Customer Onboarding Specialist will support you when you're getting everything set up. That extra help means your chatbot will be live in under two months.
const Disclosure = ({ items }) => {
const [activeItem, setActiveItem] = useState(0)
function handleKeyDown(event, idx) {
event.preventDefault()
setActiveItem(idx)
}
return (
{ items.map(( idx ) => (
<DisclosureItem key={idx} onClick={(e) => handleKeyDown(e, idx)} />
))}
)
}
Needless to say we extensively tested the components and pages on various breakpoints to make sure they would function and look fantastic on desktop computers, smart phones and everything between.
color pairing
Because we created a rather comprehensive and future-proof color palette there was room for us to assign accent colors to Watermelon's various digital products. Each of these products would have their own dedicated page. And the headers of those pages? Of course we had to use the product colors resulting in a striking introduction for the visitor to each of the products.
Before-and-after
Check out the before-and-after results below. Or go to Watermelon.co to see it live.
before
after
Watermelon reached out in need of a revision of their brand and have it reflected in a new innovative conversational website. We shaped a brand that mirrors Watermelon's soul and on top of that we conceptualized, designed and built a stunning and blazing fast website. Are you looking for an agency to do the same for your company or product? We'd love to help!
Get in touch
