Michel LeottaPersonal projects
Workshop · How this site came about

How this site came about.

A decision log. For each station: the problem, what was dropped, what stayed.

I made every call myself, each time from two or three fully worked-out drafts.

48rendered frames for one closing book
15seconds of product film, Trikoo “Office Cup”
0Cookies. Not even homemade ones.
0Tracking
0Ads
2–3worked-out drafts per decision
The reject pile

What didn’t
make it.

Six drafts, carefully worked out and cut anyway. Swipe them away, or file them with the arrow keys. Each card leads to the station where it got dropped.

Pile empty.What’s left is what’s on the site now.

Decision log

Ten stations.
One site.

Try it rather than take my word for it: each station shows the decision in miniature, the way it landed on the site.

STATION 01

The tagline

Scrolling corrects
Before

I build what’s missing. (dropped)

Connect the dots.Solve problems.

Station 01 · Minutes

“I build what’s missing.” is true. But it puts the building first. What I meant: I make sense of complex systems and solve problems.

Dropped
“I build what’s missing.”
Chosen
“Connect the dots. Solve problems.”
Why
Away from the focus on building, towards what comes before it.
STATION 02

Light in the hero

How much light does the opening need? The plan was a lamp above the desk.

Off. The way it is now.
Dropped
A lamp above the desk.
Chosen
Just a hinted desk, the rest stays dark.
Result
The book is the only thing that needs to glow.
STATION 03

The book closes

The book in the hero should close as you scroll. At first that ran on CSS. It looked fake.

Rendered Calima photo book, open
Chosen
Dropped
Closing via CSS. Looked fake.
Chosen
Rendered in 3D (Blender), 48 frames, played back as you scroll.
Cost
48 images instead of one line of CSS.
STATION 04

The loose thread becomes the common one

The career headline. Two drafts, both fully built.

Draft A · Red penDropped

The loose thread.

A proofreader’s mark strikes out “loose”.

Draft B · ThreadChosen

The loosecommon thread.

Dropped
“Red pen”: a proofreader’s mark strikes out “loose”.
Chosen
“Thread”: a red thread pulls taut over “loose”, snaps, turns green and writes “common”.
Plus
A ball of yarn that shrinks the more thread is pulled. And a “Calm version”.
STATION 05

Reading the career

Some want the overview, some the whole story. So you get to choose.

  1. Enterprise Application Developer
    03
  2. Product Owner and Tech Lead
    01 02 03
  3. Working student, Smart Services
    02
  4. Student assistant
    02 03
  5. Personal projects: Calima and Trikoo
    01 03
  6. B. Sc. Cognitive Science
    01

Excerpt. Grey bars stand for the story text on the home page.

Chosen
Two reading modes and three threads that bring matching stations into focus.
Threads
01 Understanding people, 02 How teams work, 03 Solving problems.
STATION 06

The profile photo

A photo that says more than a CV. As a print on the desk, to turn over.

Front: me, with a brush. Back: the line that explains why the photo is on this site.

Chosen
A print on the desk that you can turn over.
Back
“First understand where it itches. Then brush.”
STATION 07

15 seconds of Trikoo

How do you show an app without explaining it? With a film shorter than any scheduling poll.

Still from the Trikoo product film Office Cup

Office Cup · 15 sec. · in a 3D phone

A product film, shown in a phone that tilts gently with your pointer. The real film plays on the home page.

To the film on the home page
Chosen
A 15-second product film “Office Cup” in a 3D phone.
Length
15 seconds.
STATION 08

The contact form

Under construction

Concept “Understand first”. Your message gets folded into an envelope. And then?

No sending, no mailing list. The message is stored, and I read it myself.

Dropped
Sending by email.
Chosen
Messages are only stored. Michel reads them personally.
Status
Under construction.
STATION 09

Privacy as a data trail

Under construction

Nobody enjoys reading privacy policies. So a thread shows where your data goes.

  1. Youopen a static page.
  2. This siteFonts and video come from this site’s own server. Strict security rules (Content Security Policy).CookiesTrackingAds
  3. Contact formUnder construction. Messages are stored.
  4. Michelreads them personally. End of the thread.
Privacy policy (German)
Dropped

Colophon

A book appendix, complete with a typo devill.

Dropped
“Colophon”: a book appendix with a typo devil.
Chosen
“Data trail”: a thread diagram of where your data goes. And a crumbling cookie.
Status
Under construction.
STATION 10

Tech you don’t see

A site about care should be careful itself. Even where nobody notices.

  • StaticNo database behind every page.
  • 0 cookiesNothing you have to consent to.
  • No trackingNobody counts how long you stay.
  • No adsNobody sells your attention here.
  • Own serverFonts and video come from here.
  • Strict rulesContent Security Policy. A foreign script? Not getting in.
Motion can be paused. Try it here.

Ten stations.
One decision-maker.

I made every decision on this site, each time from two or three fully worked-out drafts. The pile above is what’s left.

I think along.
And all the way through.
Back to home