CASE STUDY

CASE STUDY

The Bright Side of AI: Clique ✱ App Case Study

Today, we, as digital product designers, have a lot to think about. Artificial intelligence has come into our lives, bringing new opportunities that were hard to imagine just a few years ago. In this article, I want to share my observations on how AI is changing familiar design patterns, using the example of my work on the project Clique.

How It All Started

As is often the case, my main task in this project was to translate the founders’ ideas into design language. It wasn’t just about creating interfaces; I had to rethink the visual language and explore new concepts and solutions. I’ll be honest — we went through several iterations, and in this article, I want to share the conceptual insights, not the final product version.

What's Clique?

Clique is an AI-based service that helps users find related thoughts from other people or even answers to their own questions through writing down their reflections. Users can discuss ideas, build on each other’s thoughts, or simply offer support. Here, what starts as a personal reflection journal transforms into a social experience.

On top of that, Clique includes an AI therapist, who helps users navigate their own thoughts and emotions. The core of the service revolves around what we call Beams (like “light beams”): they are sets of thoughts on specific topics. Currently, Clique AI finds matches within individual user thoughts, but in the future, we plan to implement matching on a whole Beam level.

The Founders’ Vision

The project founders, Roman Mishiev and Denis Kukoyaka, came to me with a clear vision.

They believe that AI is not just a tool for creating isolated human-computer interactions but rather a way to connect people and bring their experiences together.

During one of our conversations with Roman, we came to the idea that Clique should become a large database of human experiences, where AI helps organize it and make it accessible intuitively. Users don’t have to worry about phrasing the perfect query, filling out forms, or organizing knowledge — AI takes care of that.

This is how we came up with the slogan: “The Bright Side of AI”.

Product Metaphors

From these ideas, we developed the main metaphor for the interface. I realized that using Clique feels similar to using Shazam, but for your thoughts. Just like Shazam captures the essence of a song and finds a match, Clique helps identify the most relevant responses from a vast database of reflections.

From these ideas, we developed the main metaphor for the interface. I realized that using Clique feels similar to using Shazam, but for your thoughts. Just like Shazam captures the essence of a song and finds a match, Clique helps identify the most relevant responses from a vast database of reflections.

From these ideas, we developed the main metaphor for the interface. I realized that using Clique feels similar to using Shazam, but for your thoughts. Just like Shazam captures the essence of a song and finds a match, Clique helps identify the most relevant responses from a vast database of reflections.

From these ideas, we developed the main metaphor for the interface. I realized that using Clique feels similar to using Shazam, but for your thoughts. Just like Shazam captures the essence of a song and finds a match, Clique helps identify the most relevant responses from a vast database of reflections.

From these ideas, we developed the main metaphor for the interface. I realized that using Clique feels similar to using Shazam, but for your thoughts. Just like Shazam captures the essence of a song and finds a match, Clique helps identify the most relevant responses from a vast database of reflections.

From these ideas, we developed the main metaphor for the interface. I realized that using Clique feels similar to using Shazam, but for your thoughts. Just like Shazam captures the essence of a song and finds a match, Clique helps identify the most relevant responses from a vast database of reflections.

From the start, we knew that users should be able to record their thoughts both in audio and text formats. This led to another metaphor: “Imagine you have a smart voice recorder that can support, advise, and respond using the voices of people you find interesting.” This made me think of Agent Cooper from Twin Peaks — perhaps he would have understood himself better if his recorder could respond!

Beam is a way to shed light on something dark and unknown. Imagine shining a flashlight in a vast dark space. Eventually, your beam intersects with beams from other people, gradually illuminating more and more of the space. That’s how Clique works.

Audio Interfaces

One of the unique aspects of Clique is that there are no images or videos involved. Everything revolves around text and audio. This presented a challenge for me as a designer — we needed to keep the user’s attention while making sure the service didn’t just turn into another Notion or Notes. We are not just a text editor; our goal is to help these thoughts come to life.

I experimented with the audio format: what if each Beam could be like a podcast on a specific topic? The content is organized as a timeline of cards, with AI generating summaries, while all comments and responses blend into audio tracks. Imagine being able to play a Beam during your morning commute or while doing household chores.

