Reminders that work

Creating the card stack

Reminders includes a few primary attributes, including the title, due date, and notes. I limited the number of fields per card to optimize for the snooze workflow. The less visual noise, the quicker it is to triage the card stack. Information like the repeat duration and snooze count don’t provide enough value when trying to figure out what to work on next.

I originally wanted the cards to be typography driven, but they ended up feeling sterile. I added an illustration to give each card warmth. The complete and snooze buttons brought improved discoverability and accessibility. I positioned the buttons inside each card so I could highlight them during gestures and create a direct association with the task.

The challenge with cards was to create a sense of urgency for overdue tasks and to keep things approachable.

The challenge with cards was to create a sense of urgency for overdue tasks and to keep things approachable. Early explorations also revealed that typography wouldn’t be enough to make the experience feel personal. I would have to add images. Doo launched with the date at the top bounded by the image because it’s the most important piece of information. And the content appears beneath so there’s always a place for the eye to rest.

The main card view went through a few iterations. I explored the possibility of allowing cards to expand when tapped. I especially wanted to accommodate long lists. However when I prototyped this experience I realized that it was an anti-pattern. I didn’t want to encourage people to dump a long list of things into the notes section, or to write to-dos that were a paragraph long. Doo had be opinionated for the success of my users.

Doo presents each card in a stack, forcing your attention onto one thing at a time. You can’t randomly access your to-dos like you would a scrolling list. This way users have to acknowledge each task and make a deliberate choice whether to act or to snooze.

Choosing an MVP

I launched the first version of Doo with a limited scope so I could iterate with real users. The goal was to launch a product that would work for 90% of people. This meant Doo had to get the basics right: Creating repeating tasks, prioritization, and completion/snooze. Everything else was a distraction.

As you might expect, after launch the feature requests began to pile up. I saw new features as the perfect opportunity for a design realignment that would lay the foundation for future additions like attachments. The update repurposed the illustrations to make more room for the title and notes. It also allowed the buttons to recede, further emphasizing the task. The attachments button fits naturally in the top right corner, out of the way until needed.

Creating the edit UI and navigation

The edit screen was the most difficult view to get right. The goal was to enable users to understand the scope of a reminder without showing everything at once. Early concepts and prototypes were more waterfall in nature and didn’t do enough to provide varying levels of hierarchy. Further iterations moved the save and cancel buttons to the bottom of the card to improve one-handed use and push up the primary inputs. This proved problematic with the keyboard.

I experimented with tabs and other means of creating structure. In one iteration I put date selection behind a calendar icon and a toggle. The calendar icon was too disconnected from the date itself. Disclosure arrows that hinted at navigation competed with clear buttons. Attempts to solve each of these problems simultaneously often resulted in a dead end.

The solution was to step back and evaluate the edit card in the context of a larger navigation pattern.

The solution was to step back and evaluate the edit card in the context of a larger navigation pattern. I wanted each view to be a card that slid up from the bottom instead of the usual full-screen slide from the right.

In order to make this work, each screen gained a consistent title, primary action, and dismiss button. Cards would not be able to hold the actions within the content area. The result is a clear hierarchy that allows the edit screen to read like a sentence. The default state displays only the title and notes to optimize for quick task entry.

The resulting navigation pattern provided enough flexibility to use across edit, settings, and other views. I could draw each screen as a card that would stack on top of one another. And I accomplished one-handed use by making each card dismissible with a downward swipe. TestFlight results were positive, proving that the gesture-based nature of Doo lent itself well across screens. The text buttons provided the necessary discoverability until users discovered the gesture.

Creating the list view

I created a few variations of the list view early on, but quickly zeroed in on a layout. The navigation pattern dictated the background color be visible at all times, so transitions occurred from purple to purple. Going white to purple hurt the card illusion. I also didn’t want to introduce views that felt inconsistent.

I designed each row as a miniature card to create a visual relationship between reminders across screens.

I designed each row as a miniature card to create a visual relationship between reminders across screens. It had the added effect of making how many tasks appeared within the list more glanceable. It also mapped more closely to the sorting experience, which manipulates single rows. Drag and drop allows users to prioritize reminders in relation to one another. Unlike apps that use exclamation points to try and guess relative priority, Doo always knows your intention. New reminders insert themselves respecting sort and date order.

The final edit experience includes the standard iOS delete icon but deviates from the swipe paradigm. Revealing the standard delete disclosure made the interface feel disjointed. I also wanted to reveal up to five different options per row. I opted for a flexible menu button that could toggle a dialog from the bottom of the screen with any number of actions.