We fixed a bug that was kind of annoying: if you had a Custom Highlight defined for one board, and then switched to another open board, the Custom Highlight was getting applied automatically to the second board as well.
This happened only if people used the Board Switcher button that appears on the top left of the Kerika app:
Board Switcher
The Board Switcher keeps track of all your open boards and is a fast way to switch between them if you are working on several different projects at the same time — you don’t have to go back to the Home page to find your boards again and again.
Every of your open boards can have Highlights set, or not, as you like. This bug fix makes that a smoother process.
We really like the Tasks feature that we introduced recently: this has significantly cut down on the number of cards that we have to track on boards, since many items can be easily captured, assigned and scheduled as tasks rather than independent tasks.
This means we have a better, epic-oriented view of our boards; we don’t get lost in the weeds.
However, the first implementation of the styling could do with some improvement, so that’s what we did:
Improved styling for tasks
This makes it easier to see the names of people assigned to cards, and the due dates, more easily.
By the way, it took a surprising amount of experimentation before we settled on these colors: in Kerika’s design every color is supposed to have a particular meaning, so that colors appear in a consistent context in every instance.
For example, if we use blue to indicate a clickable link — like we do on the card details left tab, to let you switch between Tasks, Attachments, Chat, etc. — we can’t use blue anywhere else where it wouldn’t be clickable.
So, if blue is clickable in one place, it must always be clickable everywhere else.
This is easy enough, but we also have rules about using colors consistently across actions or displays that seem related, again to minimize the learning effort needed by new users.
Our green is used for Highlights in a consistent way:
What’s Assigned to Me
The breadcrumbs includes the suffix “What’s Assigned to Me” in green, the Highlights button is green to indicate that it is in use, and a green button is used to indicate that items matching the highlight are out of view.
If we are rigorous about this, there is an internal consistency about the Kerika user experience that makes it easier to learn. But it takes a lot of discipline.
So if consistency applies a bunch of constraints in our choice of colors, so do legibility and color-blindness: we have to be careful to avoid using color combinations like red and green that are difficult for some people to distinguish. (About 8 percent of males, and 0.6 percent of females, are red-green color blind in some way or another, whether it is one color, a color combination, or another mutation.)
All of this means that it isn’t easy to pick a new color when we design!
We have replaced the old Filters feature for our Task Boards and Scrum Boards with a new Highlights feature that we think is better in every way!
Click on the Flashlight icon on the top right corner of the Kerika app:
Highlights button
And you will see this menu of actions:
Highlight options
The default is No highlights. We have a couple of built-in highlights that we know you will find useful right away:
What’s assigned to me: very useful if you are working on a large board, or with a large team, and you focus on just what you need to get done.
What needs attention: this highlights all the cards on the board that we think need to pay attention too — items that are overdue, on hold, or flagged as needing review.
Here’s how the Highlights work:
What’s Assigned to Me
A shadow effect helps spotlight all the cards that match the highlight, making them literally pop out of the screen!
If you are working on a board with a lot of columns, there’s always a chance that something that is being highlighted is currently out of view — if, for example, it is near the bottom of a long column.
Kerika takes care of that as well: if a card that matches your highlight choice is currently out of view, a green button appears at the top or bottom, as needed, of each column to indicate that there are cards out of view that match your highlight.
When matched cards are below the scroll
The green arrow acts as more than just an indication that you need to scroll: it is also a button that will scroll the column to show you the next card that you need to see.
(Pretty cool, huh?)
We will be adding more smart highlights in the coming weeks, but in the meantime you can also create your own custom highlights:
Custom Highlights
A Custom Highlight can include any combination of people assigned to cards, status, due dates and tags.
For the due dates, we have offered several smart options that are a lot easier to use than standard date pickers:
Smart choices for Due Dates
These ways of specifying due dates — like “Due Next Week” or “Next Month” — make it even easier to set up a custom highlight.
Our introduction of lazy loading, as part of our recent redesign, was originally limited to just three columns: Backlog (for Scrum Boards), Done, and Trash.
We figured that these columns were most likely to be very long, and would therefore benefit the most from implementing lazy loading.
This worked well; so well, in fact, that we have expanded our use of lazy loading to work with all columns, across all Task Boards and Scrum Boards.
The practical effect of this should be to reduce the time needed by the browser to load large boards, for all users, on all kinds of computers.
We have added a new feature to our Task Boards and Scrum Boards: you can now manage a list of tasks for each card on a board, like this:
Example of tasks in a card
Every card can have as many tasks as you like, organized in a simple, smart checklist.
Individual tasks can be assigned (to one person at a time) and scheduled, and Kerika is smart about rolling up these assignments and due dates to reflect them on the card as well:
Managing tasks in a card
As you mark off tasks as Done, they slide to the bottom of the list to make it easy to see what remains to be done.
We are extending the Column Actions menu (featured in a previous post) to provide a quicker, easier way to hide (or show) individual columns on your Kerika Task Boards and Scrum Boards:
Option to hide column
When a column is hidden, it’s name is shown vertically, so you can easily remember which columns you have hidden at this time.
Hidden columns
Revealing columns that are hidden is easy: just click on the “eye” button and the column immediately comes back into view.
Every Team Member can decide whether to show or hide individual columns: their choices won’t affect the way other Team Members choose to view the same board.
This template contains all the step you need to create your own Customer Journey Map, along with links to articles on the subject from the Nielsen Norman Group.
It’s part of our “Creative Stuff” category of process templates, which includes the Google Design Sprints as well.
With our big UI redesign, launched a couple of weeks ago, we have started using lazy loading of cards in an effort to improve performance, particularly with very large boards.
Background:
Most Kerika boards tend to be small, or moderate: up to 100-200 cards in size. A few users, however, have very large boards: several thousand cards in size!
And this is not because we have users who are tracking thousands of work items simultaneously; it’s just that some users have been continuously using the same board for years to track all their work.
For people who use the same board over several years, the number of items in the Done or Trash columns can eventually number in the thousands. Displaying such large boards was already difficult in our old architecture: we had underestimated how many cards some boards might contain, so our old design downloaded all the cards on a board every time it was opened, and then created a DOM for each card!
This meant that, for very large boards, the browser had to create thousands of DOMs before it could even display the board. This was obviously not a sustainable model.
What we did:
With our redesign, we have laid the groundwork for a better architecture using two related concepts in lazy loading:
For columns that we anticipate being very large — the Done, Trash and Backlog columns for Task Boards and Scrum Boards — the browser now fetches only a small number of cards, say 10-20, from the server. (With our old design the browser would fetch every card, for every column.)
Fetching fewer cards means the amount of traffic between the browser and the server decreased dramatically, but it didn’t solve the performance problem by itself. We also changed our browser code to reuse DOMs instead of creating new DOMs. By reducing the total number of DOMs created and maintained within the browser by the Kerika app, we are able to reduce Kerika’s overall browser footprint while significantly improving performance.
Here’s an example of lazy loading of the Done column:
Lazy loading of Done column
On this board, the Done column contains 163 cards, but when the board is opened only 10 are shown. Since these are the 10 most recently done cards, this works great for most users, most of the time.
If the user really wanted to see something that was done a long time ago, they can simply scroll down the Done column, as they would have with our old design as well.
As a user scrolls down, more cards are fetched automatically from the server. Slightly more cards are fetched from the server than are likely to be displayed, e.g. the browser may fetch 15 cards from the server even when it expects to display only 10.
This helps avoid the perception of delay when the browser needs to fetch more cards, since it will already have 5 more cards stored in memory to show as the user begins scrolling, giving it time to fetch another 15 before the user has finished scrolling.
We also decided to use lazy loading on the Home page: with our new design we display more information about the state of each board than we did previously, and the cards themselves are much larger than before. This means we are unlikely to show the full set of boards to any user at any time, so lazy loading is a natural choice for this view.
Lazy loading of Home
Finally, with our most recent update (launched two days ago), we have extended our use of lazy loading to include the Not Scheduled column in the Planning Views, where you can pivot your view of a Task Board or Scrum Board to see all the cards organized in terms of due dates.
Here’s an example of a board where there are a very large number of unscheduled cards:
Lazy loading of Not Scheduled
The Not Scheduled column only fetches and displays 10 cards at a time even though there are over 200 cards that are not scheduled. Since the browser (on this laptop) can only show 3-4 cards at a time, there isn’t any point in fetching all 200 cards: just fetching and displaying 10-15 at a time does the trick!
Arun Kumar, CEO of Kerika, and Joy Paulus, Senior Policy and Program Manager for the Washington State Office of the CIO, delivered a joint presentation at the Lean Transformation 2016 Conference.
The subject of the talk was “Collaboration Across Organizations: Big Results with Small Teams”. Here are the slides from the talk:
