The redesign we reverted within the hour

At 10:11 one morning we reverted five commits. The first of them had gone in at 9:12, and together they rebuilt the signed-in app around a reading desk, with your list on the left and the stored article on the right, and made it the page you land on after signing in. The desk itself wasn't the problem, and by 11:30 we had picked it again. What went wrong was that we skipped our own step of comparing the samples first.

The evening before

It started the evening before, with the public site. The commit that rewrote it is titled "reposition public copy around read-later with bookmark sync as a bonus". Our April design note had it the other way round.

The new copy is also plain about what's missing. It says there's no mobile app, no highlights, no offline reading and no Pocket import. Chrome became the recommended browser, and the Firefox extension is marked beta, because until Mozilla signs it, Firefox removes it on every restart.

Late that night we made six static samples of the signed-in app. Three were new layouts in the current look and three were new looks altogether. The next morning we built sample 3, the reading desk, without comparing it to the other five.

After the revert

By 10:52 the three new looks were gone, and five more layouts in the current look had taken their place, each borrowed from a pattern people already know: a timeline, a column browser, vertical tabs, top tabs and a board. At 11:30 we kept two of the eight, Today as the home page and the reading desk for every list.

The revert cost us an hour, which seemed cheap next to building every page on a layout we hadn't compared.

By early afternoon Today was the home page, showing what you were reading, your reading list, recent tabs from your browsers, the cleanup queues and your sources. Read Later, Tabs and Bookmarks were desk pages, with the list and the reader side by side. At 12:23 Open Saves became Read Later and Open Tabs became Tabs; "Open Saves" had made sense to us and, as far as we could tell, to nobody else. Five colour themes joined Light and Dark (Sepia, Slate, High Contrast, Ink and Dusk), and every one keeps text and buttons at a contrast ratio of 4.5:1 or better.

One list engine

By then our lists did the same job in different ways. The old bookmarks explorer did most of its work in the browser and could send 5,000 rows, about 2 MB, in one go. We moved Read Later, Tabs and Bookmarks onto one server-side list engine and wrote down the rule we chose: simpler and faster code beats reuse, and some duplication is fine.

The deleting was the part we enjoyed most. One commit took out 3,571 lines of the explorer's JavaScript and its tests, and another removed 1,040 more, mostly server code that only the explorer used. Lists now load 50 rows and fetch more as you scroll. If you open an item that has no reader copy, the app makes one attempt to create it before falling back to the live page or the link.

The evening

We spent the evening on details that are easy to argue about forever, and wrote the answers into our design notes:

  • Only exceptions get a status. A row says "link only" when we have no stored copy, and nothing at all when we do.
  • The bulk bar is always visible when a list has items, so ticking a box never shifts the rows. We added Select All controls at 20:34 and took them out of the desk lists at 21:28.
  • Labels and buttons are Title Case, sentences are sentence case, and status words stay lowercase. That change touched about 100 labels.
  • Red means delete. Disconnecting a browser deletes nothing, so its button is neutral.

The full test suite passed 613 tests that day, browser tests included.

Next in the log: Locking the doors on a small read-later app.

More from the build log