The first time I saw Ondema’s user interface, I instantly recognized the card paradigm as a powerful visualization of tasks. It’s fairly common in many different applications, so it is a known design pattern that requires little work for the user to understand.
The design language we used was very limited visually. The power of the card paradigm is based on being able to see information “at-a-glance” to make quick decisions, but our cards were a bit monochromatic and lacking obvious visual cues to represent specific data.
As you can see from the screenshot above, the cards all basically look alike. The most we showed was a series of icons, and some color changes for states:
In my quest to come up with a new design language for our cards, I had to do some competitive research. I looked at many different sites to see what was out there. What they all had in common were a more dense “at-a-glance” design language. Here are three examples from other apps:
These cards contained much more information and used color and iconography to instantly be able to compare and contrast all the different tasks in the grid. What I learned was that making the card background a neutral white allowed better use of color for status labels, and icons just looked better.
New Ondema Design
I absorbed as much as I could from all the research, picked out what I felt worked best from each, and began the task of re-designing our cards.
The first thing I needed to know was exactly what data to show. This was not a decision I made on my own. I talked to others internally to find out what we felt was important. We came up with this list:
- Priority (1-4)
- Assigned User(s)
- State/Status (e.g., Billed, Completed, Read Only, Blocked)
- Due Date
That’s a lot of information to display for a single card, but ultimately it wasn’t that difficult to come up with a layout that made sense.
Here we see the new design. At a glance, we can see the priority status by noting the color of the stripe on the left (in this case it’s red which signifies Priority 1). Inside the priority strip is a series of icons for all the possible states (billed, completed, read-only, and blocked).
The due date is also easy to see and will change color depending on whether it’s due soon, due today, past due, etc.
The title goes across the top and can wrap to two lines before it gets truncated with ellipses. Under the title are three icons: Description, Sub Tasks, and Comments.
- The Description icon only shows if there is a description, and hovering over the icon will show the description in a tooltip.
- The Sub Tasks icon is coupled with a label showing the total number of sub tasks and how many are completed.
- The Comments icon shows how many comments or notes are attached to this card.
On the bottom left of the card, next to the priority strip, is the assigned user icon. This shows up if there are users assigned to this task, and also shows the number of users assigned. Hovering over this icon will list the email addresses of all assigned users in a tooltip.
Lastly, in the upper right corner of the card is the Edit button. Clicking this will open the card details for editing. If the card is in read-only mode (meaning someone else is editing the card) this button becomes a red eyeball icon to signify it cannot be edited right now.
When a task is marked as completed, we now use a grey background color to easily differentiate between completed and non-completed cards:
When it’s all put together, we think you’ll agree that the new design language is friendlier and allows for quick at-a-glance parsing of data.