Toodledo Visual Design
Background
Toodledo is a popular online personal productivity system. It is known for its powerful features, speed, and customizability.
The Challenge
Toodledo is losing market share to competitors. One common complaint from users is the app’s poor design. We want to get to the bottom of this and propose a solution.
Scope
- There are other apps in the Toodledo productivity system, but we are focusing on Toodledo Tasks (henceforth “Toodledo” for shorthand).
- To limit scope, this project focuses on the visual design and does not propose any new features.
Research & Analysis
The First Experiment
I first created a CSS skin on Stylish to directly validate my hypothesis that visual design changes alone can improve usability. Reception was positive and gave me confidence to continue. You can find the CSS theme here and my write-up here.
Competitor Analysis
I conducted competitor analysis to better understand the landscape and for design inspiration. The analysis involved a variety of different products including ones for project management, spreadsheet editing, and database management. I also studied product reviews to evaluate the strengths, weaknesses, and overall perception of each tool.
This research gave confidence to our product-market fit and also helped direct the final designs.
User Interviews & Red Routes
User interviews validated my findings from earlier secondary research, emphasizing that users want a cleaner interface with fewer distractions and more features on par with competitors.
Based on secondary and primary research (user interviews), we constructed a Red Route map to identify the most important user tasks and features to pursue.
All evidence so far points to Toodledo being best suited for GTD practitioners who are desktop power users. These users tend to have large inventories of tasks and lists, and care about fast, fluid operations.
Design — Exploration / Refinement / Elimination
Sketches of various fidelity informed by ongoing user feedback:
We narrowed it down to three navigation layouts. Out of those, the winner was the incumbent 3-panel layout — the simple left to right hierarchy was the most intuitive, despite it taking up more screen real estate.
Other Feedback
- To be beginner-friendly, the ribbon icons need labeling.
- Users want a balance between seeing the forest (the aggregate, complete inventory of tasks) and seeing the trees (individual tasks and lists).
- Users want fewer options on the task row menu, with most of them hidden for visual simplicity.
- Users want the visual style to be customizable to fit their (personalized) work environments.
Key Design Features
Scannable Lists
Most users, most of the time, simply want to review a list of tasks to pick what to do next. They don’t want to be distracted by superfluous details, especially when in between tasks and switching between applications. So we put tasks and task titles at the top of the visual hierarchy. We want the experience to be as simple as scanning a handwritten list.
Thoughtful Authoring
A serif font is used to further distinguish user generated content from system data. In print, serifs simulate the pauses of the hand as the tip of the pen rests and collects ink on the page. GTD philosophy emphasizes the importance of only capturing next actions when actions have been thoroughly thought through. As such, a serif font encourages the user to be thorough and thoughtful in wording their next actions and designing their own future behavior.
Light & Dark Panes
The GTD core methodology rests on a 5-step workflow. In general, task managing apps are used primarily for steps 3,4, and 5 (Organize, Reflect, Engage). Users jump between steps as needed. With respect to our app, we noticed that:
- Step 5 (Engage) primarily uses the main pane (on the right).
- Step 3 and 4 uses both the main pane and the sidebar (left).
Since none of the five steps more important than the others, it doesn’t make sense for the sidebar and main pane to have different visual weights. However, since transient posturing calls for immediately obvious controls and information, we couldn’t have both panes be the same color either. And so we made one side dark and the other side bright. We want the user to quickly focus on one at a time, but also switch fluidly between the two. Visually distinct, equal in stature, and still interdependent.
How (else) did the research informed the design?
Knowledge work tools have evolved significantly since Toodledo first launched years ago. My competitive analysis revealed more modern design patterns and conventions. Some of them are reflected in the screenshots you see.
Our Red Route analysis and user interviews revealed the activities most important to the users. This led to our “content first” philosophy and task grid visual hierarchy.
Outcome
The final design was well-received by our test users. They appreciate the clean look of the new design and look forward to its implementation in the product. A Zeplin project was delivered so the design can go straight to CSS when ready.
Select Screenshots
What’s Next?
Next steps include implement a live prototype to further validate and refine the design. With a solid visual design in place, we also have the foundation for quickly designing and implementing new features. Stay tuned!
Retrospective
Although I had feedback from users and other designers, this was essentially a solo project. If I were to do it over, I’d partner with another designer or researcher for both productivity and pleasure. I’d also package the visual design with a new feature, even if it’s a small one. Visual design coupled with interaction design would communicate more richly and receive more useful feedback.
One thing that worked well was keeping to Scrum rituals (sprint planning, retro, review, etc) and managing the project in Trello. That kept the project on track.
