Szalty: Architecting a Dev-Ready MVP from a Chaotic AI-Generated Design
Lead Designer (MVP Handoff & Systemisation)
Founder, Shareholder, 1 Senior Dev, Lead Designer, 2 Junior Devs
Product Strategy, UX/UI Design, Design Systems, Developer Handoff
"Most of the current design is straight from Lovable."
"There's a few things that don't really make sense."
"The tedious process of bringing the design into the traditional system."
"Having these long screens, many times only showing one option selected, I don’t think gives a clear message."
"Make it clearer and more understandable... so the devs know without a doubt what to do."
"I need a conduit of communication to help with design and development tasks, specifically organising the Figma board."
From a "Vision Board" to a Viable Product
Szalty, a social nutrition app for endurance athletes, had a powerful vision and a functional TestFlight build. However, with an aggressive MVP deadline looming, the development process had ground to a halt. I was brought on as a design consultant to diagnose the bottleneck and deliver a solution.
The problem was clear: the design file was a more of a conceptual "vision board," than a developer blueprint. It lacked a coherent system, had broken user flows, and was creating a communication breakdown with the engineering team, putting the entire launch at risk.
Bringing Order to the Chaos
My role was to take this high-velocity but unstructured output and apply rigorous design principles to transform it into a professional, scalable, and developer-ready product. This involved leading the design process, auditing the existing product, and architecting a functional design system from the ground up.
I focused on top blockers and triaged problems pragmatically. The approach: deliver solutions that directly unblocked developers.
Visual: Annotated diagrams of new flows and cleaned up design files (before/after).
De-Risking the MVP: A Process of Triage and Systemization
1. Designed logical onboarding for Email, Google, and Strava sign-up. Visual: Flow diagram with three onboarding paths, clearly showing unique ‘Strava Connected’ step.
2. Redesigned the core “Add Nutrition” flow using progressive disclosure: simplified UI to focus on the primary search task, collapsing high-friction tasks like manual entry. Delivered a clean experience with accordions. Visual: Before (cluttered) and after (clean, collapsed) comparison.
3. Built a brand-new, professional color system by auditing and reconciling chaotic existing colors. Visual: Transition from a chaotic ‘localhost’ color list to an organized palette with ‘Primary’, ‘Neutral’, and ‘UX’ categories.
The Result: An Unblocked Team and a Successful Launch
My work directly addressed the production bottleneck and provided the clarity the team needed to move forward.
The primary outcome was the successful delivery of a clear, documented, and developer-ready design system, which unblocked the engineering team. This enabled them to meet the aggressive MVP launch deadline.
The project now has a robust design system and a clear architectural foundation, which will make all future feature development faster, more consistent, and more efficient.
Key lesson: Use design to drive strategy. Early design explorations fueled critical conversations, helping stakeholders clarify their “Instagram-simple” vision and unify the team.
Testimonial: “Joe brought much-needed clarity to our design process. He transformed our chaotic conceptual files into a clean, developer-ready system that unblocked our team and was critical for our successful MVP launch.” — João Hooks, Founder of Szalty
My Reflection: Using Design to Drive Strategy
The key learning from this project was the power of using design explorations to catalyze strategic conversations. My initial, flawed "Bottom Sheet" proposal was not a mistake; it was the tool that forced the stakeholders to articulate their core "Instagram-simple" vision. This experience solidified my belief that a designer's role is not just to execute on a brief, but to be a strategic partner who can guide the team to a unified vision, and then execute on it with precision.
Iterating with Feedback
Key learning: ease of conversation is critical, but control and context matter, too. Users want to be able to mute, adjust privacy, and see recent history.
Swapped prototype modules based on team and user feedback. Developed new visual layouts and flows for privacy, onboarding, and everyday reminders.
Final direction: ultra-portable AI screen with privacy-first design. Core flows focused on essential, always-available assistance.
Core Flows
Scenario 1: Summon assistant via speech or tap. Get real-time answers, summaries, and quick actions.
Scenario 2: Hands-free notes, reminders, and quick save to cloud—demonstrated with paired text and annotated visuals, side-by-side with legacy device.
Scenario 3: Smart privacy ‘mute switch’ and notification flow—user stays in control at all moments.
Deep Dive: Research, Exploration, Iteration
User research: Interview highlights and surveys. Most requested feature: instant context recall—users loved the idea of an assistant that ‘remembers’ conversation context.
Form factor exploration: Side-by-side comparison of wearable vs. micro-tablet sketches. Included callout: ‘Users want flexibility, but comfort is king’.
Prototyping check-ins: Documented every major iteration, captured video testimonials from users, and shared decision rationales across the team’s callout boards.
