Raysan Designs
All work

Case study · Personal product

Kids Week

Three kids, two schools, after-school clubs, swim, dance and soccer, and a family that helps with pickups. I designed and shipped a private weekly schedule that answers one question at a glance: where does each kid need to be, and when?

Client

My family

Product

Mobile-first web app

Role

Design & build

Built with

Claude · GitHub Pages

On a phone, exactly two days fit.
On desktop, the same grid shows the week. Names, places and times in these screens are sample data.

The problem

The week lived in a dozen places

A new school year brings a stack of paper: welcome letters, class schedules, picture day flyers, supply lists. Then come the club pages, the swim school's schedule and two school calendars.

Our family calendar had all of it, but a calendar app answers "what's happening at 3 PM" and not "who do I pick up today, and where." The people who help us with pickups needed one link they could open on a phone and read in five seconds.

The core pattern

Days across, kids down

Each child gets a row and each day gets a column. School drop-off and pickup sit in a quiet gray strip at the top of every school day, and activities sit below as cards tinted in that child's color.

The page opens with today in the first column. The arrows step one day at a time, and swiping snaps cleanly from day to day. The columns resize so a whole number of days always fits the screen, with no sliver of a third day hanging off the edge.

Motion

Movement that keeps you oriented

Swiping drags the days with your finger, and letting go settles the grid onto the next whole day instead of stopping halfway. The arrows ease one day at a time, and the date range in the title follows along.

Switching between light and dark fades the colors over a third of a second, so the page changes mood without a jarring flash. Both motions respect the reduced-motion setting on the phone.

Swipe and snap. Two swipes forward, then the arrows ease back to today.
Light to dark and back, with a short color fade.

Iteration

Most of the edits were deletions

The first version came together quickly and had everything: a subtitle, a color key, each child's grade and school, a colored accent bar on every card and heavy dividers between weeks. I reviewed it on my phone, the way the family would, and took things away one at a time.

  • The color key went first. Names sit right next to their rows, so the key repeated what the grid already said.
  • The wide name column became a thin strip with each name set sideways in its color, which gave the days more room.
  • "Week of" left the title, and the date range moved between the arrows.
  • Small walking-person icons replaced the Drop-off and Pickup labels for one round. They read as decoration, so the words came back.
Version one. Every element here was reasonable on its own. Together they pushed the schedule below the fold on a phone.

Details

Small rules that match real life

  • On club days, pickup moves to when the club ends. With two clubs on one day, it uses the later one.
  • A "Hide drop-off & pickup" button turns the grid into an activities-only view. Each device remembers the choice.
  • Activities get an emoji from their name, so swim, dance, soccer or chess is recognizable before you read a word.
  • No-school days say so, and after-school clubs drop off those days automatically.
  • Light mode by default, with a Material Symbols sun and moon toggle for anyone who prefers dark.
Activities only, with school times hidden.
Dark mode, designed as its own palette rather than an inversion.

Privacy

A shareable link that keeps the schedule private

A kids' schedule is exactly the kind of thing that shouldn't be readable by anyone who stumbles on a link. Free web hosting is public, so the page itself had to protect the content.

The readable schedule lives in a private repository. What gets published is an encrypted copy (AES-256, with the key derived from a family passphrase), so the public files contain no names, schools or times. Family members type the passphrase once, and their phone remembers it after that.

The only screen a stranger can see.

Process

Designed in conversation, shipped the same day

I built Kids Week with Claude in a single afternoon and evening. I made the design calls and reviewed every change on a real phone. Claude read our family calendar and the school's club calendar, wrote the code, and pushed each update to both repositories so the family link stayed current.

That loop of asking for a change, seeing it live within minutes and keeping or reverting it is what made the round of deletions practical. Trying something cost almost nothing, so I could judge it on the device instead of in my head.

Available for work

Let's make it happen

Screen