Mobile UI & UX for a variety of clients
Clear, friendly icons and interfaces for mobile apps
I’ve worked on a variety of mobile design projects as creator, product designer, UX and interface designer, and as an icon artist. A selection of work is below:
iOS Workout Tracker
The developer of a workout-tracking app needed some consultation on breathing new life into his app under the new design language and constraints of iOS 7.
I advised a cleaner, iOS 7 standard look, emphasizing the tasks the user wants to complete most prominently, with other incidental information given a secondary visual priority. Though I recommended using system-standard controls where possible, the app still maintains a unique look through striking orange accents and emphasis on the exercise logs.
I worked with the developer to validate navigational concepts, honing the layout of the app from early prototype to finished design based upon which tasks should be the easiest to access, whether or not UI elements needed to be easily accessible mid-workout, and other user-experience considerations. Selected phases of the design process for the main screen are shown below:
Hands Gestural Timer
An experimental project, Hands is a gesture-based timer app that attempts to solve the frustrations I have with the iPhone’s built-in timer app.
Given that a timer is often needed when the user is otherwise occupied, for instance when cooking, my main goals were to make the timer easy to set and easy to tell how much time remains. Given that in many cases, a precise down-to-the-second time isn’t required, I based the interaction around quick swipes.
Swiping up or down on the timer screen allows the user to quickly set a time in one fluid motion – fast swipes quickly get to the ballpark of the time you need, and slowing down toward the end of the swipe allows you to fine-tune your setting. As soon as you let go, the timer begins counting down with a fullscreen display that drains of color as it counts down, giving a visual cue of time remaining even from a distance.
I went through many iterations of the icon, finally settling on a simple, clock-like glyph, with the hands replaced by arrows. The arrows appear “stretched,” indicating the physics and gestures that are integral to the app. Above, the icon appears on the promotional page for the app’s launch.
A quick project done as an exercise in iOS 7-style icon design, this icon is for a torrent browser app that will be released for jailbroken iPhones.I’m not a part of the jailbreak or torrenting communities, so for me, the main draw of this weekend project was the fun challenge of drawing a recognizable pirate ship in a simplistic, readable style that would fit in with iOS 7. The ship and crashing waves maintain a playful look while still looking at home alongside the spare icons of the iPhone home screen.
SimpleTask To-Do List
Before Apple brought Reminders to the iPhone and Mac, before Clear ever existed, SimpleTask was the simple to-do app that synced between iOS and OS X. It was built to be flexible for all users, from people who wanted little more than a digital notepad, to those who wanted some reminders and GTD functionality.
SimpleTask was built out of frustration with available task management apps for iOS and OS X. It features a simple interface that doesn’t make you jump through any hoops to add a task, yet still provides many features to organize and categorize if that’s your thing. Apple agreed it filled a need, and selected it as an Apple.com staff pick. (And later built their own Reminders app on many of the same principles.)
For a 2.0 refresh of the SimpleTask to-do app for Mac and iOS, I wanted to make the icons cleaner and more professional.
This meant redrawing the post-it and going for a smooth, vector check-mark instead of a previous “hand drawn” one. I went for a nice wood background to match the app itself.
I was in also charge of the website for SimpleTask, from writing the copy for the various pages to creating every image on the site.
We wanted to maintain an “Apple-like” feel while keeping a unique identity. Using color liberally compared to Apple, but using similar font families and layout accomplished this.