These ideas are still in the concept phase, but I believe that audio interfaces will become widespread in the future. Already, AI can reproduce your voice in any language and create studio-quality podcasts. This opens up a new level of interaction that was simply not possible before.

One of the unique aspects of Clique is that there are no images or videos involved. Everything revolves around text and audio. This presented a challenge for me as a designer — we needed to keep the user’s attention while making sure the service didn’t just turn into another Notion or Notes. We are not just a text editor; our goal is to help these thoughts come to life.

I experimented with the audio format: what if each Beam could be like a podcast on a specific topic? The content is organized as a timeline of cards, with AI generating summaries, while all comments and responses blend into audio tracks. Imagine being able to play a Beam during your morning commute or while doing household chores.

These ideas are still in the concept phase, but I believe that audio interfaces will become widespread in the future. Already, AI can reproduce your voice in any language and create studio-quality podcasts. This opens up a new level of interaction that was simply not possible before.

One of the unique aspects of Clique is that there are no images or videos involved. Everything revolves around text and audio. This presented a challenge for me as a designer — we needed to keep the user’s attention while making sure the service didn’t just turn into another Notion or Notes. We are not just a text editor; our goal is to help these thoughts come to life.

I experimented with the audio format: what if each Beam could be like a podcast on a specific topic? The content is organized as a timeline of cards, with AI generating summaries, while all comments and responses blend into audio tracks. Imagine being able to play a Beam during your morning commute or while doing household chores.

These ideas are still in the concept phase, but I believe that audio interfaces will become widespread in the future. Already, AI can reproduce your voice in any language and create studio-quality podcasts. This opens up a new level of interaction that was simply not possible before.

Visual Storytelling and the Landing Page

Of course, one of the interesting challenges was translating these ideas into a product landing page. I had to not only express key ideas through text but also choose visual references that could convey the feeling of the service and serve as inspiration for its future photostyle.

Of course, one of the interesting challenges was translating these ideas into a product landing page. I had to not only express key ideas through text but also choose visual references that could convey the feeling of the service and serve as inspiration for its future photostyle.

Of course, one of the interesting challenges was translating these ideas into a product landing page. I had to not only express key ideas through text but also choose visual references that could convey the feeling of the service and serve as inspiration for its future photostyle.

Clique website

The first is Edouard Boubat’s “Rémi écoutant la mer, Paris, 1995”. It shows a boy listening to a seashell with his eyes closed. Just like our users, he is listening to himself, finding inner peace.

The second photo, by an unknown author, shows a girl catching soap bubbles. For me, this also captures the feeling of the service, pushing you to start using it, because important thoughts can disappear like bubbles if not recorded.

The concept of the landing page was built around my favorite structure: Why? How? What? But with an added twist — thoughts on the page reveal themselves gradually. This emphasizes the nature of the service, where ideas emerge slowly and need time to be understood.

On the first screen, there’s no big, bold headline. Only when the user starts scrolling does it gently appear. This approach helps maintain a calm atmosphere and avoids overwhelming the visitor with too much information. The goal here is to invite them into a dialogue with themselves.

Currently, the service is available as an app on all platforms. This project was a fascinating experience for me, allowing me to rethink how AI can change our interactions with interfaces. It reinforced my belief that as designers, we shouldn’t just be creating soulless buttons. Instead, we should strive to design visual elements that convey emotion and meaning, because that’s ultimately what matters most.

Thank you for reading!
Victor

2024 Copyright © WWWICTOR // BARCELONA
THANKS TO Pangram Pangram® Foundry FOR THE TELEGRAF FONT and NIKITA KOMAROV FOR THE VIDEOS

2024 Copyright © WWWICTOR // BARCELONA
THANKS TO Pangram Pangram® Foundry FOR THE TELEGRAF FONT and NIKITA KOMAROV FOR THE VIDEOS

2024 Copyright © WWWICTOR // BARCELONA
THANKS TO Pangram Pangram® Foundry FOR THE TELEGRAF FONT and NIKITA KOMAROV FOR THE VIDEOS