Nausica Triolo
Nausica Triolo
Nausica Triolo
Soundboks App
Redesigning the Soundboks App: dark mode, scalable UX, and a unified design system.
Soundboks App
Redesigning the Soundboks App: dark mode, scalable UX, and a unified design system.
Soundboks App
Redesigning the Soundboks App: dark mode, scalable UX, and a unified design system.
Role: Lead designer
Platform: iOS & Android
Contribution: Visual direction, UX/UI, Design system
The original Soundboks app had some challenges — no design system, lots of inconsistencies between design and development, and a layout that made it hard to tell which actions were most important for users.
To fix this, I led a full redesign of the app. We switched to a dark theme that feels better for nighttime use (when people actually use the product) and built a brand-new, scalable design system from scratch. Every component was reusable and perfectly matched with the development team’s codebase. This gave us a shared language between design and development, making the workflow smoother, delivery faster, and the user experience much more consistent.
Role: Lead designer
Platform: iOS & Android
Contribution: Visual direction, UX/UI, Design system
The original Soundboks app had some challenges — no design system, lots of inconsistencies between design and development, and a layout that made it hard to tell which actions were most important for users.
To fix this, I led a full redesign of the app. We switched to a dark theme that feels better for nighttime use (when people actually use the product) and built a brand-new, scalable design system from scratch. Every component was reusable and perfectly matched with the development team’s codebase. This gave us a shared language between design and development, making the workflow smoother, delivery faster, and the user experience much more consistent.
Role: Lead designer
Platform: iOS & Android
Contribution: Visual direction, Design systems, final UX/UI
The original Soundboks app had some challenges — no design system, lots of inconsistencies between design and development, and a layout that made it hard to tell which actions were most important for users.
To fix this, I led a full redesign of the app. We switched to a dark theme that feels better for nighttime use (when people actually use the product) and built a brand-new, scalable design system from scratch. Every component was reusable and perfectly matched with the development team’s codebase. This gave us a shared language between design and development, making the workflow smoother, delivery faster, and the user experience much more consistent.
Before:
Before:
Before:
After:
After:
After:
Design systems
I built a scalable design system from the ground up that works seamlessly for both design and development. The color palette followed a dark-first approach (great for night use) with a flexible grayscale that makes adding new shades easy. Typography was systematized too, with clear rules for size, spacing, and weight — all tied directly to design tokens in code.
Every component is smart and responsive, so designers don’t have to tweak spacing or states manually. Everything stays consistent across the product, and because the system is 1:1 matched with the developer codebase, handoff is faster, errors are reduced, and both teams share the same source of truth.
Design systems
I built a scalable design system from the ground up that works seamlessly for both design and development. The color palette followed a dark-first approach (great for night use) with a flexible grayscale that makes adding new shades easy. Typography was systematized too, with clear rules for size, spacing, and weight — all tied directly to design tokens in code.
Every component is smart and responsive, so designers don’t have to tweak spacing or states manually. Everything stays consistent across the product, and because the system is 1:1 matched with the developer codebase, handoff is faster, errors are reduced, and both teams share the same source of truth.
Design systems
I built a scalable design system from the ground up that works seamlessly for both design and development. The color palette followed a dark-first approach (great for night use) with a flexible grayscale that makes adding new shades easy. Typography was systematized too, with clear rules for size, spacing, and weight — all tied directly to design tokens in code.
Every component is smart and responsive, so designers don’t have to tweak spacing or states manually. Everything stays consistent across the product, and because the system is 1:1 matched with the developer codebase, handoff is faster, errors are reduced, and both teams share the same source of truth.
Key outcomes
Scalable, smart design system that ensured consistency, flexibility, and 1:1 alignment with the developer codebase.
Improved overall UX/UI by introducing a dark theme, clarifying task hierarchy, and optimizing the app for real-world use at night.
Streamlined design-to-dev handoff, reducing implementation time and eliminating manual adjustments through fully responsive, reusable components.
Key outcomes
Scalable, smart design system that ensured consistency, flexibility, and 1:1 alignment with the developer codebase.
Improved overall UX/UI by introducing a dark theme, clarifying task hierarchy, and optimizing the app for real-world use at night.
Streamlined design-to-dev handoff, reducing implementation time and eliminating manual adjustments through fully responsive, reusable components.
Key outcomes
Scalable, smart design system that ensured consistency, flexibility, and 1:1 alignment with the developer codebase.
Improved overall UX/UI by introducing a dark theme, clarifying task hierarchy, and optimizing the app for real-world use at night.
Streamlined design-to-dev handoff, reducing implementation time and eliminating manual adjustments through fully responsive, reusable components.