CapitalOne CardLab Dashboard

The Digital Dashboard as a design paradigm has now reached the public consciousness. The digital dashboard is ready for prime time. How do I know? I happened to come across a television commercial today that actually featured a digital dashboard! CapitalOne is running a series of spots to promote their CardLab service where you can create a personalized design for your credit card. There are several ads running – most of them on the goofy side, with sci-fi character running around. You can’t see the CapitalOne CardLab screens in those commercials, but there is another one that features an animation focusing on the dashboard layout of the software used to create and model the card. A slick animation shows off the various portlets of the digital dashboard.

The “Web 2.0 Design Aesthetic” is used very nicely in this dashboard. See the post “Evolution of Dashboard Design Aesthetics” to see what defines Web 2.0 Design. (Hint – reflections, gradients, soft glows”

What is really exciting from a software user perspective is that, with the millions of dollars promoting the product, we are going to certainly have significant amounts of users trying out the digital dashboard as a design pattern for the first time. This maturation of the dashboard paradigm is exactly what we dashboard designers hope for – the day where dashboards are not novel user interfaces, but tried and true, intuitive displays that are fully embraced and understood by users.

I’ll see if I can find a link to the actual TV spot, but in the meantime, have a look at this very nicely designed dashboard. I’ve provided a dashboard screenshot here, but to do the application justice, visit the actual CardLab Dashboard application and try out the user interface. You’ll need to click through the first couple of intro screens to get to the interesting dashboard layouts.

CapitalOne Cardlab Dashboard

It’s got some great design ideas to use for inspiration. I like the way the navigation works with the left navigation items clearly labeled with the numbers corresponding to the steps of the process. I’ve struggled with long workflows in my dashboard applications and found that explicit naming of the steps (Step 1, Step 2, etc.) works very well in terms of wayfaring. The center work area is clearly labeled with the corresponding step number.

After the “more” link, I discuss this business dashboard further, so please join me:

The look and feel of the interface is very Web 2.0 with the gradients, the color pallette and the reflections. As you probably guessed, the app is flash-based. I’m always a big fan of help materials for users and so I really like the fact that a left column portlet shows information that corresponds to the location of your mouse cursor. Simply hover over areas in the center portion to load the help material into the left bottom portlet.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>