Alex Le

Case study · Personal project · Mobile app

Baby DiaryNhật Ký Bé Yêu

A newborn-tracking app that started the week my own child needed jaundice monitoring. The hard part was never writing numbers down. It was knowing, at 3 am, whether today’s number meant better or worse.

Role
UX/UI design, solo
Concept · not yet tested with users
01

It began as something very personal

My child had jaundice after birth and had to be watched closely.

On top of the bilirubin readings there were feeds, nappies, sleep and follow-up appointments. There was a lot to remember, and the moment you needed to remember it was usually the moment you were most tired.

I built a small HTML page to log it all. After using it for a while I noticed that recording was the easy part. The hard part was understanding: was today’s number heading up or down, and when was it time to call the doctor?

This case study is how I turned that tool into a product for families in the same situation.

02

Tracking a baby happens when you are most tired

Three problems came straight out of those weeks, and they set the rules for everything after.

Notes everywhere

The data lives in several places. By the follow-up visit, nobody remembers it exactly.

One number says nothing

Jaundice has to be read as a trend over several readings, not just the latest one.

Hard conditions

Middle of the night, one hand holding the baby. The screen has to be soft and the buttons big.

Primary user

Parents whose baby needs close monitoring

Jaundice, premature birth. They need a clear trend and to know when to go to the doctor.

Extends to

Any parent of a child under 2

They need fast logging and reassurance that the baby is on track.

Extends to

Grandparents who help out

Big text, few steps, and no fear of pressing the wrong thing.

03

One day with the app

Every feature answers a question parents actually ask. Scroll through a day: the app changes with the situation, and after dark the page dims with it.

09:00Follow-up results

“Is this reading high or low?”

The feature it all started from. What I needed most was not a place to type a number, but to see where today’s number was heading.

  • Enter the value in the unit printed on the lab slip, µmol/L or mg/dL.
  • A chart of several readings replaces a single number on its own.
  • Two levels: reassurance while it falls, attention when it rises fast.
  • Always links to the list of signs that mean go to the doctor now.

Alert thresholds are a medical decision. A paediatrician has to define them before real use.

10:02Nappy change, baby on one arm

“How many feeds did she have yesterday?”

Most sessions open the app to log one thing. Every second and every tap counts when you are holding a baby.

  • Three fixed buttons in the thumb zone: Feed, Nappy, Sleep.
  • One tap logs the same as last time.
  • Edit and Undo live right inside the confirmation.
  • Log the same type again within 10 minutes and the app asks first.
10:47Both hands busy

“My hands are full. How do I log this?”

Bathing, rocking, cooking. Just say it naturally and the app splits it into entries.

  • One sentence becomes feed, nappy, sleep, jaundice or note entries.
  • The app reads back what it understood. Say “cancel” to drop it.
  • Health figures always wait for you to confirm.
  • Only the text is kept, never the recording.
02:40Night feed

“It’s 3 am. Don’t wake the baby.”

A bright white screen in the middle of the night wakes up parent and baby alike. Night mode keeps only what one feed needs.

  • Turns on by itself from 21:00 to 06:00.
  • A warm night-light tone: no blue, no pure white.
  • Nothing smaller than 16px, two large buttons in the lower half.
02:41Phone still locked

“Do I really have to unlock the phone?”

Unlocking at night means one more bright screen and one more passcode. The feed timer waits on the lock screen.

  • The timer keeps running, so a glance tells you how long the feed has been.
  • Switch side and Done work straight from the lock screen.
  • Same night-light tone as night mode.

Lock-screen display depends on the OS: a Live Activity on iOS, an ongoing notification on Android.

6 months laterGrowing up

“She was premature. When should she roll over?”

Comparing a premature baby with full-term milestones causes worry that isn’t needed. The app asks about this from the start.

  • Milestones use corrected age up to 24 months.
  • The home screen changes with each stage and offers to hide what is no longer needed.
  • A small moment to remember when a milestone is reached.
04

Ten kinds of data, four fixed rules

Each kind has its own input and save rule. The table is also the only list voice input is allowed to sort a sentence into.

01

Health figures never save on their own, not even from voice.

02

Voice only sorts into the types below. Anything that doesn’t match becomes a note.

03

Only text is stored, never the audio recording.

04

Health data and the baby profile can be deleted permanently in Settings.

TypeWhat is recordedInputOn save
FeedBreast or bottle, side, minutes or ml, start timeTap, voice, detailAuto, undoable
NappyWet, dirty or both, timeTap, voiceAuto, undoable
SleepStart and wake timeTap, voiceAuto, undoable
SolidsFood, how much was eaten, timeVoice, detailAuto, undoable
NoteFree text, a photo if any. Unmatched speech lands hereVoice, detailAuto, undoable
MilestoneWhich one, and the dateTapAuto, undoable
JaundiceValue, unit, sample time, placeDetail, voiceAlways confirm
GrowthWeight, length, head circumference, dateDetail, voiceAlways confirm
VaccinationVaccine, dose, date, place, reactionDetailAlways confirm
Baby profileName, birth date, sex, gestational age at birthOnboardingAlways confirm
05

One language: soft, but clear

The earlier version put torn paper and handwriting beside hard-edged cards, so it looked like two apps glued together. This one keeps a single rule: everything is round and soft, and information still reads in a glance.

Before

Torn paper and handwriting next to hard-edged cards. Two styles in one app.

After

Round and soft everywhere, with illustration kept out of charts, forms and health alerts.

Color, named for what it does

6 roles
Ink blueActions#26305A
Night-lightTime, night#E9A23B
Young leafGrowing, all good#3F7A5E
BrickNeeds attention#B5452F
GroundDay background#F7F5F0
CharcoalNight background#15110D

Two typefaces, both built for Vietnamese

Type
Ỗ Ộ Ợ ữ  08:42

Nunito for titles and big numbers. Round strokes match the icons and corners, and stacked Vietnamese marks clear the line above from 1.2 line height.

Bú mẹ, bên phải, 15 phút

Be Vietnam Pro for all body text. Designed for Vietnamese diacritics and clear at every size from 13px.

33 custom icons on one 24px grid with a round 1.75px stroke, always paired with a label.

Illustration, objects and shapes only

4 scenes

One frame for every scene: a round backdrop and a soft ground shadow. Illustration never appears in a chart, a form or a health alert.

06

From one family to many

What has to happen before this is more than a concept.

Validate

Five families

Interview five families whose child had jaundice, then have them log one-handed in a dark room.

Expertise

A paediatrician

Have a paediatrician define the alert thresholds and review all medical content.

Narrow

Three features first

The first release is jaundice, quick log and night mode. The rest waits for real data.

I started this project to worry less about my own child. What I learned: good design for anxious people is not adding features. It is removing everything that doesn’t help them feel at ease.

Next
Back to all projects