Design Engineering Portfolio
How I Design
A deep dive into how I designed and built Nurturli — an AI companion for parents — from product philosophy to design system to production code, across web and mobile.
Featured system
Subtle Neobrutal
Neobrutalism's honesty, without its aggression
The Project
Designing Nurturli
Nurturli is an AI companion for parents — it helps them navigate the daily challenges of raising children through personalized conversations, actionable guidance, and emotional support. Not another parenting blog. Not a generic chatbot. A tool that actually understands your specific child and your specific situation.
As the founder, I wore every hat — backend architecture, AI integration, mobile development, infrastructure. But of all the hats, designing the user experience was the one that scared me the most. I could write APIs in my sleep. I could debug database queries at 2am. But making something feel right to a stressed parent? That required a completely different kind of thinking.
It became the most rewarding part of building Nurturli. Learning to see through users' eyes — to feel the weight of a shadow, the warmth of a color, the trust implied by how a button responds to touch — fundamentally changed how I approach engineering. I stopped building features and started crafting experiences. The technical skills made it possible; the design empathy made it meaningful.
I built the full stack end-to-end: Next.js and Flutter frontends, a FastAPI backend with the AI conversation layer, and the design system that ties it all together. The central design challenge was a genuine tension: the interface needed to feel confident and structured — parents are overwhelmed, they need clarity — while also feeling warm and non-judgmental — parenting apps that feel clinical get uninstalled.
Product
Nurturli
AI companion for parents
incl. design engineering
125+ stories
Storybook
2 platforms
Cross-platform
60+ components
Design system
Full stack
End-to-end
Guiding Principle
“Parents Know Best”
Every design decision at Nurturli filters through this principle. Support, don't prescribe. Reduce friction, not agency. Celebrate progress, not perfection. The product exists to enhance parental wisdom, never to replace it. What follows is a deep dive into how that philosophy became a visual system, an interaction language, and a cross-platform component library.
Process
My process, in three layers
Every project I touch follows this progression — from values to interaction language to encoded systems.
Philosophy first, pixels later
Before touching any design tool, I articulate the product's core principles as constraints. For Nurturli, "Parents Know Best" became the guardrail — every visual choice, every interaction pattern was measured against it. When we needed a progress tracker, this principle killed streak counters and guilt-inducing red X's before I'd drawn a single wireframe.
Design the interaction language
I don't think in components first. I think in what does this feel like to touch? For Nurturli, I developed "Subtle Neobrutal" — borrowing neobrutalism's honesty and tactility while stripping away its aggression. Every interactive element follows a consistent physical metaphor: press down, shadow compresses. Lift, shadow grows. Touch-first, not hover-dependent.
Encode decisions as systems
I don't believe in design systems that live in Figma and die in implementation. The system IS the code. Design tokens, Tailwind configs, theme files — these are the source of truth. The same NeoBrutalButton exists in React and Flutter with identical shadow offsets, animation durations, and press compression. Not cargo-culted — arrived at independently on both platforms.
Interactive Playground
Subtle Neobrutal — the design system
Neobrutalism's honesty and tactility, without its aggression. Explore each design decision interactively.
How zero-blur offset shadows create a tactile interaction language
Press and hold the card
Resting
Shadow Properties
Presets
Why zero blur?
Neobrutal shadows use blur: 0to create a “stacked paper” depth. It's more honest about being a thing on screen — tactile rather than atmospheric. I softened the aggression by dropping opacity to 0.2 instead of solid black.
Design Process
Storybook as design tool
I don't design in Figma and hand off to developers. I design in Storybook — where the output isn't a picture of a button, it's the actual button. With AI-assisted code generation, this workflow becomes unreasonably fast.
The output of my design process isn't a mockup that needs “translation.” It's production-ready components.
125+
Story files
4 tiers
Atoms → Pages
2
Design variants
Chromatic
Visual regression
Describe the intent to AI
I describe what the component should do, how it should feel, and which design tokens to use. The AI generates the first version — a real React component with real Tailwind classes, not a static mockup.
"Build a NeoBrutalButton with: - Variants: primary (coral), secondary (sky) - 2px black border, offset shadow - Press state: shadow compresses to 1px - Touch targets: minimum 44×44px - Use AppColors.primary for fill"
Traditional vs. my workflow
Figma → Handoff → Code
- ✕Design in Figma (static)
- ✕Export specs, redlines
- ✕Developer re-implements
- ✕“Doesn't match design” tickets
AI + Storybook → Ship
- ✓Design in code (interactive)
- ✓AI generates real components
- ✓Iterate in Storybook live
- ✓Ship the design artifact directly
Case Study
When philosophy reshapes the entire UX
Nurturli's Actions feature — small activities parents do with their children during calm moments. The obvious pattern was a task list. Here's why I rejected it.
The Core Reframing
Actions are proactive micro-interventions, not tasks.
The Problem
Child has a spitting habit
Reactive: “Don't spit!” “That's disgusting!” Time-outs.
The Action
“Silly Mouth Games”
5 minutes at bath time. Practice funny sounds and faces together. Builds mouth awareness through play. Done daily when child is calm. Over 1–2 weeks, the habit fades.
Design Decisions
Pattern view showing frequency — no guilt on missed days
Natural ending — parent decides when the concern has improved
"This isn't working" pivots to a new approach — zero shame
One-tap "I did this" — 5-min activity ≠ 2-min log
"How are things going?"
No red
Error states use sunset blush (#FFC4BC) — warm coral, not alarming red. The UI never punishes.
No streaks
Progress shows patterns over time. No daily pressure, no broken-streak guilt. Parents set the pace.
Natural endings
Actions don't "complete." They serve their purpose when the behavior improves, then gracefully close.
Principles
What I believe about design engineering
The best design decisions are invisible.
Nobody using Nurturli thinks about the asymmetric border radius or the zero-blur shadows. They just feel like the app is clear, confident, and on their side.
Design systems should be code, not documentation.
If the design decision isn't in the tailwind.config.js or the app_theme.dart, it doesn't exist. Tokens, not PDFs.
Touch first, always.
Even for "web apps." The constraint of designing for a tired parent holding a phone one-handed produces better design for everyone.
Start with what you won't do.
The most powerful decisions in Nurturli were subtractions: no streak counters, no red error states, no hover-only interactions, no guilt-inducing language.