ChAIn · Sayali M. Patil
← SAYALI M. PATIL UI/UX · CASE STUDY
UI/UX CASE STUDY · 2024

chAIn

Get hold of AI, before it gets hold of you.

A community and content platform where people learn AI together inside chains, topic communities that members can join, create and moderate.

chAIn on laptop and tablet
ROLEUI/UX Designer
TEAMAlumni of BITS Pilani
PLATFORMResponsive web app
SCOPEBrand, UX flows, UI
01 · THE BRIEF

AI moves faster than anyone can follow alone. chAIn turns that pace into something you can keep up with, together.

THE PROBLEM

Social feeds reward scrolling, not learning. People curious about AI had no focused place to find their topic, follow credible voices and talk shop without the noise.

MY ROLE

I designed the web app end to end with the founding team, from brand to UI. Most of the thinking went into the chain lifecycle, the four flows below.

AChain selectionInterests from onboarding feed a recommendation rail.
BCustomizationA guided wizard for General and Official chains.
CModerationPromotion policies and in-line flags keep chains on topic.
DMember managementModerators, approvals and invites, handled in place.
02 · VISUAL LANGUAGE

Neon energy, calm ground

The moodboard pulled from gaming, fintech and tech brands. Neon signals action, purple signals community, and deep black keeps long reading sessions comfortable.

Moodboard
Liquid Neon#C7FF00
Purple Hedonist#A861FF
Ghost White#F8F8FF
Benthic Black#010213
Typefaces
Icon set explorations
COLOUR · 4 TOKENSTYPE · SPACE GROTESK / INTER / SORAICONS · FILL, TONE, CONTAINER TESTS
03 · THE PRODUCT

Your chains, always in reach

One shell for the whole app: navigation left, content centre, and a persistent chain rail right that pairs joined chains with recommendations.

Home feed with chain rail
Chain chat with rule violation flag
C · MODERATIONFlag in line, don't delete

An off-topic message is marked "Violated chAIn rules" right where it sits. Members learn the norms and the conversation keeps its flow.

D · MEMBER MANAGEMENTApprove without leaving the feed

Chain requests and private-chain invites arrive as notifications with Accept and Decline built in, filtered by type.

Chain requests and invites
04 · CREATE A CHAIN

Creating a chain, link by link

A modal wizard over the home screen. The type chosen at step one decides the path: Official chains branch into document verification before anyone can publish.

FOLLOW THE PATH:
{{ s.n }}
{{ s.title }}
{{ s.title }}{{ s.note }}
05 · PROFILES

A CV for the AI era

A member profile shows how someone works with AI. Joined chains sit up front, and the AI Journey tab lays out work, study and side projects, each with the AI tools used.

Company profiles swap the journey for AI Updates: short case-study posts on how the business uses AI, followed like any member.

Member profile, About
Member profile, AI Journey
Company profile, AI Updates
Company profile, About

TAP A SCREEN TO VIEW IN FULL

06 · ITERATIONS

Three decisions, tested

Each one explored in several versions before committing.

01Landing page

The first draft led with product and stats. The final leads with the promise and the chain visual, then shows the product.

Landing, first draft
BEFORE · PRODUCT-FIRST
Landing, final
AFTER · PROMISE-FIRST
02Post card

Six treatments tested against busy artwork. Solid dark kept text legible on every image, so it shipped.

Solid dark card
SHIPPED
Gradient card Light card, purple edge Light card, neon edge Frosted glass card Pale glass card
03Chain rail

Grey round chips read as generic groups. Purple squircles with neon glyphs made each chain feel owned, and echo the logo.

Rail, My Groups
V1 · GROUPS
Rail, My Chains
V2 · CHAINS
Rail, final squircles
FINAL · SQUIRCLES

In an AI-led future, gains require a chAIn.

{{ lbImg }}