Portfolio 〉Feature Design
Bringing "Tags" to OmniFocus 3: Designing a new feature for iOS and Mac
Product:
OmniFocus 3 - A powerful "To Do" app that supports the "Get Things Done (GTD)" methodologyUsers:
Existing customers of previous versions of OF, new customers Omni hoped to attractGoal:
Bring flexible tagging to an app while maintaining full backwards compatibility with a legacy feature that was being replaced
Design Challenge
OmniFocus is a high-powered "To Do" app, that at its core, lets users make lists of tasks, and check them off. The ability for users to add tags to their tasks was one of the most anticipated features of OmniFocus 3. This new functionality needed to support the existing single "context" metadata field that strict "Get Things Done" users were familiar with, while allowing other users the new flexibility of multiple, nested tags.
My solutions needed to remain backwards compatible with previous versions and consider how it would translate across both Mac and iOS. Any solution needed to assume that users could assign anywhere from no tags at all, to a large list of tags of variable length.
Process, Findings & Insights
- Reviewed existing user feedback asking for this feature, and implementation across other apps
- Using outlined functionality requirements, began with rough wireframes tracing user flows through the native mobile app
- Iterated on wireframes with engineering to refine before moving on to building out the complementary desktop app process
I started by reading the related user feedback and feature requests gathered by our support team, to get a solid understanding of how our users were hoping to interact with the feature. I also conducted research into how some existing apps and websites approached their own tagging feature.
Focusing first on the iOS version of OmniFocus, I crafted some initial rough mockups of the general paths users would take through the feature.
Early mockups of how the Tags feature could integrate into the existing OmniFocus action screen on iOS
Using these sketches as an starting point for our discussion, I worked closely with the developers to refine the details and narrow in on an approach that fit our time and technical constraints.
User flow: Adding tags to a task on iOS
As the design came together I quickly provided more refined mockups and interaction notes, which I provided to Engineering.
While still communicating with Engineering about the final implementation details for the iOS version, I worked to adapt what we had done there to Mac platform. Again I used sketches and rough mockups to begin refining how the details would work in the final app, before moving on to more detailed documentation.
Process mockup detailing how adding a tag could function on the Mac, integrating some elements from iOS
Solution & Outcomes
- Successful launch of a new flagship feature that met one of the most popular user requests
- Full backwards compatibility with older version of the software
- Unified experience across multiple platforms while maintaining native feel
The iOS and Mac Inbox screens for Omnifocus, showing tags on items
The resulting solution provides a flexible and powerful tagging feature to OmniFocus users, while also meeting the goal of being approachable and intuitive.
You can see some of my tagging interactions in motion, in the feature promotion video from The OmniGroup, below.
Why I Liked This Project
I enjoyed shepherding the design of this entire feature through all the different sections of the app, and working closely with the Developer team to fine-tune the touch interactions.