Marije Rottier.
← All work

Case 06 / 07 · Content platform · Live

30 Day Habit

My blog about 30-day experiments, rescued from an expired Squarespace site and redesigned as a magazine and a logbook. Honest about what worked, and about what failed.

Role
Writer, UX/UI, build
Type
Redesign, content platform
Timeline
October 2026
Live
30day-habit.com
A tilted collage of the 30 Day Habit site: the cover, the experiments page, a story and the design directions
The live site, plus the rejected first version and the three directions that came before it.
Problem

The old site had expired, the export no longer worked, and the site needed three new jobs at once.

What I did

Rescued eight posts word for word, audited the old site, compared three directions side by side and built a static site with a build script.

Outcome

Live at 30day-habit.com with no subscription costs. No reader data yet, so no proof of impact.

01

Context

The challenge

An expired site with three new jobs

The Squarespace subscription had expired and the export no longer worked. The posts were only reachable inside the editor. At the same time, the site had three jobs: show my writing in job applications, be the home of a newsletter, and serve as my UX course project.

Show who you are in one second, and be honest about what failed.

Audit

What went wrong on the old site

  • “(Copy)” in the logoA leftover from a copied template, visible at the top of every page.
  • A login and a cartOn a blog with no shop. Noise that raises questions.
  • Centred long-form textHard to read for 1,500-word stories.
  • Four near-identical cards per seriesParts I to IV as separate blocks, with nothing showing they belong together.
The old 2023 Squarespace site with (Copy) in the logo, a login and a cart
Before. Look at the logo top left: “(Copy)” from a duplicated template, next to a login and a cart on a site with nothing to buy.
02

Process

Design process

Too safe at first, then three directions

The first version improved the old site but still felt like a template. So I made three directions side by side with the real photos: a magazine cover, a logbook on grid paper and a bold graphic option.

First version of the new site, with a large quote over the photo
Version 1, rejected. The big quote shouts, and the page reads as separate blocks.
The design directions side by side
The directions side by side. The pick: A's cover with B's logbook voice.

A signature

Thirty ticks per experiment

Every experiment shows its 30 days. Failure is visible in the main navigation, not hidden in a footnote.

Filled is done, struck through is failed, faint is still to come.

Design decisions

What changed, and why

  1. The homepage as a magazine cover

    A large title over a full-bleed photo, with the content as “cover lines”.

    WhyIn one second you see who writes it and what's inside. The logbook starts underneath.

  2. A live experiment that updates itself

    The running experiment counts up a day every day, without rebuilding anything.

    WhyThe homepage changes daily. That gives readers a reason to return, and the newsletter a running story.

  3. One page per story, with its own address

    A fixed page with a clean link and its own preview.

    WhyThat link goes into job applications. It has to look right when someone shares it on LinkedIn or in an email.

03

Outcome

The live site

Magazine on top, logbook below

The cover tells you who I am. Below, you read as in a notebook: experiments with their ticks, stories in calm left-aligned text and a clear order from part I to IV.

Experiments page with 30 ticks per experiment
The experiments page. Read the strips: six experiments done, one failed, three still to come.
A story page with a large photo and a narrow text column
A story. Left-aligned in a column of about 65 characters, so a 1,500-word post stays readable.
The homepage on a phone
On a phone, the cover still holds up.

Where it stands

Delivered

  • A live site at 30day-habit.com, with no subscription costs
  • Its own visual language: the cover, the logbook and the ticks
  • A system for newsletter, Instagram and site from one text a week
  • A documented design process for my UX course

AI in my process

My words, smartly handled

One hard rule: the AI never invents content. Every word is mine. The automation sits in everything around it.

  1. Step 1

    Rescue

    Eight stories copied word for word out of the editor, no retyping.

  2. Step 2

    Style guide

    A guide built from my own posts, so every edit still sounds like me.

  3. Step 3

    Build script

    A script turns each text into a page with its own preview.

  4. Step 4

    Live

    Online through Netlify, on its own domain.

The original texts are kept untouched. Edits live separately and only go online with my approval. The experiments are self-experiments, not research, and the site says so.

04

Reflection

What I'd do differently

  1. Go wide sooner

    Version 1 was an improved copy of the old site. The three side-by-side directions are where the design actually happened. I now start with divergent directions instead of polishing the first idea.

  2. Design for mobile data from the start

    The photo film strip on the homepage is heavy on a phone connection. I'd have sized those photos for mobile from day one.

  3. Measure from launch

    There's no reader data yet, so I can't show what the redesign changed for readers. A privacy-friendly counter should have gone live with the site.