A renewed brand and conversational website to go with it

We conceptualized, designed and built a brand new website for conversational software scale-up Watermelon

An introduction

Meeting the contagiously enthusiastic Watermelon team

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.

Yummygum team working on Watermelon
Yummygum team working on Watermelon
Yummygum team working on Watermelon

Brand Concept

A visual representation of Watermelon's fun-loving brand

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

Tangible and concrete style suggestions

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

A new take on SaaS websites

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.

“Yummygum helped us tell the Watermelon tale through a brand new branding. Besides, they also walked the walk with a professional design process, a dedicated team and open communication. ”

Marieke Mutsaerts - Team lead Marketing at Watermelon

research & content

Heavy UX Lifting

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.

Ingredients of the Watermelon style direction

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

A truly conversational web experience

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.

Flowchart of the Watermelon chatbot.

Atomic Design

One cohesive design library

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.

Watermelon Atmoic design Library

components

From design to development

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.

How long does it take to implement a chatbot?

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.

Can I connect my own systems to Watermelon?

Sure! See which integrations are standards for Watermelon. Watermelon has an API key and webhooks available to allow your systems to communicate seamlessly Watermelon.

Is there support available during implementation?

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)} />
    ))}
  )
}

Extensive testing

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.

Yummygum team working on the Watermelon website Yummygum team working on the Watermelon website
Yummygum team working on the Watermelon website Yummygum team working on the Watermelon website

color pairing

A striking introduction to Watermelon's products

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

The difference we made

Check out the before-and-after results below. Or go to Watermelon.co to see it live.

before

after

The new Watermelon website

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