time-jounral-cover-timer-mac-small-light
time-journal-high-fidelity-two-phones

APP Design & Development

Epilog

Epilog is a smarter Pomodoro app, designed for people who work in a fast-paced, collaborative environment or in long states of flow.

It uses a periodic timer to check in and ask:

"What am I working on right now?"

what am I working on right now?

Problem Statement

What did I do all week?

The problem with agile systems and sprint planning is that it's less than 50% accurate. More than half of the work of individual contributors is unplanned work that's not accounted for in sprint planning. Even worse, unplanned contributions will often be overlooked later on (e.g. during performance reviews) because there's no historical record.

The existing solution is to find time with the PM to review the unplanned task and add it to the sprint plan. Yet that’s two more distractions on top of the original distraction!

time-journal-agile-metrics-cartoon
time-journal-entry-panel-closeup

My solution

The first thing all productivity coaches will have you practice is to write down what you're doing, while you're doing it.

Epilog makes that easy. It uses a periodic timer to check in and ask, “what am I working on right now?”

Unlike conventional Pomodoro timers that make you predict and assign a task prior to each session, you simply write down what you've been doing afterward — so it's actually accurate!

At the end of the day, you'll have an outline of your actions for the day and how much time each took.

Concepting

Brainstorming

One of the first challenges of starting a new app is determining scope. As a concept, an app can do anything and solve every problem, but the specific ideas are usually shallow and disconnected. I started with a general brain dump, then dived into user flow, app structure, and timer models.

obvious-brainstorming-stickies
obvious-brainstorming-stickies-sorted
obvious-brainstorming-okrs
obvious-brainstorming-timer
obvious-brainstorming-user-flow
obvious-brainstorming-structure
obvious-brainstorming-timers
obvious-brainstorming-structure-stickies
obvious-brainstorming-structure-stickies-sorted

Testing the Idea

Prototype design

Since this was an app that solved a personal problem, it was best to get a native prototype up and running as soon as possible, so I could start dogfooding it.

obvious-prototype-wireframes-v3

Quick UX wireframes

obvious-prototype-mockups-v2

High-fidelity, lean mockups using AppKit components

Testing the Idea

Native prototype

I built the initial prototype for macOS using Swift and AppKit.

I continued to use this prototype for almost three years, confirming that the idea had merit. The app made it easy to remain in the flow, yet keep track of what I had done. It solved a problem for me.

obvious-prototype-timer

"Today Timer" view

obvious-prototype-journal

Journal view

UX Design

Personas

With new products, it's often best to assume an initial set of personas and revisit after talking to users. Although Pomodoro timers have been around for a while, my version was new and catered to a broader set of individuals. 

Obvious-Persona-Creative-v2
Obvious-Persona-Coder-v2
Obvious-Persona-Founder-v2

Wireframing: Round one

Rough wireframes

The first round of wireframing explored a variety of possible layouts for each screen, as well as how those layouts would translate between different screens.

obvious-rough-today-timer-wireframes

Today Timer layout exploration

obvious-rough-wireframes-timer-devices

Today Timer on iOS, iPadOS, and macOS

Wireframing: Round two

Detailed wireframes

The second round of wireframes focused on UX. How would the app actually work? How many screens would it require? It was important to resolve the features of each screen before moving on to high-fidelity mockups.

obvious-detailed-wireframes-timer-parallax

Today Timer parallax scrolling

obvious-detailed-wireframes-journal-flow

Journal navigation steps

obvious-wireframe-figma-prototype

Figma prototype: user flow demo

Product design

MVP: high-fidelity designs

I tried to limit myself to Apple’s native components and styles for a few reasons.

First, it saves production time because I don't have to create (and code) a new design system.

Further, native styles are familiar to users, which removes barriers and boosts adoption.

Finally, Apple has been making huge leaps in Swift and SwiftUI over the last few years, but some essential parts are still limited or missing. I didn't want to get attached to a design until I knew what SwiftUI could do.

activity-journal-mvp-progress

Native prototype, wireframe design, high-fidelity design

Today / Timer

obvious-mvp-color-type-tests-v2
obvious-mvp-timer-platform-screens-v5

Action log

obvious-mvp-log-iterations
obvious-mvp-log-ipad-concept
obvious-mvp-journal-ios-screens-v3

Dark mode

obvious-mvp-dark-mode-support-v3

Action sheets

obvious-mvp-sheets-v4

DEVELOPMENT

MVP: native app

Epilog is currently in development for macOS, iOS, and iPadOS using Swift and SwiftUI for the client and Firebase for the backend.

Epilog v0.2

obvious-development-v0.2-timer
obvious-development-v0.2-log

Epilog v0.4

obvious-v04-development-timer
obvious-v04-development-log
obvious-v04-development-settings

iPhone: timer scroll animation using SwiftUI

Selected works

Adobe ConsonantFigma design library for iconic design enterprise

LookoutBuilding and managing a Figma component library

First PersonDesign libraries, technical & web design for B2B agency

VectraDesign & component library

Omnicell (2021)Figma design & component library

Omnicell (2019)Sketch design & component library

EpilogApp design & development for iOS, iPadOS, and macOS

Disney Movies AnywhereAndroid design & development

DayframeDesign & development

HD WidgetsDesign & development

App StatsDesign & development

CloudskipperDesign & development

Star Wars APIDesign & development exercise

Fitness goalsApp design exercise

Starsky RoboticsUX research & design

Elemental design1994 – 2003

footer-logo
Thank you for visiting ❤
Please let me know how I can help!
adobe-logodisney-logogoogle-logohonda-logokronos-quartetnfl-networkomnicell-logovectra-logoverizon-logovmware-logoy-combinator-logozynga-logoadobe-logodisney-logogoogle-logohonda-logokronos-quartetnfl-networkomnicell-logovectra-logoverizon-logovmware-logoy-combinator-logozynga-logoadobe-logodisney-logogoogle-logohonda-logokronos-quartetnfl-networkomnicell-logovectra-logoverizon-logovmware-logoy-combinator-logozynga-logo
View