FisioGest — Clinic Management Platform for Physiotherapists

UX/UI Designer & Front-end Developer. Masamune Academy, one-month Agile Scrum sprint, team of four. Davide's first paid professional project.

FisioGest is management software for physiotherapy practices. Davide followed the entire project end to end, from user research to front-end code, within a four-person Agile Scrum team over one month at Masamune Academy.

Research began with interviews with physiotherapists and osteopaths. Interview recordings and transcripts were analyzed with AI support (NotebookLM) to identify recurring patterns, which were synthesized into a pain map that guided the design decisions.

AI-assisted workflow

  1. Augmented Research (NotebookLM & Survey): strategic surveys generated with AI support; interviews transformed into structured datasets with objective metrics.
  2. Design Ops & Bridge (MCP + Claude Code): Design Tokens defined in Figma were interpreted by Claude Code, via the Model Context Protocol, to generate the Design System scaffolding.
  3. Engineering & Refinement (Tailwind CSS + Shadcn UI): production-ready React components, built Mobile-First with Desktop consistency.

Design System

Design System v1.0, built on Tailwind CSS and Shadcn UI with the Inter typeface, meeting WCAG 2.1 AA accessibility standards. It is Mobile-First with a minimum 44px touch target, responsive from 375 to 1440 pixels, and includes color tokens, an 8px-based typography scale, and stateful components such as buttons, badges, and inputs.

Deliverables

User research, personas, user flows, wireframes, a complete Design System, UI kit, prototypes, and front-end development.

FisioGest hero screen: logo, tagline 'Simplifying Daily Operations for Physiotherapists', a weekly schedule view listing patients and treatments, and a phone mockup of the patient search screen.
Product overview slide: FisioGest Product Design summary covering project type (SaaS for physiotherapy clinics), the challenge of digitizing analog workflows, and the target audience of freelancers and small clinics managing 10 to 40 patients weekly.
The AI-Driven Production Loop: three phases — Augmented Research with NotebookLM and AI-generated surveys, Design Ops & Bridge translating Figma tokens into code via MCP and Claude Code, and Engineering & Refinement with Tailwind CSS and Shadcn UI — with code snippets and stats on audio analyzed, design tokens and components produced.
Problem statement slide: four pain points — an hour lost daily juggling WhatsApp, Excel and manual reminders, 2-3 weekly no-shows, the mental stress of remembering everything, and clinics describing their methods as 'stone age'.
Human-Centered Design Process: four phases — Discovery, Define, Ideation and Validation — each listing the research and design activities carried out.
From Hypotheses to User Stories: three cards showing hypotheses on booking speed, no-show anxiety and visual pain tracking, each validated against research data and a supporting user quote.
Design Sprint Cycles: three iteration stages — The Agenda, Patient Card and Integrated System — summarizing how each part of the product evolved.
Information architecture diagram: from the homepage and login/register flow into the web app's three core modules — Schedule, Patients and Incomes — with their sub-features.
User journey map for booking an appointment during a phone call, broken into four timed steps: start and search slots, patient selection, visit setup, and success with automatic recall.
Continuation of the journey map: emotions and pain points at each step, paired with the resulting design opportunities and impact metrics, including a 62% drop in double-booking errors and 100% of WhatsApp recalls activated.
Impact and success metrics: an 83% cut in daily paperwork, under-30-second appointment booking, zero lost sessions from no-shows, 100% real-time revenue visibility, and a single unified hub replacing paper archives.
Mobile-first section with a phone mockup of the FisioGest onboarding screen: 'Forget the paperwork. Focus on your patients.'
Smart scheduling flow across three phone mockups: a scannable appointment card list, progressive disclosure of notes and quick actions, and immediate visual feedback when a reminder is sent.
Desktop mockup of the Schedule module's weekly table view, with callouts on the weekly overview, administrative management and slot optimization features.
Patient management section: phone mockups of the searchable patient list and a five-tab patient profile with direct call and WhatsApp actions.
Phone mockup of pain-score and improvement KPIs with a trend chart, next to a desktop mockup of the therapeutic pathway timeline organized by body area.
Income control section: three phone mockups of the Revenue module showing payment status monitoring, bulk 'mark as paid' actions, and the payment method selection screen.
Specialized assessment tools: anatomical pain maps for the foot (hallux, metatarsus) and spine (S5, sacral apex), followed by the Design System & Scalability overview listing the Tailwind CSS v4, Shadcn UI, Inter, WCAG 2.1 AA, Mobile-First and Design Tokens foundations.
Design system documentation: typography specs, and navigation components (tab bar, mobile bottom bar, desktop sidebar) with their design tokens, closing with a 'Thanks for reading' slide.