Focus for Trello
Focus for Trello Personal Project
Tasks: Concept, Interaction Design, Development
As regular Kanban board user, I became frustrated with Trello’s ability to allow large boards and detailed lists with no way of visually simplifying the workspace. A number of browser plugins exist to hide and style lists, however, I felt that they all lacked a simplicity of control that made them only worthwhile in more complex contexts. Additional to this, existing plugins all lack an ability to easily switch work contexts. Focus for Trello is a browser plugin I’m building to address these issues.
Most of the time I want a layout that helps me focus on on my Iteration Backlog, but sometimes I switch contexts and need to focus on another list in the board. The plugin allows this by providing pne button that can be clicked the switch between preset styles.
The images below demonstrates how a fairly simple board can be tailored to provide a better experience in various contexts.
As well as left clicking the switch button for immediate preset switching, the button can be right clicked to browse the existing presets and settings, or select and edit presets directly.
Image may contain: internet
Within the menu, a button is included that allows you to cycle through different appearances for the page’s header. All this allows you to remove as much visual clutter as desired for each preset.
Image may contain: screenshot, abstract and computer
To set up a board preset, the user clicks on the list’s actions menu for the list they want to style and clicks the type of style they want to change. Clicking each icon repeatedly will simply cycle through the available options.
It was designed this way to be a softer decision process for the user. Instead of opening a menu of descriptive options, the user just clicks and stops clicking when they like what they see. This is possible because each option only has 3-5 variations.
Since each user will probably only have a few style combinations they usually use, this menu may also be simplified into one button that can be clicked to switch between those combinations. Right clicking the button would open up the individual style options currently implemented (below). Simplifying to one button like this is the expected final implementation, however, how the user would define the presets in this context (without adding complexity) is still being considered.
Image may contain: screenshot and abstract
While attaching images to cards is a very useful feature of Trello, in many contexts the images overcomplicate the list and would help more if only visible when the card is clicked. The image setting in each list, therefore, cycles through three options: “Trello Default”, “Show a sliver of the image”, and “Hide the image entirely”.
This allows the user to adjust the visibility of the image while still indicating their is an image if needed.
Image may contain: screenshot and abstract
Because the plugin modifies in Trello’s interface in realtime after it is rendered, programming using React JS wouldn’t have been beneficial, however, use of JSX to define various components was still desired. The plugin, therefore, uses jQuery and JSX-render to manipulate DOM nodes passed in by mutation observers.
This project is still in development but is already being used in production internally. Upon it’s refinement and documentation it will be release as open source.