NOTTALYS, Personalized Wedding Song
When I first imagined NOTTALYS, I had one clear idea: what if couples could have a song as unique as their love story?
In this case study, I explain how I took that idea from concept to live MVP, covering branding, UX/UI, front-end, animations, videos, and product thinking.
Overview
NOTTALYS is a digital product that creates fully personalized wedding songs based on a couple’s story.
Instead of using generic love songs or stock music, couples receive a unique piece of music designed specifically for their relationship, their memories and their emotional context.
The project explores the intersection of:
- Emotional design
- AI-assisted creation
- Product strategy
- Brand identity
- Front-end implementation
It was designed and built as an MVP-first product, focused on clarity, emotion and real-world usability.
Problem
Most wedding music is:
- Generic
- Reused
- Not emotionally linked to the couple’s story
Couples want:
- A meaningful moment
- A unique memory
- Something they can keep after the wedding
But custom music creation is:
- Expensive
- Slow
- Hard to access
There was a gap between:
high emotional value and accessible creation tools.
Solution – Personalized Wedding Song Product
NOTTALYS proposes a new approach:
- Couples tell their story
- The product transforms it into a song
- The result becomes part of their ceremony or first dance
The product is:
- Story-driven
- Emotion-centered
- Technology-assisted
- Brand-oriented
NOTTALYS is not only a service, but a narrative experience.
Product positioning
NOTTALYS is positioned as:
- A premium emotional product
- A digital creative service
- A wedding memory tool
- A storytelling interface
It is not presented as:
- A technical AI tool
- A music generator
- A mass-produced service
But as:
a personal and meaningful creation
Branding & brand identity
NOTTALYS is a brand created from scratch.
I designed:
- The brand name
- The logo
- The visual identity
- The tone of voice
The goal was to create a brand that feels personal and emotional,
while remaining modern and easy to recognize.
Logo design
The logo was designed with:
- Minimal shapes
- Strong legibility
- Easy digital integration
- Animation compatibility
It works:
- In monochrome
- On light and dark backgrounds
- As static and animated
The logo acts as:
- A signature
- A quality mark
- A visual anchor for the product
User flow
The user journey is intentionally simple:
- Discover the concept
- Understand the emotional value
- Listen to examples
- Share their story
- Receive a personalized song
The flow minimizes:
- Cognitive load
- Technical explanations
- Form complexity
It maximizes:
- Emotional projection
- Trust
- Storytelling
UX principles
The UX was built around three main principles:
1. Emotional clarity
The interface avoids technical vocabulary and focuses on:
Feelings
Memories
Meaning
↓
2. Progressive disclosure
Information is revealed step by step:
Concept
Process
Examples
Contact
No complex onboarding is required.
↓
3. Low friction
The product is usable without:
Accounts
Dashboards
Learning curve
The goal is to keep the experience close to a real human conversation.
UI & artistic direction
The visual language is:
- Soft
- Minimal
- Elegant
- Timeless
Key choices:
- Serif typography for emotion
- Sans-serif for readability
- Light color palette
- Strong use of white space
The interface avoids:
- Over-decoration
- Wedding clichés
- Overly romantic symbols
The objective was to feel:
modern, emotional and premium.
Design system
A lightweight design system was created to ensure:
- Visual consistency
- Faster iteration
- Scalability
It includes:
- Color tokens
- Typography rules
- Spacing scale
- Buttons and components
- Animation principles
The system supports:
- Content-driven layouts
- Emotional readability
- Mobile-first usage
Technical Implementation – Front-end + Deployment Stack
The product was developed using:
- Eleventy (static site generator)
- Tailwind CSS
- Alpine.js
- GitHub Pages
- Lottie animations
This stack was chosen for:
- Performance
- Simplicity
- Low infrastructure cost
- Easy deployment
The source code is available on GitHub for transparency and documentation purposes:
AI-assisted development
AI tools were also used during development:
Claude (Anthropic) for code assistance
Logic debugging
Component generation
Refactoring
AI was used as:
A development assistant
A learning tool
A productivity multiplier
Not as an automatic solution, but as:
a collaborative tool.
Strategy: MVP-first approach
The project follows a MVP logic:
- Launch fast
- Validate interest
- Iterate on real feedback
Instead of:
- Building a full platform
- Complex dashboards
- Large back-end systems
The focus was:
- A clear landing experience
- A strong emotional narrative
- A working concept
The MVP answers:
“Does this idea make sense emotionally and practically?”
Role and responsibilities
I worked on the project as:
- Product designer
- UX/UI designer
- Brand designer (name, logo, identity)
- Front-end developer
- Motion & video creator
This allowed:
- Full coherence
- Faster iteration
- Direct design-to-code workflow
- Consistent storytelling
Key learnings
This project highlighted:
- The importance of emotional UX
- The power of narrative in product design
- The usefulness of AI as a creative and technical tool
- The value of MVP thinking
- The relevance of brand design inside product design
Conclusion
NOTTALYS is a product experiment that combines:
- Storytelling
- Music
- AI
- Design
- Brand
- Technology
It shows how:
A simple idea can become a meaningful digital experience when:
- Emotion
- Strategy
- Design
- Technology
work together.
Interested in similar work?
I design products from concept to code: branding, UX, front-end, and deployment.