Adventures In Card Design

One Example Why The Design Go-To Is Not For Everyone

Cards.. Every designer loves them, right? Cards serve as a great way to group information, particularly when it comes to mobile devices. They come in all shapes and sizes, and they have been adapted universally as a simpler way to provide a group of information.

Using a card-system for the work-items within our Portal app made logical sense. We needed a way to provide information for each work-item in an easily consumable manner. By using color, icons, and typography, we could design each card to be a visual representation of each work item.

Early Designs

Work items as they appeared in Portal 4.6

Moving on from version 4.6, the entire app was being re-designed. This gave us the opportunity to try some new things with how work-items are displayed. Before, the only other option was in a table-like format.

Each work item has the following information:
- Policyholder’s Name
- Effective Date
- Premium
- Quick Quote or Full Application
- Work Item Number
- Status
- Line of Business
- Date Created
- Percentage Complete

A lot to put on one card! But it can be done..

In talking with the other designer Dave, we both agreed on having the icon represent the Line of Business. It would be transparent as a sort of “water-mark” on the card. Very early on, we also liked the idea of having color represent the status. We even considered the possibility of a card having multiple statuses, seen below.

Because there is so much information to show, we have to make use of the hierarchy in the typography. Name is the most important overall as far as distinguishing one work-item from another. Below is an example of bumping up the “Effective Date” and “Premium”.

Current Design

The work item as it is now — default state, hover state, and clicked-on for more options

Compared to the examples above, we landed on a revised design that is more clean. The name is still important and we grouped the secondary information below it. We stuck with the color and icon system we established early on in the process.

Besides the information on the card, we also have to provide options for the users to act on. This is accomplished using buttons. There’s an “Open” button, as that’s what users will choose most of the time. For all other options, there is a drop-down.


The preferred table view in Portal 5.1

At AP, we go on these visits as part of our “Agent Insight” initiative. These visits are spear-headed by my co-worker Jenn, who visits agencies all over to get real feedback on our products. I had the opportunity to go on my first visit to an agency in Quincy, Mass.

One surprising finding was that users were not fond of the card system. There was an overwhelming response favoring the list-implementation above. When asked why, users responded that it was simply easier to find what they were looking for. Using the cards also meant having to learn a whole new system of symbols and colors.

As I thought about it more, I could see from their POV. Each card takes up a lot of space with less glance-ability. However, we do have a very strong search and filtering system that makes it easy to locate any given work-item — no matter what view the individual user prefers.

Introducing a new system to any app can be frustrating for an user, particularly an enterprise app. Even internally, some people preferred the list view. While this iteration of the cards may not be perfect, I do think it’s a good start for exploring other options. Making big changes in an enterprise app can be especially difficult, and this is only the first step of many to come.

The old adage of “if it ain’t broke, why fix it?” aside — I think for an enterprise company, it’s important to try new things. Being complacent with the old approach, particularly in the technology industry, can be a dangerous notion. It’s always good to be open to new possibilities, even if they may not always work as expected.


As great an idea it may have been at the time, the card felt short of expectations. I think the product team — myself included, was excited about this new offering, and perhaps let our bias get in the way. In the end, it’s more important to see how it preforms in a realistic scenario. For any designer or developer, it can be easy to get stuck in our own little bubble. The more user-testing and research we can do, the better.

Within the app, we use cards in all sorts of ways. One such way is above, for the various lines-of-business we support. Cards as a design element can be useful, though they may not all be as equally successful. In the end, I like the fact that we provide options for the user. We don’t alienate those who prefer the old way while still trying out something new. For an enterprise designer, this is a triumph in itself.

Of course, none of this would be possible without the rest of the product team at AP! Thanks guys!

I would be curious to hear if anyone else has had similar experiences when user-testing.. Also, please recommend this article if you found it at all helpful :)