Portfolio 〉Cross Platform Experiences
Defining OmniFocus on the Web: Bringing desktop & mobile power to the browser
Product:
OmniFocus for the Web - A Web port of the popular Mac and iOS "To Do" appUsers:
OmniFocus users who want to access their data over the webGoal:
Design a Web App that brings as much OmniFocus functionality from Mac and iOS as possible into the browser in a way that feels both like the original product but at home on the web
Design Challenge
Bringing the power and flexibility of OmniFocus, a "To Do List" app based on the "Get Things Done" method, from Mac and iOS, onto the web, was primarily a challenge of defining the scope. While the native apps were already in version 3, and those previous decisions could inform some of the new design, my approach to this project had to start similarly to an entirely new concept.
Process
Extensive discussions with stakeholders helped me, and my team, define what the business goals were. We made special note of the expected technical limitations that the engineering team anticipated. We also refined our understanding of the goals of our users, by researching feedback we received over the years, as well as talking with the Support team, who were in regular contact with the users requesting a web option.
From the information gathered, we created a defined list of must-have requirements, and stretch goals. Necessary work was divided up, and I took the lead on the architecture of the site, while another team member focused on the visual identity, and purchase process.
Using the constraints and goals we had identified, I planned user paths, and created wireframes of the architecture of the site.
Early site architecture wireframes
As the main paths through the site came together, I crafted more detailed wireframes for all the interactions on the site. I included interaction notes, and made sure to point out where adaptions were being made to allow for both touch devices, and desktop browsers, while minimizing the amount of necessary additional adaptive code.
Wireframe detail of interactions when a user selects a task, highlighting that touch device users can still access small details in the inspector
As I worked out the details of all the possible inspectors for tasks and projects, I included information to the team about different design options, how to adapt to metadata the web app couldn't fully support at launch, ways to narrow the scope of what needed to be built, as well as ways we might improve on the inspector later.
Design document showing the task inspector, including notes to the team about options to expand or contract the scope of what we include.
As the site was built, and business goals evolved, I adapted the wireframes to accommodate changes. I regularly met with the lead developer, other designers, and marketing team to refine the interactions, and discuss options available for the UI. I also provided feedback on the visual design. As additional design questions arose, I provided mockups to define and clarify details, like the drag and drop functionality.
Mockup showing how creating groups with drag and drop should appear
Solution & Outcomes
- Met long standing desire from dedicated users to access OmniFocus data from the web
- Provided web development team with clear documentation of interactions and navigation
OmniFocus for the Web has rolled out a public test and generated a lot of excitement among a user base that has been hoping for this option for years.
The resulting app feels like part of the OmniFocus system, while looking at home on an Android or Windows device. Key functionality from the native apps was maintained, enabling users to access their data from their Windows-based offices, or an Android tablet, with a comfortable parity to how they access it from the iPhone in their pocket. OmniFocus for the Web expands how, and when, users can get to their data, making it easier to be productive.
Screen shot of the public test of OmniFocus for the Web, looking at the details of a Project
Why I Liked This Project
My previous jobs have all been heavily web site and web app focused, so it was fun to return to the very different design limitations, and challenges, that the web offers. The business goals were to focus on users accessing the site on a desktop machine, where a precise keyboard navigation, track pad, or mouse driven cursor could reasonably be expected from most users. However, as a design goal, I hoped to support touch devices as much as possible, making Android phones at the point of need, an accessible option.