Product

TeuxDeux

The Swiss-inspired todo app gets a major UX and UI overhaul.

The Web’s Most Beautiful To-Do List.

TeuxDeux is a simple designy to-do app for the web and iPhone. It started in 2009 as a lunch conversation amongst friends at Studiomates in Brooklyn. The prototype was designed by Swiss Miss and built by Fictive Kin within three days. Shortly after that, it went private beta for friends and shortly after that public to the world. From a single blog post, with no other marketing, TeuxDeux has grown to hundreds of thousands of happy users.

The service has had two notable relaunches: a significant web overhaul in 2013, and then the significant iPhone app refresh that I worked on. Our goal with the app redesign was to improve functionality and fold in several feature enhancements without complicating the UI. The project was an opportunity to reinvigorate the visual design and rethink the entire user experience.

Ideation

I worked primarily with design lead Josh Smith to rethink the app from a variety of angles, and look for familiar or surprising ways of seeing it. What if it was an Apple app? What if it we made it less Swiss? What if the text was huge? I’d thrash out hundreds of iterations in Sketch using my subconscious, to see what happened.

Despite taking our experiments to some surprising places, we ended up mainly realigning the existing experience. That said, we deconstructed every detail and reassembled, and iOS expert Larry Legend (real name, yes) would help by producing swift (heh) prototypes for us to get a feel for our ideas.

New layers

I spent a lot of time getting the new Summary screen right. A layer up from the core todo list, the Summary provides a scrollable timeline as date marked rectangles, inspired by paper memos.

We also rethought editing. So often a todo needs to be moved, given a different date, made to recur, or moved from standard todos into a Someday list (categorised todos that operate without the calendar). The whole process was made more intuitive and, in most cases, we reduced the number of steps.

System reset

The original version of the app looked dated because iOS had entered a period of rapid iteration, dispensing with skeuomorphism in favour of ‘flat’. Apps increasingly need to fit with the broader ecosystem, so our realignments paid close attention to shifting guidelines and the best of other apps to ensure new TeuxDeux felt at home on the phone.

Many of our revisions were incredibly subtle; much of the redesign rests on things like making sure hairline dividers start and stop in the right places, and adjusting font sizes to complement those of unrelated apps.

Someday lists became more visually distinct from standard todos. We also introduced a colour picker to customise the whole UI at the tap of a finger. Some people chose awful colours, but what can you do? Not offer a colour picker? Well, there is that.

Audits and documentation

As ever, I produced regular deep dives into iOS best practice and possible approaches. With a considerable number of gestures and outcomes to consider, I needed to ensure my suggestions were comprehensive, lest we overlook an unexpected consequence.

I also ran regular audits, performing detailed health checks on our progress to identify possible problems, inconsistencies, and exciting areas for exploration.

Subscriptions

Before the relaunch, we worked to improve every aspect of the subscription flow. The primary aim was to allow users to sign up or renew within the app and with minimal friction. Our changes resulted in a more consistent screen-to-screen experience, better fallbacks, reduced churn, and lots of positive feedback.

Website ideation

After we shipped the revised app, I had a little time to work on some marketing ideas for the website. The TeuxDeux team wanted to do a better job of telling their origin story, feature loyal customers, and share tips and tricks.

There’s lots of Lorem Ipsum here, which is neither big nor clever, but I like these comps; they’re a good example of the first steps my layout brain takes when someone throws content at it.

Anyway, that’s TeuxDeux. A lot of people have worked on this product, and I played only a small role, but I’m still immensely proud of it.

• product
• app
• design
• R&D
• brand
• community
• commerce
• prototyping
• research