Book a call

Book a call

Loading the calendar
← All projects

SettingPsi

Healthcare · Product Design · UX/UI Design · Design System
SettingPsi

Overview

A psychologist in private practice does two jobs. One is the session. The other is everything around it. This system does the second job: it keeps the schedule in two time zones, sends the session and payment reminders, holds each patient’s record and scales, and closes the month’s billing, all in one place.

I designed the product, from the map of functions to the screens on the desktop and on the phone, and built the system behind it.

The User

Marina is a psychologist who sees patients online, from Spain, most of them in Brazil. Her day is back-to-back sessions. Between two of them she has a few minutes.

What she has to do in those minutes:

  • Confirm tomorrow’s sessions, each in the patient’s time zone.
  • Write the note of the session that just ended, before the next one starts.
  • Remember who has not paid and write to them without sounding like a collector.
  • Keep the record private, because it holds the most sensitive data a person has.

The Problem

A practice like hers runs on four tools that do not talk to each other: a calendar, a records service, a spreadsheet for payments and a messaging app. Each one holds part of the picture, and she puts the day together by hand.

The usual way out is to hire: a secretary for the schedule and the reminders, an accountant for the month. For a one-person practice, that cost comes before the income that would pay for it. The other way out is a records service with a monthly fee, which covers the record and leaves the rest where it was.

The goal was one closed system that does the work of the secretary and of the spreadsheet, quick enough to use between two sessions.

Product Map

Three groups, named after what she is doing at that moment.

DayTodayWork queueNotebookReminders
CarePatientsScheduleForms
PracticeRhythmBillingAccess log

Today is the first screen because it answers the question she opens the system with: what happens next, and what is waiting for me.

From Pain to Function

PainFunction
Two time zones in every appointmentEach session shows in the patient’s clock and in hers, and the schedule keeps her daily limit
Notes pile upA work queue lists what is waiting: the note to write, the reminder to send, the session to confirm
Charging is awkward and easy to forgetThe month’s summary becomes a message ready for WhatsApp or e-mail, with the payment link. She reads it and sends it herself
A patient with a package of sessions gets charged twiceA session inside a package uses a paid slot and creates no charge of its own
The screen may be shared in an online sessionA Discreet mode for a shared screen, and money stays hidden until she asks to see it
Assessment scales take time to scoreThe app scores the scale. The range only shows for a scale checked against its original publication
The record is the most sensitive data there isThe database is encrypted with a master password, and the system keeps an access log

Design Decisions

  • Color means state. The interface is black on white. Green marks what is done, yellow what waits and red what is late, so the eye finds the problem without reading.
  • Lines in place of cards. Areas share 1px borders in one grid. A dense screen stays calm because nothing floats and nothing casts a shadow.
  • Two clocks, always. The patient’s time comes first and hers sits right under it. The schedule form answers the question before she asks: 15:00 for the patient is 20:00 for her, and it fits before the limit.
  • Private by default. Money shows as dots until she asks for it. Hiding is the starting state, because forgetting to hide is the mistake that costs.
  • Numbers large, labels small. The summary row is four numbers, each with a label in small capitals.
  • The phone does the same job. Every screen exists at 375px with the same functions, since the minutes between sessions often happen away from the desk.

Design System

  • Three state colors: green for done, yellow for waiting, red for late.
  • Two type families: Inter Tight for reading and IBM Plex Mono for labels, times and amounts.
  • Two button formats and one field format, each a component with its states.
  • Contrast measured on every text pair: white on teal 5.5:1, black on white 19.8:1, secondary text 7.8:1.

Flows

Three flows, each one a thing Marina does between two sessions. They are linked in the Figma prototype, on the desktop and on the phone.

  1. Schedule a session. Patient, date and the patient’s time. The system shows her own time and whether it fits.
  2. Send a payment reminder. Billing shows who is due. The message is written, she reads it and sends it by WhatsApp or e-mail.
  3. Write the note. The work queue opens the patient’s record on the session that just ended.

Build

  • Built with the help of Claude Code. Design and code came from the same person.
  • The rules that touch money and dates are tested. 1,191 automated checks passed on 26 September 2026, among them the 64 that cover sessions inside a package.

Result

  • One system in place of a paid records service and separate tools. Schedule, records, billing, reminders and scales live together.
Styleguide

Colors & Buttons

#0A0A0A
#FFFFFF
#F5F5F5
#E5E5E5
#0F766E
#FACC15
#B91C1C
Typography · Inter Tight & IBM Plex Mono

One place for the practice

ExampleNameFontSizeLine heightLetter spacing
29%DisplayInter Tight ExtraBold72px0.9-4%
TodayH2Inter Tight ExtraBold28px1.1-2%
Each session shows in two clocksBodyInter Tight Regular16px1.50
SESSIONS TODAYLabelIBM Plex Mono Medium12px1.310%
Dashboard, Today screen, with made-up patients
Mobile
Designed in Figma Figma
Built with JavaScript JavaScript
Design and code by joaomob
Credits
  • Product design and build by João Marcos