TeamKinetic is now a mature and fully featured volunteer management solution. As it has matured we have been able to more rigorously enforce a design principle for better impact across all user interfaces that we call Focus.

Focus is a collection of typography, grids, spacing, colour, layout and sizing rules that aim to achieve consistency of design, fluid layout for smaller screens and help to retain user focus on important tasks.

Volunteers, providers and administrators are presented with large amounts of information and we have been working hard to make this volume of information easy to digest in our Volunteer management application so the individual user focus is on the most pertinent information.

The biggest layout difference you will see is the support for a two-pane design with navigation elements in the left pane and the action area in the right pane. This layout also encourages the collection of tasks into one area, either functionally similar tasks or tasks commonly undertaken at the same time.

A two pane layout with a navigation bar on the left and the action panes on the right

Colours are restricted to a limited palette so that actionable areas like buttons, menus and links, are obvious and easy to find.

Font sizes are consistent and changes in font size are restricted to key text and headings.

Animation are used to indicated areas of focus when information is updated or the user enters a new area.

Panels are elevated when active using an animated shadow effect

Message and information areas are distinguished by a thick left border, the colour is contextual and can refer to the category, message type or other information.

Thick left borders indicated messages or important content areas

Where possible we want to avoid page refresh as this slows the users experience and can break their focus on the task at hand.  Volunteers, Providers and Admin users all want to be able to undertake tasks with the need for a screen refresh.  Extended use of AJAX , a method of performing user interactions immediately without reloading a new page, enables us to keep the user focused on their task without the interruption of a page refresh and the subsequent visual scan of the page to locate the last point of focus.

AJAX methods are employed extensively across the admin area, especially when editing opportunities or volunteer profiles.

Grids and spacing automatically adjust to screen size and allow navigation areas to collapse to icon only links and wide content to collapse into vertical stacks keeping readability high.

Collapsible elements retain readability and usability for small screens

We just wanted to let you know what’s behind some of the design decisions in the brand new TeamKinetic v1 release and our design intent going forward.

Please add any comments you have below, thanks, The Team.