CometChat.

Audience.

CometChat’s target audience includes developers and product managers.

Developers are the ones that are going to employ the tool. They often navigate from the main website to detailed documentation pages for comprehensive insights. They appreciate straightforward and truthful communication.

Product managers evaluate the broad scope of solutions offered by this market. They want to know more about CometChat’s appearance, business impact, and the value that comes from integrating it.

Challenges and Solutions.

Expanding company, evolving needs.

The company’s growth led to an outdated website with a scattered theme and unclear message. Recognizing the need to reimagine and elevate the brand, the company seized the opportunity to establish a new identity with the name CometChat. Drawing inspiration from the concept of space, a three-dimensional illustrative language was crafted and designed to seamlessly adapt to various visual touchpoints.

Venturing into the enterprise horizon.

After reaching the startup audiences mostly through developers, CometChat needed to focus on welcoming enterprises to their community and connecting with managers from the corporate landscape.

To help them get there, we divided their Solutions by company type: Enterprise and Startup. We shifted the flow to not only encompass documents and heavy information pages but also to help managers consult similar use cases and further support if needed.

Moreover, we improved the pricing page, optimising the display of all available solutions.

Delivering the message.

We developed a storyline throughout the landing page scroll to explain CometChat. We wanted users to experience an Eureka moment as they comprehended a complex product, starting from the hero, which highlights the two main product functionalities, to the Platform section, which further presents functionalities and market spheres.

A galaxy of solutions.

The Solutions section of CometChat’s website allows users to explore chat and messaging solutions tailored to their specific needs across different sectors, including Healthcare, Dating Apps, and Online Education. The platform’s advantages, such as code simplicity and seamless integration with various technologies, are thoroughly detailed on individual feature pages.

Redefining product aesthetics with a cosmic makeover.

The purpose of a marketing website is to display information in a captivating way. In this case, the star of the show is a product. CometChat’s product is composed of tools that craft another end product. For this reason, we had a green light to redesign CometChat’s product imagery, improving iconography, working around typography, and making it more visually appealing and accessible.

Comets never stand still.

Micro-animations play a big role in enhancing overall design aesthetics and experience. They give the user that nice dopamine feeling as they click and scroll around with surprising little details… notice how hovering a button will grant you a wish!

Everything in this universe is moving to some extent, even seemingly stationary objects like stars or planets. Comets, however, move faster, and that's why we chose to showcase this product with animations as often as possible, improving the website's overall appeal and adding an engaging layer to the user experience.

Breaking the technical barrier.

This block-based approach works very well with Storyblok, which places composable components at its core feature. It works like digital legos: content managers have blocks that can be easily arranged to build complex page structures. The only limit is their imagination!

Keeping a website up to date is never easy, especially in CometChat's case, which has a massive amount of information (currently over 600 pages), to display in a wide variety of contexts: blog posts, success stories, guides, tutorials, feature pages, use cases, you name it.

The design of this website prioritises scalability and modularity by establishing foundational components and tokens. We have created blocks that adapt to dark and light themes and that work well even when mixed up, allowing content managers to rearrange them effortlessly on any page according to their needs and preferences.

Custom mockups.

To avoid generic pre-made device mockups lacking control over colour, light, and texture, we decided to construct iPhones and iPads using Blender. This choice enabled adaptation to various sections’ layouts, ensuring a consistent mood across the website. Achieving the right textures, particularly a matte glass texture, was a challenge, aiming for a clean and premium appearance that accentuates the product’s fictional UI without diverting attention from the background.

Design System.

A design system is the foundation of our projects, providing a robust structure that unifies visual and functional elements. It enables scalable growth without compromising aesthetics and ensures a cohesive integration with the brand identity, serving as a conductor for a consistent digital presence.