I worked with Daniel Yoo in structuring the app on a tight schedule. I designed user interface, created interactive prototypes, designed icon and interactions for the popular iOS Timer app.
Previous versions of Timer+ application were downloaded more than 4 million times. That meant that we had a lot of data to work with. Defining problems, goals and new features was easy.
Main screen, First option.
Exploring different solutions to see why something doesn’t work is as equally important as finding the right one.
Meaningful Interactions.
Contrary to popular belief, motion is not "eye candy" – it should create a sense of space or progression.
Design for thumbs.
Designing for touch means not only having easy to use UI, it means designing with ergonomic in mind.
Main screen, Second option.
Another option we explored for the main list view. This direction was immediately discarded as the tap targets for the targeted users were too small.
Start, Stop, Sort or Delete.
Starting or stopping multiple timers at the same time is the main feature of the app. We had to find a fast and easy way to do it right.
Is the Edit mode for detail view necessary?
In the end, the answer was no and we ended up with the UI that is more streamlined and focused. App does the thinking, no need to Save or Edit buttons.
Exposing sketches to criticism before making pixel-perfect comps is the most important step in the process. Although phases interplay with each other and every phase has at least some elements of the other, finding the right solutions is the most important goal. Only then we can start working on visual design.
Multiple Timers.
Data showed that people search for their inactive timers first by name and then by time. Designing layout that makes that easy was the most important task.
Start timer, quickly.
Swipe right to start the inactive timer or swipe left to delete one. It was important to create quick gesture controls for users who need them.
Running Timers.
Color coded labels are not designed only to help with categorisation. By marking it additionally when the timer is running, we are also making sure it is easier to find.
Quick gesture control.
For running timers, swipe to right exposes cancel or pause actions. Swipe to left is still reserved only for deleting. By doing it like this we are making sure that there is no way to accidentally delete timers while doing something active, like working out.
Pull to create new timer.
Designing for thumbs means thinking about ergonomic values of the interface. With increasingly larger screens, we saw a need to create a quick gesture for creating new timers.
Start more than one timer at the same time.
Interface needs to react and be aware of the context the user is in. Under All tab of the main view, editing allows us to sort or start multiple timers as we wish while under Active tab, we can only stop or delete and sort order is always based on duration.
No need for Edit.
Detail view is hybrid mode between edit and preview. The name, color or sounds can be changed while the timer is running and each change is autosaved automatically.
Auto Destructive sprint notifications.
Repeating timers are one of the main feature. We created custom self destructive alerts that are triggered for each repetition.
Quick gesture controls even on iPad.
Timer+ is universal iOS app but creating the user interface for iPad had different usability goals.
Start, stop, sort or delete.
The layout is adapted for easy scan of the timers, even from the distance. Each timer is separate card, a detail view focused and reduced in size.
Big canvas, focused controls.
Working on the bigger screen doesn’t necessary mean an easier job. Reducing the hand travel distance meant putting the most used controls close to each other.
Context–Aware Notification.
We’ve also designed unassertive notification system for cases when user needs to be notified about necessary actions.
Make it usable. Make it beautiful. Surprise and delight.
Swipe to flip for Quick controls.
Horizontal swipe on the card flips that card to its back side, revealing the additional controls like Start, Pause, Stop or Delete.
Bouncy cards.
Each card reacts on the cards around it. Deleting one card moves every other with a bouncy effect, strengthening the feeling of cards being separate entities.
Making it feel alive.
With meaningful animations, clean minimal interface can become alive and even more focused on the actions we want for users to notice.
Add 1, 10 or 30 minutes, quickly.
Tap once to add one minute or tap and hold to add bigger time segments.
Surprise and delight.
Once the bases are solid, it’s easy to build on the premise and add details.
Reimagine interaction design for Evernote iPhone application. I designed and created interactive prototype in Apple Quartz Composer.
My first task was to reimagine the Evernote for iPhone for easy use with one hand. The second priority was creating an interface that will enable richer and more focused writing experience. The result was prototype based on Pull-to-Create/Pull-to-Save gestures.
Pull to create new note.
Main navigation is build around custom Tab Bar pattern. Pulling the list down would trigger New Note modal view.
New Note.
No status bar, no navigation bar, no distraction. Main goal is focused writing experience.
Inline Attachments.
Adding new attachments needs to be easy and powerful. Building a way to add inline attachments was my main priority.
Making something simple doesn’t mean making it less capable.
Bottom of the screen is reserved for more detail features like adding timers or finding something on the page. Less important but still easily accessible with one hand.
Auto Save?
Exploration of ideas.
Pull-To-Write, Pull-To-Save.
Pulling the list down triggers the New Note view.
Inline attachments.
Attachments are loaded inline. Just tap the + button to add photos or audio recording.
I worked with the talented Indezo team to design and develop Indezo iPad app. I led the design process, oversaw development, came up with concepts, user flows and designed everything ranging from illustrations and UI/UX explorations to motion and interaction design, with exception for icon design.
View the story of Indezo