diff --git a/AGENTS.md b/AGENTS.md index 8b00c2e..f1061ae 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -18,13 +18,14 @@ Index: README.md → table of projects ## What this repo is -A workspace for Figma plugins and design tooling. It currently hosts a -single active project (the former Nectar Design Toolkit and Design System -Builder projects have been removed): +A workspace for Figma plugins, design tooling, and design case studies. It +currently hosts two active projects (the former Nectar Design Toolkit and +Design System Builder projects have been removed): -| Project | Folder | Status | -|---------|--------|--------| -| Variables & Styles Extractor | [`variables-styles-extractor/`](variables-styles-extractor/) | Published on Figma Community ([1584331992332668732](https://www.figma.com/community/plugin/1584331992332668732/variables-and-styles-extractor)) | +| Project | Folder | Type | Status | +|---------|--------|------|--------| +| Variables & Styles Extractor | [`variables-styles-extractor/`](variables-styles-extractor/) | Figma plugin | Published on Figma Community ([1584331992332668732](https://www.figma.com/community/plugin/1584331992332668732/variables-and-styles-extractor)) | +| CREATIVIA | [`creativia/`](creativia/) | Design case study + planned demo | Content scaffold (v0.1.0) — Lollypop Designathon 2025, Team 6 | --- @@ -54,7 +55,8 @@ banned without explicit user permission. | You're editing | You may also touch | You must NOT touch | |----------------|--------------------|--------------------| -| `variables-styles-extractor/**` | Root `README.md`, `.github/` if it's a security/CI change you've been asked for | — | +| `variables-styles-extractor/**` | Root `README.md`, `.github/` if it's a security/CI change you've been asked for | `creativia/**` and other project source unless explicitly asked | +| `creativia/**` | Root `README.md`, `.github/` if it's a security/CI change you've been asked for | `variables-styles-extractor/**` and other project source unless explicitly asked | | Workspace root files (this file, README, `.gcc/`) | The project's README if cross-cutting | Per-project source unless explicitly asked | If a future change spans more than one project folder (e.g. extracting diff --git a/README.md b/README.md index cd3db37..46b6e8c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Side-Kicks -A multi-project workspace for Figma plugins and design tools. +A multi-project workspace for Figma plugins, design tools, and design case studies. 📖 **AI builders start here:** [AGENTS.md](AGENTS.md) — workspace-level canonical rules. 🔒 **Reporting a vulnerability:** [`.github/SECURITY.md`](.github/SECURITY.md). @@ -13,6 +13,7 @@ A multi-project workspace for Figma plugins and design tools. | Project | Folder | Status | Notes | |---------|--------|--------|-------| | Variables & Styles Extractor | [`variables-styles-extractor/`](variables-styles-extractor/) | Published v2.1.2 · first published 17 Jan 2026 | Figma plugin · [Community page](https://www.figma.com/community/plugin/1584331992332668732/variables-and-styles-extractor) | +| CREATIVIA | [`creativia/`](creativia/) | Content scaffold v0.1.0 · working demo planned | Design case study — AI creative co‑pilot for musicians · [Lollypop Designathon 2025](https://lollypop.design/designathon-2025/), Team 6 | --- @@ -54,7 +55,14 @@ side-kicks/ (this repo: tknatwork/side-kicks │ ├── assets/ ← Plugin logo (SVG) + icon │ ├── .github/copilot-instructions.md │ └── docs/ ← CHANGELOG, CODING_STANDARDS, FIGMA_PLUGIN_DEVELOPMENT, etc. -└── (single active project: variables-styles-extractor) +└── creativia/ ← Project: design case study (+ planned demo) + ├── AGENTS.md ← Project AI rules (canonical) + ├── CLAUDE.md ← Pointer to project AGENTS.md + ├── README.md ← Public-facing case study + ├── LICENSE ← MIT + design-IP note + ├── assets/screens/ ← Optimised screen + process gallery + ├── .github/copilot-instructions.md + ISSUE_TEMPLATE/ + └── docs/ ← CASE_STUDY, BRAND, ROADMAP, CHANGELOG, redirects ``` --- diff --git a/creativia/.github/ISSUE_TEMPLATE/bug_report.md b/creativia/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..b440660 --- /dev/null +++ b/creativia/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,24 @@ +--- +name: Bug report +about: Report a problem with the CREATIVIA case study or demo +title: '[BUG] ' +labels: bug +assignees: '' +--- + +**Where** +- [ ] Case study content (README / docs) +- [ ] Screen gallery / assets +- [ ] Demo (when available) + +**Describe the issue** +A clear and concise description of what's wrong. + +**Expected** +What you expected to see instead. + +**Screenshots** +If applicable, add screenshots. + +**Additional context** +Anything else worth knowing. diff --git a/creativia/.github/ISSUE_TEMPLATE/feature_request.md b/creativia/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..b5705b1 --- /dev/null +++ b/creativia/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,22 @@ +--- +name: Feature request +about: Suggest an improvement to the CREATIVIA case study or demo +title: '[FEATURE] ' +labels: enhancement +assignees: '' +--- + +**Project** +- [x] CREATIVIA + +**Is your request related to a problem? Please describe.** +A clear and concise description of the problem. Ex. "The case study is missing [...]" + +**Describe what you'd like** +A clear and concise description of what you want to happen. + +**Alternatives considered** +Any alternative approaches you've thought about. + +**Additional context** +Anything else — references, screenshots, links. diff --git a/creativia/.github/copilot-instructions.md b/creativia/.github/copilot-instructions.md new file mode 100644 index 0000000..eb3f95c --- /dev/null +++ b/creativia/.github/copilot-instructions.md @@ -0,0 +1,25 @@ + + +# CREATIVIA — Copilot Instructions + +> ⚠️ PROTECTED FILE — DO NOT DELETE. Rewrite if the direction changes. + +This is a thin redirect. The canonical AI-builder rules are not duplicated here. + +**AI builders, read in this order:** + +1. [`AGENTS.md`](../AGENTS.md) — canonical project AI rules (scope, content rules, roadmap). +2. [`README.md`](../README.md) — the public case study (narrative source of truth). +3. [`docs/CASE_STUDY.md`](../docs/CASE_STUDY.md) · [`docs/BRAND.md`](../docs/BRAND.md) · [`docs/ROADMAP.md`](../docs/ROADMAP.md). + +**Project is content-first.** Do not start building demo app code unless the user +asks to move to Phase 1+ (see [`docs/ROADMAP.md`](../docs/ROADMAP.md)). Stay faithful to +the Designathon submission — don't invent features or metrics. Scope: work only within +`Side-Kicks/creativia/`. diff --git a/creativia/AGENTS.md b/creativia/AGENTS.md new file mode 100644 index 0000000..ce5632f --- /dev/null +++ b/creativia/AGENTS.md @@ -0,0 +1,152 @@ + + +# AGENTS.md — CREATIVIA + +> Canonical AI-builder rules for the CREATIVIA project in this folder. +> All builder LLMs read this file. [AGENTS.md is the Sourcegraph universal convention](https://agents.md). + +**Project:** CREATIVIA — an AI creative co‑pilot for musicians (case study + planned portfolio demo) +**Repository:** [`tknatwork/side-kicks`](https://github.com/tknatwork/side-kicks) (this folder) +**Origin:** [Lollypop Designathon 2025](https://lollypop.design/designathon-2025/) · Team 6 · Bangalore · 8–9 Aug 2025 +**Persona:** Raj, 24‑year‑old guitarist (Musician track) +**License:** [MIT](LICENSE) © 2025 Tushar Kant Naik (covers code + docs in this folder; not the team's design IP or the Lollypop brand) + +--- + +## What this is (and is NOT) + +CREATIVIA is **not a Figma plugin** — it does not share the constraints of the +sibling `variables-styles-extractor/` project. It is a **design case study** +with a **planned working demo** for the owner's portfolio site. + +| It IS | It is NOT | +|-------|-----------| +| A structured record of a 24‑hour Designathon entry | A shipped product | +| Content-first: problem, persona, research, features, brand | A Figma plugin (no QuickJS/iframe constraints) | +| The home for a future static/interactive web demo | A backend service or real AI integration (yet) | + +**Phase right now: content.** The working demo is a later phase — do not start +building app code unless the user asks to move to Phase 1+ (see +[`docs/ROADMAP.md`](docs/ROADMAP.md)). + +--- + +## Read order at session start + +1. **This file** (`AGENTS.md`) — scope, content rules, roadmap. +2. **`.gcc/session-memory.md`** — warm-start state (local-only; gitignored). +3. **[`README.md`](README.md)** — the public case study (source of truth for the narrative). +4. **[`docs/CASE_STUDY.md`](docs/CASE_STUDY.md)** — long-form content. +5. **[`docs/BRAND.md`](docs/BRAND.md)** — colours + type tokens. +6. **[`docs/ROADMAP.md`](docs/ROADMAP.md)** — phased plan toward the demo. + +--- + +## Workspace scope restriction + +- ✅ Allowed: `creativia/**` +- ✅ Allowed when asked: root `README.md`, `AGENTS.md`, `docs/CHANGELOG.md` (registering this project is a cross-cutting change you were asked to make) +- ❌ Forbidden without explicit user approval: other project folders (e.g. `variables-styles-extractor/`) + +--- + +## Project structure + +``` +creativia/ +├── AGENTS.md ← This file (canonical AI rules) +├── CLAUDE.md ← Pointer to AGENTS.md (legacy Claude Code path) +├── README.md ← Public-facing case study +├── LICENSE ← MIT (+ design-IP note) +├── assets/ +│ ├── screens/ ← Optimised gallery rendered from the A4 PDF +│ └── figma/ ← Frames pulled directly from the Figma design file +├── .github/ +│ ├── copilot-instructions.md +│ └── ISSUE_TEMPLATE/ ← bug + feature templates +└── docs/ + ├── AGENTS.md ← Redirect to ../AGENTS.md + ├── CLAUDE.md ← Redirect to ../CLAUDE.md + ├── CASE_STUDY.md ← Long-form content (problem → solution) + ├── BRAND.md ← Brand tokens (colour + type) + ├── ROADMAP.md ← Phased plan toward the working demo + └── CHANGELOG.md ← Version history (protected) +``` + +`.gcc/` (session memory + build log) is **gitignored** workspace-wide — keep it +local; never rely on it being committed. + +--- + +## Content rules (Phase 0 — current) + +1. **Stay faithful to the source.** The narrative comes from the Designathon + submission (problem statement, Musician persona, and the team's A4 process + document). Do not invent features, metrics, or research that weren't in the + submission. If something is uncertain, mark it `` rather than + fabricating. +2. **Attribute honestly.** This is **Team 6's** collective work, organised into + four design pods (PM, persona & research, presentation & dashboards, graphics + — see the README). Credit the whole team and keep the owner's documented role + (presentation & dashboards + niche features) accurate; do not inflate it. +3. **Respect the Lollypop brand.** Document the entry for educational/portfolio + use; don't imply endorsement or ownership of the Lollypop/Designathon marks. +4. **Keep assets lean.** Screen images live in `assets/screens/` as optimised + JPEGs. Re-optimise (don't bloat) if you add more. +5. **One narrative, linked everywhere.** `README.md` is the canonical story; + `docs/CASE_STUDY.md` expands it. Keep them consistent — if you change a fact, + change it in both. + +--- + +## Build rules (Phase 1+ — when the demo starts) + +Follows the [workspace rules](../AGENTS.md): + +| Rule | Why | +|------|-----| +| Use **`pnpm`**. Never `npm`/`npx`. `pnpm dlx` for one-shots. | Lockfile integrity across the workspace | +| Prefer **Vite + TypeScript** for the demo (static-first, deployable). | Lightweight, portfolio-friendly | +| **Pin model IDs** (no `-latest`) if/when any AI call is added. | Avoid silent behaviour change | +| Keep the demo **deployable as static** where possible. | Easy to embed in the portfolio site | +| No workspace-level CI builds this. | Each project owns its build | + +Document the chosen stack in this file and `docs/ROADMAP.md` when Phase 1 starts. + +--- + +## File-protection rules (project-scoped) + +Never delete — rewrite if the content becomes wrong: + +| Path | What it captures | +|------|------------------| +| `AGENTS.md` (this file) | Canonical AI rules | +| `CLAUDE.md` | Pointer for legacy Claude Code path | +| `README.md` | Public-facing case study | +| `LICENSE` | MIT + design-IP note | +| `docs/AGENTS.md`, `docs/CLAUDE.md` | Redirects (kept for tooling) | +| `docs/CASE_STUDY.md`, `docs/BRAND.md`, `docs/ROADMAP.md` | Content | +| `docs/CHANGELOG.md` | Version history (protected) | +| `.github/copilot-instructions.md` | Copilot rules | +| `assets/screens/**`, `assets/figma/**` | The source images (A4 gallery + Figma frames) | + +--- + +## How to report a bug or vulnerability + +| Kind | Channel | +|------|---------| +| Issue with this case study / demo | [GitHub Issues](https://github.com/tknatwork/side-kicks/issues/new/choose) | +| Security vulnerability | **Do not open a public issue.** Use [GitHub Private Vulnerability Reporting](https://github.com/tknatwork/side-kicks/security/advisories/new) or email `hi@tusharkantnaik.com`. See [`/.github/SECURITY.md`](../.github/SECURITY.md). | + +--- + +*Last updated: 2026-06-12 (initial content scaffold — Designathon 2025 submission captured as a case study; working demo deferred to Phase 1+)* diff --git a/creativia/CLAUDE.md b/creativia/CLAUDE.md new file mode 100644 index 0000000..008cc45 --- /dev/null +++ b/creativia/CLAUDE.md @@ -0,0 +1,28 @@ + + +# CLAUDE.md — pointer + +> **The canonical AI-instruction file for CREATIVIA is [AGENTS.md](AGENTS.md).** Follow that. +> +> This file is a pointer for Claude Code's built-in file lookup and any +> tooling that still hardcodes the legacy path. +> +> AGENTS.md is the [Sourcegraph universal convention](https://agents.md). +> All builder LLMs (Claude Code, Cursor, Copilot, Aider, Continue, Gemini CLI, Codex) should read it. +> +> **Do NOT add content here.** Edits to AI-builder rules belong in [AGENTS.md](AGENTS.md). +> +> --- +> +> **Read order for new sessions inside this folder:** +> +> 1. [AGENTS.md](AGENTS.md) — Canonical project AI rules +> 2. [`.gcc/session-memory.md`](.gcc/session-memory.md) — Warm-start state (local-only, gitignored) +> 3. [`README.md`](README.md) — The public case study (narrative source of truth) +> 4. [`docs/CASE_STUDY.md`](docs/CASE_STUDY.md) · [`docs/BRAND.md`](docs/BRAND.md) · [`docs/ROADMAP.md`](docs/ROADMAP.md) +> +> The workspace-level entry point lives at the repo root: [`../AGENTS.md`](../AGENTS.md). diff --git a/creativia/LICENSE b/creativia/LICENSE new file mode 100644 index 0000000..dfc916c --- /dev/null +++ b/creativia/LICENSE @@ -0,0 +1,37 @@ +MIT License + +Copyright (c) 2025 Tushar Kant Naik + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +--- + +Note on design IP and the Lollypop Designathon: + +The MIT license above governs the source code and documentation authored in +this folder (the case-study write-up and any future demo code). + +CREATIVIA was conceived and designed by Team 6 at the Lollypop Designathon +2025 (https://lollypop.design/designathon-2025/). The original product +concept and visual design are the collective work of that team. The +"Lollypop" name, the Designathon, the provided problem statement, and the +Musician persona are the property of Lollypop Design Studio. This folder +documents Team 6's entry for educational and portfolio purposes only; the +MIT grant does not transfer any rights to the Lollypop brand or to the +team's original design IP, and implies no endorsement. diff --git a/creativia/README.md b/creativia/README.md new file mode 100644 index 0000000..c3cc646 --- /dev/null +++ b/creativia/README.md @@ -0,0 +1,229 @@ +# CREATIVIA — A Creative Co‑Pilot for Musicians + +[![Event](https://img.shields.io/badge/Lollypop-Designathon%202025-ff0f7b)](https://lollypop.design/designathon-2025/) +[![Team](https://img.shields.io/badge/Team-6-f89b29)](#team) +[![Persona](https://img.shields.io/badge/Persona-Musician%20(Raj)-2662d9)](#meet-raj) +[![Status](https://img.shields.io/badge/status-concept%20%C2%B7%20case%20study-blueviolet)](#status--roadmap) +[![Demo](https://img.shields.io/badge/working%20demo-planned-lightgrey)](#status--roadmap) + +> **"Creative flow is fragile, and every break costs more than a moment — it costs momentum."** + +**CREATIVIA** is an AI **co‑pilot for musicians** — a creative partner that captures sparks the instant they happen, turns solo practice into measurable progress, and keeps a band's ideas in one searchable place. It was designed in 24 hours at the **[Lollypop Designathon 2025](https://lollypop.design/designathon-2025/)** by **Team 6**, around the persona of **Raj, a 24‑year‑old guitarist**. + +This folder is the **case study + content home** for the project. A small **working demo** for the portfolio is planned next — see [Status & Roadmap](#status--roadmap). + +--- + +## TL;DR + +| | | +|---|---| +| **What** | An AI creative co‑pilot for musicians: capture → analyse → practise → organise | +| **Why** | Creatives lose ideas, time, and momentum when inspiration, collaboration, and organisation are scattered across disconnected tools | +| **For whom** | Raj — a gigging guitarist building his band in the local scene | +| **The bet** | A *partner, not a prompt box* — ambient, real‑time, visual interactions instead of a chat window | +| **Where** | Lollypop Designathon 2025 · Bangalore · 8–9 Aug 2025 · 24‑hour in‑person design sprint | +| **Team** | Team 6 (8 designers), mentored by Karan Gautam | + +--- + +## The brief + +> *As generative AI evolves into a creative partner, the classic chat interface has outlived its usefulness. How do we empower creatives to augment their creative process and collaborate with AI in innovative ways **without breaking their creative flow**?* + +The challenge was to design a **Creative Copilot** — an AI‑powered assistant that supports and augments creativity **without relying solely on a chat box**. The judging brief asked us to: + +- **Explore new modes of interaction** — visual, spatial, ambient, or real‑time responsive systems. +- **Adapt to the nuances of the creative process** — experimentation, iteration, improvisation. +- **Feel like a partner — not a prompt box.** + +We picked the **Musician** persona (Raj) — the highest‑bonus track in the brief — because music creation is intensely flow‑dependent and a perfect stress‑test for "don't break the flow." + +--- + +## The problem + +Creative professionals lose time and ideas when **inspiration, collaboration, and organisation are scattered across disconnected tools** — slowing progress, weakening teamwork, and making it hard to track a project's evolution. + +We don't think linearly when we create. We hop between tabs, references, ideas, drafts, and chats. Flow is a delicate mental state where ideas connect effortlessly and time fades — and every context switch breaks it. + +![What is the problem? / Who is Raj](assets/screens/02-problem-and-persona.jpg) + +--- + +## Meet Raj + +> Raj is a **24‑year‑old guitarist** who's passionate about his music. He's started his own band and is busy building their presence in the local music scene by playing live shows and creating original songs together. + +His creative life spans three recurring use cases from the brief: + +1. **Songwriting** — practising the instrument, uncovering new licks/riffs, penning lyrics, and collaborative songwriting with the band. +2. **Active listening** — learning solos and rhythm parts from his idols, documenting riffs to replicate live, aligning the band on a target sound. +3. **Rehearsals** — songwriting rehearsals (editing ideas on the fly, take by take) and performance rehearsals (recalling lyrics, cues, and parts as setlists evolve). + +### How we researched + +We ran **user interviews** across four themes — 🧠 *Creative Process*, 🎹 *Practice & Iteration*, 🤝 *Collaboration*, 🤖 *Tech & Tools* — asking things like *"When do ideas strike? Have you ever lost a good one?"* and the question that shaped the whole product: ***"Would you want AI active or silent?"*** We synthesised the findings on an affinity board (Target Audience · What Raj does · Needs · Pain points · Key Pointers). + +![User interviews — the four research themes](assets/figma/figma-03-user-interview.jpg) + +### What Raj needs + +1. To **practise** to maintain form. +2. To **document regular ideas** immediately. +3. **Validation / feedback** — from AI *and* from collaborators. +4. A **method to recall previous compositions**. +5. A **collaborative workspace** for the band. + +### Raj's pain points + +| # | Pain point | +|---|------------| +| 1 | **Loss of spontaneous ideas** — new riffs, lyrics, or melodies fade if not recorded immediately | +| 2 | **Fragmented documentation** — ideas scattered across devices, apps, or notes; retrieval is hard | +| 3 | **Limited exposure** — no structured way to explore trends and inspiration; creative growth slows | +| 4 | **Inefficient collaboration** — sharing ideas with bandmates is slow, delaying progress | +| 5 | **Lack of instant validation and feedback** | +| 6 | **Missed creative triggers** — no effective prompts during mental blocks | +| 7 | **Difficulty recalling older compositions** — past riffs, lyrics, or arrangements are hard to remember | +| 8 | **No system to track inspirations** from other songs — snippets aren't stored or accessible | +| 9 | **Difficulty maintaining records** of renditions | +| 10 | **No edit‑history tracking** — changes over time aren't logged for comparison | +| 11 | **Fear of plagiarism** when something new is composed | + +![Raj's needs and pain points](assets/screens/03-needs-and-painpoints.jpg) + +--- + +## The insight + +The team's guiding principle came from a line we kept coming back to: + +> *"I want AI to do my laundry and dishes so that I can do my art and writing — not for AI to do my art and writing so that I can do my laundry and dishes."* +> — Joanna Maciejewska + +So we set a hard design constraint: **give the creative freedom back to the creator.** CREATIVIA does the dishes — capture, analysis, organisation, recall — so Raj keeps the art. + +Through research we found that creative work tends to cycle through a handful of states — **Unrefined Skill → Practice → Document & Recall → Collaborate → Refined Skill** — and that the loop is **non‑linear** (*"we know it's non‑linear; we tried our best to put it this way"*). The product had to support *jumping between* these states, not march through them. + +![Creative freedom + the four core activities](assets/screens/04-creative-freedom-research.jpg) + +### Design principles + +- **A co‑pilot, not a replacement.** AI assists the craft; it never makes the art. +- **Capture without friction.** The fastest path from spark to saved. +- **Beyond the chat box.** Visual, ambient, real‑time‑responsive interactions. +- **Built for the band.** Individual flow that rolls up into shared, collaborative work. + +![Cover — what are we solving for + design process](assets/screens/01-cover-design-process.jpg) + +--- + +## The solution + +CREATIVIA wraps four capabilities around Raj's day, all reachable from one home prompt: **"Hey Buddy, what's on your mind now?"** — *Start Record · Upload · Messy Minds? · Find Trends.* + +### 1 · Instant Capture & Smart Analysis + +Record any spontaneous idea the moment it strikes and analyse it immediately. The system compares the recording against online references to **identify similar music, surface relevant trends, and report on key musical parameters** — preserving the idea *and* contextualising it within the current scene, so Raj refines with both creative and market awareness. Capture flows straight into **Analyse · Discover Similar · Save**. + +![Instant Capture & Smart Analysis](assets/screens/09-instant-capture-analysis.jpg) + +### 2 · Smart Practice Assistant + +During practice, Raj records a session and CREATIVIA analyses it across multiple parameters — **timing accuracy, pitch stability, tempo consistency, and more** — against a chosen reference track. It returns **instant, actionable feedback**, identifies every mistake and bottleneck, and tracks efficiency over time, making each session more focused, efficient, and measurable. + +![Smart Practice Assistant — the live practice dashboard: reference-track waveforms, an improvisation insight card, and performance metrics (Overall Accuracy · Chord Clarity · Tempo Consistency) with "what you did well" vs "areas to improve"](assets/figma/figma-04-practice-dashboard.jpg) + +### 3 · Iterate, edit & export + +Raj can pick his best takes across iterations, **edit and export** recordings, upload files from his computer, or pull recordings straight from his library — turning rough sessions into release‑ready parts. + +![How Raj practices alone + edit/export recordings](assets/screens/08-edit-export-recordings.jpg) + +### 4 · Media Library & Snippets Vault + +A **centralised media library** consolidates Raj's own recordings, shared annotations, and a discovery panel pulling inspiration from across the internet. **Advanced search and filtering** — by tune, instrument, lyric, or the smallest musical element — make ideas effortless to locate, and the best moments drop into a dedicated **Snippets Vault** built up during practice and experimentation. + +![Media library, filtering & snippets](assets/screens/11-media-library-snippets.jpg) + +### The landing concept + +The team also mocked a **CREATIVIA landing page** and distilled the design process behind it — *understanding the space → understanding the user → building a co‑pilot partner, not a replacement.* + +![The CREATIVIA landing concept + the design process](assets/figma/figma-06-landing-design-process.jpg) + +--- + +## Brand system + +A high‑energy palette on a calm, dark canvas — built so the bright colours carry meaning and the neutrals let the eyes rest. + +| Role | Token | Hex | Notes | +|------|-------|-----|-------| +| Primary | **AI Soundwave** (gradient) | `#FF0F7B → #F89B29` | Pink for passion, orange for optimism — the spark that keeps momentum going | +| Secondary | **Soundwave Blue** | `#2662D9` | Keeps things clear and steady | +| Secondary | **Accent Magenta** | `#E23670` | A little playfulness without stealing the show | +| Neutral | **Almost Black** | `#121212` | The calm canvas | +| Neutral | **White** | `#FFFFFF` | Room for the eyes to rest | + +**Type:** **Outfit** for titles (personality), **Inter** for body (clear, friendly, easy to read). + +![Branding — colours and type](assets/screens/06-branding-system.jpg) + +--- + +## Process + +Twenty‑four hours of figuring it out — understanding the space, understanding the user, and committing to a *co‑pilot, not a replacement.* + +![The process of figuring it out](assets/screens/05-process-figuring-it-out.jpg) + +> The full screen gallery lives in [`assets/screens/`](assets/screens/). A long‑form write‑up is in [`docs/CASE_STUDY.md`](docs/CASE_STUDY.md), and the brand system is detailed in [`docs/BRAND.md`](docs/BRAND.md). + +--- + +## Status & roadmap + +**Current status:** concept + content. This folder captures the Designathon submission as a structured case study so it can be showcased in a portfolio. + +| Phase | Scope | State | +|-------|-------|-------| +| **0 · Content** | Case study, persona, features, brand system, screen gallery | ✅ this folder | +| **1 · Demo scaffold** | Static portfolio page (Vite, `pnpm`) presenting the case study + screens | ⏳ planned | +| **2 · Interactive demo** | Click‑through of the key flows (capture → analyse → practice → library) | ⏳ planned | +| **3 · Polish** | Motion, responsive layout, deploy for the portfolio site | ⏳ planned | + +See [`docs/ROADMAP.md`](docs/ROADMAP.md) for the detailed plan. Build tooling for the eventual demo follows the [workspace rules](../AGENTS.md): **`pnpm` only**, pinned model IDs for any AI calls. + +--- + +## Team + +A team of **eight product designers** — Team 6 — designed CREATIVIA in 24 hours at the Lollypop Designathon 2025, mentored by **Karan Gautam**. We split into pods the way a full product‑design team would: + +| Pod | Members | Focus | +|-----|---------|-------| +| **Product direction (PM)** | Rajashekar · Dharanitharan R | Holistic product management — scope, priorities, and keeping the concept coherent end to end | +| **Persona & research** | Akash Kumaraguru · Cherrisha U Shetty | Building out Raj's persona, use cases, and pain points | +| **Presentation & dashboards** | Drishti Jain · **Tushar Kant Naik** | The show‑reel/presentation and the practice & analytics dashboard screens | +| **Graphics** | Anu Murugan · Tamilselvan | Visual assets, illustration, and brand graphics | + +**My role — Tushar Kant Naik.** With Drishti I built the **presentation and the dashboard** screens (the practice analytics / performance‑metrics views). Beyond that, I shaped several of the **niche features baked into the app** — the smaller, opinionated interactions that make CREATIVIA feel like a *partner, not a prompt box.* + +**Portfolio owner:** Tushar Kant Naik — this folder hosts the case study and the planned working demo for [tusharkantnaik.com](https://tusharkantnaik.com). + +--- + +## Credits & license + +- **Concept & design:** Team 6, Lollypop Designathon 2025. The original product concept and visual design are the collective work of the team. +- **Event:** [Lollypop Design Studio](https://lollypop.design/) — see the [Designathon 2025 page](https://lollypop.design/designathon-2025/). "Lollypop" and the Designathon are the property of Lollypop Design Studio; this folder documents Team 6's entry for educational and portfolio purposes. +- **Source brief & persona:** the Designathon problem statement and Musician persona provided by Lollypop. +- **Code & docs in this folder:** [MIT](LICENSE) © 2025 Tushar Kant Naik. + +The MIT license covers the source code and documentation authored in this folder (the case study write‑up and any future demo code). It does **not** transfer rights to the Lollypop brand or the team's original design IP. + +--- + +*Part of the [Side‑Kicks](../README.md) workspace. AI builders: start at [`AGENTS.md`](AGENTS.md).* diff --git a/creativia/assets/figma/figma-01-cover.jpg b/creativia/assets/figma/figma-01-cover.jpg new file mode 100644 index 0000000..fbee3aa Binary files /dev/null and b/creativia/assets/figma/figma-01-cover.jpg differ diff --git a/creativia/assets/figma/figma-02-solving-for.jpg b/creativia/assets/figma/figma-02-solving-for.jpg new file mode 100644 index 0000000..c5e7d80 Binary files /dev/null and b/creativia/assets/figma/figma-02-solving-for.jpg differ diff --git a/creativia/assets/figma/figma-03-user-interview.jpg b/creativia/assets/figma/figma-03-user-interview.jpg new file mode 100644 index 0000000..30b26df Binary files /dev/null and b/creativia/assets/figma/figma-03-user-interview.jpg differ diff --git a/creativia/assets/figma/figma-04-practice-dashboard.jpg b/creativia/assets/figma/figma-04-practice-dashboard.jpg new file mode 100644 index 0000000..7a2246a Binary files /dev/null and b/creativia/assets/figma/figma-04-practice-dashboard.jpg differ diff --git a/creativia/assets/figma/figma-05-userflow.jpg b/creativia/assets/figma/figma-05-userflow.jpg new file mode 100644 index 0000000..a23c9bd Binary files /dev/null and b/creativia/assets/figma/figma-05-userflow.jpg differ diff --git a/creativia/assets/figma/figma-06-landing-design-process.jpg b/creativia/assets/figma/figma-06-landing-design-process.jpg new file mode 100644 index 0000000..13c12c2 Binary files /dev/null and b/creativia/assets/figma/figma-06-landing-design-process.jpg differ diff --git a/creativia/assets/screens/01-cover-design-process.jpg b/creativia/assets/screens/01-cover-design-process.jpg new file mode 100644 index 0000000..ffd0005 Binary files /dev/null and b/creativia/assets/screens/01-cover-design-process.jpg differ diff --git a/creativia/assets/screens/02-problem-and-persona.jpg b/creativia/assets/screens/02-problem-and-persona.jpg new file mode 100644 index 0000000..a67c303 Binary files /dev/null and b/creativia/assets/screens/02-problem-and-persona.jpg differ diff --git a/creativia/assets/screens/03-needs-and-painpoints.jpg b/creativia/assets/screens/03-needs-and-painpoints.jpg new file mode 100644 index 0000000..d7c3b50 Binary files /dev/null and b/creativia/assets/screens/03-needs-and-painpoints.jpg differ diff --git a/creativia/assets/screens/04-creative-freedom-research.jpg b/creativia/assets/screens/04-creative-freedom-research.jpg new file mode 100644 index 0000000..e63f89e Binary files /dev/null and b/creativia/assets/screens/04-creative-freedom-research.jpg differ diff --git a/creativia/assets/screens/05-process-figuring-it-out.jpg b/creativia/assets/screens/05-process-figuring-it-out.jpg new file mode 100644 index 0000000..6653bb9 Binary files /dev/null and b/creativia/assets/screens/05-process-figuring-it-out.jpg differ diff --git a/creativia/assets/screens/06-branding-system.jpg b/creativia/assets/screens/06-branding-system.jpg new file mode 100644 index 0000000..a72b0ab Binary files /dev/null and b/creativia/assets/screens/06-branding-system.jpg differ diff --git a/creativia/assets/screens/07-practice-dashboard.jpg b/creativia/assets/screens/07-practice-dashboard.jpg new file mode 100644 index 0000000..ece2c44 Binary files /dev/null and b/creativia/assets/screens/07-practice-dashboard.jpg differ diff --git a/creativia/assets/screens/08-edit-export-recordings.jpg b/creativia/assets/screens/08-edit-export-recordings.jpg new file mode 100644 index 0000000..4a86269 Binary files /dev/null and b/creativia/assets/screens/08-edit-export-recordings.jpg differ diff --git a/creativia/assets/screens/09-instant-capture-analysis.jpg b/creativia/assets/screens/09-instant-capture-analysis.jpg new file mode 100644 index 0000000..43fced8 Binary files /dev/null and b/creativia/assets/screens/09-instant-capture-analysis.jpg differ diff --git a/creativia/assets/screens/10-smart-practice-assistant.jpg b/creativia/assets/screens/10-smart-practice-assistant.jpg new file mode 100644 index 0000000..ea5392f Binary files /dev/null and b/creativia/assets/screens/10-smart-practice-assistant.jpg differ diff --git a/creativia/assets/screens/11-media-library-snippets.jpg b/creativia/assets/screens/11-media-library-snippets.jpg new file mode 100644 index 0000000..f26da7e Binary files /dev/null and b/creativia/assets/screens/11-media-library-snippets.jpg differ diff --git a/creativia/docs/AGENTS.md b/creativia/docs/AGENTS.md new file mode 100644 index 0000000..751aeeb --- /dev/null +++ b/creativia/docs/AGENTS.md @@ -0,0 +1,18 @@ +# AGENTS.md — moved + +> ⚠️ PROTECTED FILE — Path retained for tooling compatibility. Do not delete. +> +> **The canonical AGENTS.md for CREATIVIA lives at the project root:** +> [`../AGENTS.md`](../AGENTS.md) +> +> This file is a redirect. Edits to AI-builder rules belong in the project-root +> `AGENTS.md`, not here. +> +> --- +> +> The Side-Kicks workspace uses the Sourcegraph AGENTS.md convention, where +> `AGENTS.md` lives at every project root. This redirect exists so tooling, +> search indexes, and external links to the `docs/` path continue to work. +> +> If you arrived here via an old link, please open [`../AGENTS.md`](../AGENTS.md) +> for the current project AI rules. diff --git a/creativia/docs/BRAND.md b/creativia/docs/BRAND.md new file mode 100644 index 0000000..3f2001c --- /dev/null +++ b/creativia/docs/BRAND.md @@ -0,0 +1,75 @@ +# CREATIVIA — Brand System + +The visual system from the Designathon submission, captured as reusable tokens for the +planned demo. A high‑energy palette on a calm, dark canvas: the bright colours carry +meaning, the neutrals let the eyes rest. + +> Source: the **"Branding" frame in Team 6's Figma design file** (the team's own documented +> swatch labels) — see also +> [`../assets/screens/06-branding-system.jpg`](../assets/screens/06-branding-system.jpg). +> These hex values are authoritative (they replace earlier pixel-sampled approximations). + +## Colour + +| Role | Token | Hex | Rationale | +|------|-------|-----|-----------| +| **Primary** | AI Soundwave (gradient) | `#FF0F7B` → `#F89B29` | Pink for passion, orange for optimism — "the spark that kicks things off and keeps the momentum going." | +| **Secondary** | Soundwave Blue | `#2662D9` | Keeps things clear and steady. | +| **Secondary** | Accent Magenta | `#E23670` | Adds a little playfulness — without stealing the show. | +| **Neutral** | Almost Black | `#121212` | The calm canvas; lets the bright colours shine. | +| **Neutral** | White | `#FFFFFF` | Room for the eyes to rest. | + +### Swatches + +``` +Primary gradient ▮ #FF0F7B → ▮ #F89B29 (AI Soundwave) +Soundwave Blue ▮ #2662D9 +Accent Magenta ▮ #E23670 +Almost Black ▮ #121212 +White ▯ #FFFFFF +``` + +### Suggested CSS custom properties (for the demo) + +```css +:root { + /* Primary — AI Soundwave gradient */ + --c-spark-pink: #FF0F7B; + --c-spark-orange: #F89B29; + --grad-soundwave: linear-gradient(90deg, var(--c-spark-pink), var(--c-spark-orange)); + + /* Secondary */ + --c-soundwave-blue: #2662D9; + --c-accent-magenta: #E23670; + + /* Neutrals */ + --c-almost-black: #121212; + --c-white: #FFFFFF; +} +``` + +## Type + +| Use | Family | Weights seen | +|-----|--------|--------------| +| **Titles** | **Outfit** | Black, Bold | +| **Body** | **Inter** | Bold, Regular, Bold Italic, Italic | + +> *"Outfit for titles, Inter for text — one keeps personality, the other keeps things easy +> to read. Together, they make the screens feel clear, friendly, and not tiring on the +> eyes."* + +Both are open‑source Google Fonts (SIL OFL), so they're safe to use in the demo. + +```css +--font-display: "Outfit", system-ui, sans-serif; +--font-body: "Inter", system-ui, sans-serif; +``` + +## Usage notes + +- Reserve the **AI Soundwave gradient** for primary actions and "AI is doing something" + moments (capture, analysis, the soundwave visual). It's the brand's signature. +- Keep large surfaces **Almost Black**; use **White** for primary text and breathing room. +- **Soundwave Blue** and **Accent Magenta** are accents — for charts, tags, and secondary + emphasis — not large fills. diff --git a/creativia/docs/CASE_STUDY.md b/creativia/docs/CASE_STUDY.md new file mode 100644 index 0000000..4dddb84 --- /dev/null +++ b/creativia/docs/CASE_STUDY.md @@ -0,0 +1,293 @@ +# CREATIVIA — Case Study + +> Long-form companion to the [README](../README.md). The README is the canonical +> narrative; this file expands the research, persona, and feature detail. Keep +> the two consistent. + +**An AI creative co‑pilot for musicians**, designed in 24 hours at the +[Lollypop Designathon 2025](https://lollypop.design/designathon-2025/) by +**Team 6**, around the persona of **Raj, a 24‑year‑old guitarist**. + +![CREATIVIA — cover](../assets/figma/figma-01-cover.jpg) + +--- + +## 1. Context — the Designathon + +The Lollypop Designathon 2025 was a **24‑hour, in‑person design sprint** held in +Bangalore on **8–9 August 2025**. Participants were design students and early‑career +professionals, selected by portfolio review, and briefed on the theme only on the +day of the event. + +**Program flow (abridged):** + +| Day | Time | Event | +|-----|------|-------| +| 08 Aug | 9:30–11:00 | Welcome, registrations & high‑tea | +| 08 Aug | 11:00–12:00 | Introduction, icebreakers & Designathon brief | +| 08 Aug | 12:00 onwards | **Designathon starts** | +| 08 Aug | 15:00–16:00 | Mentor session 1 | +| 08 Aug | 22:00–23:00 | Mentor session 2 | +| 09 Aug | 06:00 | **Clock stops** | +| 09 Aug | 07:30–09:30 | First‑round panel (6 teams shortlisted) | +| 09 Aug | 10:00–11:30 | Final jury (10‑min presentation + QnA per finalist) | +| 09 Aug | 11:30–12:00 | Winner announcement & closing | + +**Deliverables:** a **2‑minute show reel** (MP4) plus an **A4 process document** (PDF). + +**Evaluation:** Round 1 judged on *Creativity, User Empathy, Interaction Design, AI +Integration, Craft* (+ persona bonus points). Round 2 weighted 50% round‑one criteria +and 50% the live presentation. + +--- + +## 2. The brief + +> *Creative flow is fragile, and every break costs more than a moment — it costs momentum.* +> +> *As generative AI evolves into a creative partner, the classic chat interface has +> outlived its usefulness. How do we empower creatives to augment their creative process +> and collaborate with AI in innovative ways without breaking their creative flow?* + +The challenge: design a **Creative Copilot** — an AI assistant that supports and +augments creativity **without relying solely on a chat box**. Three things to honour: + +- **New modes of interaction** — visual, spatial, ambient, real‑time responsive. +- **The nuances of the creative process** — experimentation, iteration, improvisation. +- **A partner, not a prompt box.** + +**Persona choice.** The brief offered three tracks: **Musician** (+5 bonus), **Game +Designer** (+3 bonus), or any other creative (0 bonus). Team 6 chose the **Musician** — +the most flow‑dependent and the highest‑bonus track. + +--- + +## 3. The persona — Raj + +> Raj is a 24‑year‑old guitarist. He has a band of his own and is working to establish +> its name in the local music scene by playing live gigs and writing original +> compositions. He balances work and music, practising individually and rehearsing with +> the band to tighten their sets. + +Raj's life maps to three use cases from the persona brief: + +### Use case 1 — Songwriting +- **Instrument:** hours of consistent practice — pieces, scales, finger exercises — to + stay in top playing form. Mid‑practice he uncovers new licks/riffs that spark song + ideas and documents them to develop and share later. +- **Lyric:** he writes lyrics, minding rhyme, imagery, and meaning. Sometimes the + instrument leads the story; sometimes words arrive first and must be captured + immediately, then matched to music. +- **Collaborative songwriting:** he shares work with bandmates so they can edit it or + build their own parts, and welcomes feedback — the band needs synergy. + +### Use case 2 — Active listening +Listening shapes a musician's identity. Raj studies his idols on repeat, learns solos +and rhythm parts, documents riffs to replicate live, and shares song sections with the +band to align on a target sound and quality. + +### Use case 3 — Rehearsals +- **Songwriting rehearsals:** the band demonstrates documented ideas live, editing on + the fly take by take, logging changes, and splicing the best sections into the perfect + part. +- **Performance rehearsals:** setlists evolve by venue and audience. Recalling lyrics, + cues, and each member's parts is a struggle — forgotten cues between songs and between + movements break the band's momentum. + +--- + +## 4. Research + +### Method — user interviews + +Before designing, Team 6 ran **user interviews** structured around four themes (captured on +the research frame in the design file): + +| Theme | Questions explored | +|-------|--------------------| +| 🧠 **Creative Process** | When do ideas strike? How do you capture them? Have you ever lost a good one? | +| 🎹 **Practice & Iteration** | How do you recall variations? What helps you choose the best version? | +| 🤝 **Collaboration** | How do you share ideas? What makes group rehearsals messy? | +| 🤖 **Tech & Tools** | What's helpful vs disruptive? Would you want AI *active* or *silent*? | + +That last question — *active or silent?* — shaped the whole product: CREATIVIA stays +ambient and on‑demand, never a chatbot demanding attention. + +![User Interview — the four research themes](../assets/figma/figma-03-user-interview.jpg) + +### Synthesis — the affinity board + +The interviews and persona were mapped on a large affinity board across five lenses — +**Target Audience · What Raj does · Needs · Pain points · Key Pointers** — and broken down +by the three use cases (Songwriting, Active Listening, Rehearsals). The "Key Pointers" lens +framed *who* to build for: **Target‑Audience Discoverability, Geography, Relevance, +Popularity.** Notable signals that surfaced here (and fed the features): *"needs a record of +liked snippets — easily selectable & sharable," "requirement of triggers to remove mental +blocks," "needs a history/timeline," "splice sections from multiple tracks," "maintaining +file‑format consistency for smoother workflow,"* and *"align teammates on a singular aim in +sound & quality."* + +**The problem, stated:** Creative professionals lose time and ideas when inspiration, +collaboration, and organisation are scattered across disconnected tools — slowing progress, +weakening teamwork, and making it hard to track a project's evolution. + +### What Raj needs (5) +1. To **practise** to maintain form. +2. To **document regular ideas** immediately. +3. **Validation / feedback** — from AI *and* collaborators. +4. A **method to recall previous compositions**. +5. A **collaborative workspace** for the band. + +### Raj's pain points (11) +1. **Loss of spontaneous ideas** — new riffs, lyrics, or melodies fade if not recorded immediately. +2. **Fragmented documentation** — ideas scattered across devices, apps, or notes; retrieval is hard. +3. **Limited exposure** — no structured way to explore trends and inspiration; creative growth slows. +4. **Inefficient collaboration** — sharing ideas with bandmates is slow, delaying progress. +5. **Lack of instant validation and feedback.** +6. **Missed creative triggers** — no effective prompts during mental blocks. +7. **Difficulty recalling older compositions** — past riffs, lyrics, or arrangements are hard to remember. +8. **No system to track inspirations from other songs** — snippets aren't stored or accessible. +9. **Difficulty maintaining records of renditions.** +10. **No edit‑history tracking** — changes over time aren't logged for comparison. +11. **Fear of plagiarism** when something new is composed. + +--- + +## 5. The insight & design principles + +The team anchored on Joanna Maciejewska's line: + +> *"I want AI to do my laundry and dishes so that I can do my art and writing — not for +> AI to do my art and writing so that I can do my laundry and dishes."* + +So the constraint became: **give the creative freedom back to the creator.** CREATIVIA +handles capture, analysis, organisation, and recall — the "dishes" — and leaves the art +to Raj. + +Research showed creative work cycles through five states — +**Unrefined Skill → Practice → Document & Recall → Collaborate → Refined Skill** — and that +the loop is **non‑linear** (*"we know it's non‑linear; we tried our best to put it this +way"*). The product had to support jumping between these states rather than enforcing a sequence. + +**Design process — three moves:** *understanding the space* → *understanding the user* → +**building a co‑pilot partner, not a replacement.** + +**Design principles** +- **A co‑pilot, not a replacement.** AI assists the craft; it never makes the art. +- **Capture without friction.** The shortest path from spark to saved. +- **Beyond the chat box.** Visual, ambient, real‑time‑responsive interactions. +- **Built for the band.** Individual flow that rolls up into shared work. + +![Userflow — early flow sketches mapping how the screens connect](../assets/figma/figma-05-userflow.jpg) + +--- + +## 6. The solution + +![What are we solving for → Solution](../assets/figma/figma-02-solving-for.jpg) + +Everything is reachable from one home prompt — **"Hey Buddy, what's on your mind now?"** — +with four entry points: **Start Record · Upload · Messy Minds? · Find Trends.** + +### 6.1 Instant Capture & Smart Analysis +Record any spontaneous idea the instant it strikes and analyse it immediately. CREATIVIA +compares the recording against online references to **identify similar music, surface +relevant trends, and report key musical parameters** — preserving the idea *and* +contextualising it within the current scene. Capture flows into **Analyse · Discover +Similar · Save**, so an idea never dies in the moment and Raj refines with both creative +and market awareness. + +### 6.2 Smart Practice Assistant +Raj selects a reference track (e.g. a remaster), records a section, and CREATIVIA analyses +the take across **timing accuracy, pitch stability, tempo consistency, string changes, +and more**. It returns **instant, actionable feedback**, pinpoints every mistake and +bottleneck, and visualises reference‑vs‑user waveforms and performance metrics — making +each session focused, efficient, and measurable, with progress tracked over time. + +![Practice Session Analysis dashboard — reference-track waveforms, an improvisation insight card, and performance metrics (Overall Accuracy 78% · Chord Clarity 92% · Tempo Consistency 88%) split into "what you did well" vs "areas to improve"](../assets/figma/figma-04-practice-dashboard.jpg) + +### 6.3 Iterate, edit & export +Raj picks his best takes across iterations, **edits and exports** recordings, uploads +files from his computer, or imports recordings from his library — turning rough sessions +into release‑ready parts and preserving the evolution of a song. + +### 6.4 Media Library & Snippets Vault +A **centralised media library** consolidates Raj's recordings, shared annotations, and a +discovery panel pulling inspiration from across the internet. **Advanced search and +filtering** — by tune, instrument, lyric, or the smallest musical element — make ideas +effortless to find, and the best moments land in a dedicated **Snippets Vault** built up +during practice and experimentation. + +### The landing concept + +A **CREATIVIA landing page** was mocked alongside the product, distilling the design +process behind it — *understanding the space → understanding the user → building a co‑pilot +partner, not a replacement.* + +![The CREATIVIA landing concept + design process](../assets/figma/figma-06-landing-design-process.jpg) + +### How the features answer the pain points + +| Pain point | Addressed by | +|------------|--------------| +| Loss of spontaneous ideas (1) | Instant Capture | +| Fragmented documentation (2) | Media Library | +| Limited exposure / trends (3) | Smart Analysis · Find Trends | +| Inefficient collaboration (4) | Shared annotations · band workspace | +| Lack of instant validation & feedback (5) | Smart Analysis feedback | +| Missed creative triggers (6) | "Messy Minds?" prompts | +| Recalling older compositions (7) | Library + advanced search | +| No system to track inspirations (8) | Snippets Vault | +| Maintaining records of renditions (9) | Versioned library | +| No edit‑history tracking (10) | Iteration history | +| Fear of plagiarism (11) | Similarity / reference comparison in Analysis | + +--- + +## 7. Brand & craft + +See [`BRAND.md`](BRAND.md) for the full token set. In short: a high‑energy +**pink→orange "AI Soundwave"** gradient for momentum, **Soundwave Blue** and **Accent +Magenta** as supporting tones, on an **Almost Black** canvas with **White** for rest. +Type pairs **Outfit** (titles) with **Inter** (body). + +--- + +## 8. Team & attribution + +A team of **eight product designers** — Team 6 — built CREATIVIA in 24 hours, mentored by +**Karan Gautam**, organised into pods like a full product‑design team: + +| Pod | Members | Focus | +|-----|---------|-------| +| Product direction (PM) | Rajashekar · Dharanitharan R | Holistic PM — scope, priorities, end‑to‑end coherence | +| Persona & research | Akash Kumaraguru · Cherrisha U Shetty | Raj's persona, use cases, pain points | +| Presentation & dashboards | Drishti Jain · **Tushar Kant Naik** | Show‑reel/presentation + practice & analytics dashboards | +| Graphics | Anu Murugan · Tamilselvan | Visual assets, illustration, brand graphics | + +**Tushar Kant Naik (portfolio owner):** built the presentation and dashboard screens with +Drishti, and shaped several of the niche features baked into the app. + +The concept and visual design are the team's collective work. This case study documents +the entry for educational and portfolio purposes — see [`../LICENSE`](../LICENSE) for the +design‑IP note. + +--- + +## 9. Artifacts & sources + +**Design artifacts captured** into [`../assets/figma/`](../assets/figma/): the cover, the +**user‑interview** frame, the **Practice Session Analysis dashboard**, the **userflow** +sketches, and the **landing‑page** concept. (The page itself is named *"Documentation"* in +the Figma file.) + +**Sources:** +- Lollypop Designathon 2025 problem statement (brief, program flow, evaluation). +- Musician persona brief (Raj — use cases 1–3). +- Team 6's **Figma design file** (`aY0lWks0P4pMxdAIB694TV`) — the design page (node + `2:433`) and the affinity/research board (node `129:5851`); the source of the brand + tokens, the user‑interview research, the canonical needs/pains, and the images in + [`../assets/figma/`](../assets/figma/). +- Team 6's A4 process document (PDF) — the source of the gallery in + [`../assets/screens/`](../assets/screens/). +- [Designathon 2025 event page](https://lollypop.design/designathon-2025/). diff --git a/creativia/docs/CHANGELOG.md b/creativia/docs/CHANGELOG.md new file mode 100644 index 0000000..bb96f0e --- /dev/null +++ b/creativia/docs/CHANGELOG.md @@ -0,0 +1,84 @@ +# Changelog — CREATIVIA + +> ⚠️ PROTECTED FILE - DO NOT DELETE +> This file must NEVER be deleted during cleanup or overhaul operations. +> Instead, rewrite its contents to reflect the new direction. + +All notable changes to the CREATIVIA project are documented here. + +**Repository:** https://github.com/tknatwork/side-kicks/tree/main/creativia + +--- + +## [0.2.0] - 2026-06-13 + +### 🔍 Enriched from the Figma design file + +Folded in content read directly from Team 6's Figma design file (design page `2:433`, +research board `129:5851`) — richer and more accurate than the A4 PDF the v0.1.0 scaffold +was built from. + +### Added +- **User-interview research method** — four themes (🧠 Creative Process · 🎹 Practice & + Iteration · 🤝 Collaboration · 🤖 Tech & Tools) with their questions, in + [`../README.md`](../README.md) and [`CASE_STUDY.md`](CASE_STUDY.md). +- **Affinity-board synthesis** (Target Audience · What Raj does · Needs · Pain points · Key + Pointers) and per-use-case breakdowns in `CASE_STUDY.md`. +- New Figma-sourced assets in [`../assets/figma/`](../assets/figma/) — cover, "what are we + solving for", the **User Interview** frame, the high-fidelity **Practice Session Analysis + dashboard**, the **userflow** sketches, and the **landing-page** concept (pulled from a + duplicate of the file once the live frames were shared). +- Note of additional design artifacts (a **Userflow** diagram and a **landing-page** mockup). + +### Changed / Fixed +- **Brand tokens corrected to the documented Figma values:** primary gradient + **`#FF0F7B → #F89B29`** (was `#FE1E72→#F89030`) and **Accent Magenta `#E23670`** (was + `#E32678`). Updated `BRAND.md`, README (table + badges), and the CSS variables. +- **Pain points 10 → 11** — added "Lack of instant validation and feedback"; needs stated as the canonical 5. +- **Creative loop corrected:** Unrefined Skill → Practice → Document & Recall → Collaborate + → **Refined Skill** (was "Improvise"). +- Sources/attribution now credit the Figma design file (nodes `2:433`, `129:5851`). + +--- + +## [0.1.0] - 2026-06-12 + +### 🎸 Initial content scaffold — Designathon 2025 submission captured + +First version of the project: the Lollypop Designathon 2025 entry (Team 6, +Musician persona) captured as a structured, portfolio‑ready case study. Content +first; the working demo is deferred to a later phase. + +### Added +- **Case study** ([`README.md`](../README.md)) — brief, problem, persona (Raj), + research, needs, pain points, solution (4 features), brand system, team & credits. +- **Long-form write-up** ([`CASE_STUDY.md`](CASE_STUDY.md)) — Designathon context, + program flow, evaluation, detailed persona use cases, pain‑point→feature mapping. +- **Brand system** ([`BRAND.md`](BRAND.md)) — colour tokens (AI Soundwave gradient, + Soundwave Blue, Accent Magenta, Almost Black, White) + Outfit/Inter type, with + CSS custom properties for the demo. +- **Roadmap** ([`ROADMAP.md`](ROADMAP.md)) — phased plan from content → static demo + → interactive demo → ship. +- **Screen gallery** ([`../assets/screens/`](../assets/screens/)) — 11 optimised + images rendered from the team's A4 process document. +- **Project scaffold** — `AGENTS.md`, `CLAUDE.md`, `LICENSE` (MIT + design‑IP note), + `docs/` redirects, `.github/copilot-instructions.md` + issue templates. + +### Notes +- `.gcc/` session memory is gitignored workspace‑wide (local only). +- Team documented as four design pods (PM · persona & research · presentation & + dashboards · graphics); the owner's role (presentation & dashboards + niche + features) is credited within the wider Team 6 effort. + +--- + +## Changelog Scope + +| Level | Tracks | +|-------|--------| +| Workspace `docs/CHANGELOG.md` | New projects, folder structure changes | +| **This file** | CREATIVIA content + demo changes | + +--- + +*Format based on [Keep a Changelog](https://keepachangelog.com/)* diff --git a/creativia/docs/CLAUDE.md b/creativia/docs/CLAUDE.md new file mode 100644 index 0000000..ec0f75b --- /dev/null +++ b/creativia/docs/CLAUDE.md @@ -0,0 +1,12 @@ +# CLAUDE.md — moved + +> ⚠️ PROTECTED FILE — Path retained for tooling compatibility. Do not delete. +> +> **The canonical CLAUDE.md pointer for CREATIVIA lives at the project root:** +> [`../CLAUDE.md`](../CLAUDE.md) +> +> The canonical AGENTS.md (which CLAUDE.md points to) lives at +> [`../AGENTS.md`](../AGENTS.md). +> +> This file is a redirect. Do not add content here. Edits to AI-builder +> rules belong in the project-root `AGENTS.md`. diff --git a/creativia/docs/ROADMAP.md b/creativia/docs/ROADMAP.md new file mode 100644 index 0000000..3ebe481 --- /dev/null +++ b/creativia/docs/ROADMAP.md @@ -0,0 +1,51 @@ +# CREATIVIA — Roadmap + +From Designathon case study to a small **working demo** for the portfolio site. + +> Build tooling follows the [workspace rules](../../AGENTS.md): **`pnpm` only** +> (never `npm`/`npx`), pinned model IDs for any AI calls, no workspace‑level CI. +> Update [`AGENTS.md`](../AGENTS.md) and [`CHANGELOG.md`](CHANGELOG.md) when a phase starts. + +## Phase 0 — Content ✅ (current) + +The Designathon submission captured as a structured case study. + +- [x] Project scaffold matching the Side‑Kicks conventions (`AGENTS.md`, `CLAUDE.md`, `README.md`, `LICENSE`, `docs/`). +- [x] Case study: brief, persona, research, needs, pain points, solution, brand. +- [x] Optimised screen + process gallery in `assets/screens/`. +- [x] Registered in the workspace `README.md`, `AGENTS.md`, and `docs/CHANGELOG.md`. +- [ ] Fill the owner's specific contribution in `README.md` (TODO). + +## Phase 1 — Demo scaffold ⏳ + +A static, deployable page that presents the case study and screens well. + +- [ ] Decide stack — **proposed: Vite + TypeScript** (static‑first, easy to embed in the portfolio). +- [ ] `pnpm` project inside `creativia/` (e.g. `creativia/demo/` or this root). +- [ ] Apply the [brand tokens](BRAND.md) (colours, Outfit/Inter type). +- [ ] Sections: hero → problem → Raj → research → solution (4 features) → brand → credits. +- [ ] Responsive, accessible, lighthouse‑clean. + +## Phase 2 — Interactive demo ⏳ + +A click‑through of the signature flows — not a real backend, a believable prototype. + +- [ ] **Capture → Analyse** — "Hey Buddy" home → record (mock) → soundwave → similarity/trends result. +- [ ] **Smart Practice** — pick a reference → record (mock) → metrics + reference‑vs‑user waveform. +- [ ] **Library & Snippets** — browse, filter by tune/instrument/lyric, save to the vault. +- [ ] Mocked data + canned AI responses; if any real model call is added, **pin the model ID**. + +## Phase 3 — Polish & ship ⏳ + +- [ ] Motion/transitions that reinforce "flow." +- [ ] Final responsive + a11y pass. +- [ ] Deploy (static host) and embed/link from [tusharkantnaik.com](https://tusharkantnaik.com). +- [ ] 2‑min show reel link (if available) on the case study. + +## Open questions + +- Scope of the interactive demo — full four‑feature click‑through, or a single hero flow first? +- Host target (Cloudflare Pages / GitHub Pages / portfolio‑embedded)? +- Do we recreate the screens as live HTML/CSS, or present the existing mockups with light interactivity? + +> These are decisions for the owner before Phase 1 — don't assume them. diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 28d9f56..45bd442 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -6,12 +6,32 @@ This changelog tracks **folder-level structure changes only**. -For project-specific changes, see the active project's changelog: +For project-specific changes, see each project's changelog: - `variables-styles-extractor/docs/CHANGELOG.md` +- `creativia/docs/CHANGELOG.md` --- -## [Unreleased] - Workspace reduced to a single project +## [Unreleased] - New project: CREATIVIA (design case study) + +### Added +- **`creativia/`** — CREATIVIA, an AI creative co‑pilot for musicians, captured as a + structured case study from the [Lollypop Designathon 2025](https://lollypop.design/designathon-2025/) + (Team 6, Musician persona). Content‑first scaffold: README case study, `docs/CASE_STUDY.md`, + `docs/BRAND.md`, `docs/ROADMAP.md`, an optimised screen gallery in `assets/screens/`, plus the + standard project files (`AGENTS.md`, `CLAUDE.md`, `LICENSE`, redirects, Copilot + issue templates). + A working demo for the portfolio is planned (see the project roadmap). +- The workspace now hosts **two active projects** of different types: a Figma plugin + (`variables-styles-extractor/`) and a design case study (`creativia/`). + +### Changed +- Root `README.md` and `AGENTS.md` updated from the single‑project layout to a + two‑project layout (Projects table, repository layout tree, project‑scope rules, + and "what this repo is" framing now includes design case studies). + +--- + +## [Previous] - Workspace reduced to a single project ### Removed - **`nectar-design-toolkit/`** and **`Design System Builder/`** were removed from the repository. The workspace now hosts a single active project, `variables-styles-extractor`.