Tweaking the styling of Tasks inside Cards

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
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
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!

What's Assigned to Me

Highlights, a better alternative to old-fashioned Filters

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
Highlights button

And you will see this menu of actions:

Highlight options
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
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.

Matched cards are below the scroll
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
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
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.


We had a problem today

Kerika was unavailable for about 15-20 minutes this morning; our apologies to everyone who was affected.

It’s back now, and we are still investigating the root cause.  All we know right now is our Amazon Web Services (AWS) Load Balancer, which acts as the immediate front-end to every browser that tries to connect to Kerika, reported a problem.


It is starting to look like Amazon Web Services was having an internal networking problem; our server’s error logs included entries like

[97207ms] ago, timed out [81830ms] ago, action [cluster:monitor/nodes/liveness], node [{#transport#-1}{thl-D8yeRmGg9N_4GyNNUQ}{elasticsearch}{}], id [133181]
06-07-2017 16:44:53.077 [ConsumerPrefetchThread-1] ERROR - AmazonClientException: receiveMessage.
com.amazonaws.AmazonClientException: Unable to execute HTTP request: System error

Restoring service was unexpectedly hard: we couldn’t reboot the AWS EC2 instances from the AWS Console, and couldn’t even login to the machine using ssh.

Eventually we had to power down our EC2 instances and restart them from scratch.  Not good.

Expanding our use of Lazy Loading

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.


Tasks within Cards

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
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
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.


An easier way to hide or show columns

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
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
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.

Column Actions: a simpler way for Board Admins to customize Task Boards and Scrum Boards

We have added a new feature to our Kerika Task Boards and Scrum Boards, to make it easier for Board Admins to customize the layout of their boards (i.e. to customize the workflow of their projects).

This Column Actions menu appears the top of each column, as shown below:

Column Actions menu
Column Actions menu

When clicked, the button shows the following actions that can be performed on the column:

  • Rename the column
  • Add a new column, to the left
  • Add a new column, to the right
  • Move the column one position over to the left
  • Move the column one position over to the right
  • Delete the column, which means move all its contents to the Trash

This new button and menu makes it easy to access the most common actions that Board Admins need to organize their project’s workflow.

The Board Settings dialog will continue to support this feature, as well as handle more advanced scenarios such as boards that use Work-In-Progress limits on columns:

Column Operations
Column Operations

Note: only Board Admins can customize the columns on a board; not Team Members or Visitors.

New feature: an easier way to share boards

We have added a new feature in the Board Team dialog, to make it easier to share your board’s URL:

Board URL
Board URL (masked in this example)

This will be useful if your board’s privacy is set to Anyone can view this board, like in the example shown below:

Public board
Public board

You can now copy the Board’s URL to  your browser clipboard, and send that to someone else as an email or instant message.

If you change your mind about making the board accessible to anyone who has the URL, you can always set your board’s privacy to Everyone in Account Team or Only people on the team.

Customer Journey Maps: a new template

We have a new process template that you can use to create Customer Journey Maps, based upon some great articles written by the Nielsen Norman Group.

Customer Journey Map
Customer Journey Map

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.