Back to projects
📅
Personal project 2024-2025

Templia

Smart family calendar with hospital schedule OCR recognition, AI-powered conflict detection, and a kid-friendly interface.

UX/UI Mobile App AI / OCR Design System
🎓 Project completed as part of the Google UX Design — Design Thinking certification (Coursera)
Templia Dashboard

The project

Families with complex schedules (healthcare workers on 3/7-day shifts, shared custody arrangements, children's multiple activities) struggle to coordinate their schedules. Existing solutions don't understand rotating schedules.

Templia automatically recognizes hospital schedules via OCR, detects conflicts using AI before they happen, and offers a tailored interface for each family member.

Design Process

1
Discovery

Templia started as part of my Google UX Design — Design Thinking certification (Coursera), but the problem isn't theoretical. I've personally lived the coordination of non-standard schedules — rotating hospital shifts (3/7 days) and flexible schedules on the family side — and I've regularly seen, among people close to me, how shared custody between separated parents can create scheduling mix-ups.

The trigger was concrete: picking up a child from school who wasn't mine, because their separated parents had miscoordinated on who was supposed to be there that day. That's not an isolated case — it's a symptom of a real lack of tooling for families with non-standard schedules.

2
Research & competitive analysis — Empathize

Analysis of 9 competing apps (Cozi, FamCal, OurFamilyWizard, TimeTree, FamilyWall, Picniic, Google Calendar, Cupla, OurHome) based on real reviews — App Store, Google Play, Trustpilot, Capterra, Reddit, Mumsnet. Goal: identify recurring frustrations left unresolved by existing offerings, rather than starting from a blank page.

Conclusion: no existing solution covers granular privacy, proactive conflict detection, OCR schedule scanning, remote-work/travel visibility, and a kid-friendly interface all at once — that gap is exactly what defines Templia's positioning.

3
Problem Statement & Pain Points — Define
"How can family schedule management be simplified and made smoother, while respecting privacy and anticipating conflicts?"

Six frictions shape this problem: too many disconnected tools, children left out of the organization, poorly handled privacy in blended families, schedule conflicts detected too late, work schedules received as images and copied by hand, and remote work or travel poorly represented in traditional calendars.

4
Ideation — From pain points to solutions — Ideate

Each pain point was translated into a solution principle before any screen was drawn: a centralized calendar with per-member filters, 3-level privacy (public / hidden / private), AI-based conflict detection with actionable suggestions (loop in a caregiver, reschedule), OCR schedule scanning with manual validation, work-mode declaration (remote / office / traveling), and a simplified kids interface (colored blocks, emojis, "who's picking me up").

5
Personas & Storyboards

8 personas built from the pain points identified during research — from Sophie (a nurse, a separated mother with shared custody) to Emma (13, who just wants to know "who's picking me up") — expressed as 5 storyboards ("before / with Templia / outcome"): a format that forces you to prove the added value on a concrete case rather than staying at the feature level.

6
Wireframes → Iteration (V1 → V3) — Prototype

V1 was designed by hand. For the following versions, I adopted a collaboration mode with AI close to a classic design critique session: Claude quickly generated drafts, I gave feedback the way I would to a junior designer — then applied the changes myself in Figma, or handed off precise instructions for batch changes (Google authentication, Parent / Child / Caregiver roles, filters, "Week A/B" recurrence, companion field). Only V3 reached the confidence level needed to be shown here.

7
UI Design

Translating validated wireframes into high-fidelity interfaces — Blue Ocean / Teal / Turquoise palette, reusable components, 40+ screens covering onboarding, the core product (calendar, events), AI conflict detection, and OCR schedule import.

8
Design System

49 design variables, 100+ custom icons in an organic blob style, documented components (buttons, tags, inputs, avatars) — built to be directly usable by a dev team, not just a style board.

9
Dev Handoff

1 detailed PRD, 44 dev tickets spread across 4 sprints, a defined tech stack (React / Vite / Tailwind on the front end, Node / Express / Prisma / SQLite on the back end) — a handoff ready to be picked up by a development team.

Key points

📷

Schedule OCR

Automatic recognition of photographed hospital schedules

🤖

AI Detection

Proactive identification of family scheduling conflicts

👶

Kids Mode

A simplified, colorful interface for younger family members

Deliverables

👥
8

Personas

🗺️
5

User Journeys

🎨
49

Design Variables

🎯
100+

Custom Icons

📝
1

Detailed PRD

🎫
44

Dev Tickets

📅
4

Planned Sprints

🖼️
26

Color styles

App Screens

25 screens · V3, light mode — dark mode also available on request

🚀 Onboarding — 8 screens
Templia welcome screen
Welcome
Login
Login
Sign up
Sign up
Family creation — step 1
Create Family (1/3)
Adding family members — step 2
Add Members (2/3)
Account customization — step 3
Customization (3/3)
Join an existing family
Join a Family
Invite members
Invite Members
📅 Core Product — 6 screens
Family dashboard
Dashboard
Week view calendar
Calendar — Week
Month view calendar
Calendar — Month
Add an event
Add Event
Event detail
Event Detail
Edit an event
Edit Event
🤖 Conflict Detection — 4 screens
List of detected conflicts
Conflicts Dashboard
Conflict detail
Conflict Detail
Proposed solutions to resolve a conflict
Proposed Solutions
Conflict resolved
Conflict Resolved
📷 OCR Import — 2 screens
Importing a schedule via OCR
Import Schedule
Schedule imported successfully
Import Successful
👤 Account & Family — 4 screens
User profile
Profile
Account settings
Settings
Notification management
Notifications
Family management
Family Management

Design System

Complete system created with Figma and Tokens Studio

Color Variables

Primary (Blue Ocean)
Secondary (Teal)
Accent (Turquoise)
Neutrals
Semantic

Typography / Mobile

Style Weight Size
Header / H1 Bold 32px
Header / H2 Bold 20px
Label / L1 Regular 18px
Label / L2 Bold 16px
Body / B1 Regular 14px
Body / B2 Regular 10px

Assets

Logo
Logo Light
Logo Dark
Custom Icons (100+)
🏠 📅 ⚠️ 👤 🔔

UI Components

Buttons
Event Tags
💼 Work
📚 School
⚽ Sport
⚠️ Conflict
Input States
Avatars
TL
MA
JD
⚠️ Conflict detected

Components Library

Component library

Iconography

100+ custom icons in an organic blob style

Icon library
100+
Themed Icons
36
Letters & numbers
3
Color styles

Research & Inspiration

Moodboard

Next steps

  • Complete Design System with 49 variables and 100+ icons
  • Technical specifications and 44 dev tickets ready
  • MVP development planned over 4 sprints
← All projects Contact me