Card Design

For this project I was tasked with re-designing info cards for a main dashboard view. The software is primarily for realtors managing their listings and cards were the primary way of displaying information and action items.

Duration - 6 weeks

Role - Lead UX Designer

Tools - Sketch, InVision

Responsibilities : Competitive Analysis, User Research, Wireframing, Prototyping, Testing.

The Product

Listing cards which were used to display top level information about the homes a user was representing.

The Problem

When initially designed there were only a handful of features and info that needed to be shown on the dashboard information cards. After several years of new features it was clear that the old cards couldn't accommodate all the info and actionable items that users expected.

The Goal

The goal of this card redesign was to make the overall experience of the users dashboard more consistent, informative, and scale-able with future products.

The Problem

Old Card Issues

Old Card Isses

Through a combination of our user feedback channels and also witnessing the progression of the initial card design, I spotted a few flaws with the initial card design that were leading to a very inconsistent and frustrating user experience.

An issue with the past card design was a lack of consistency on where actionable buttons on a card were. There weren't any defined rules or logic to the card, so, as more features were added they were placed on the card where they would fit which sometimes meant shifting items about. This eventually lead to a very cluttered looking card (yes, I realize I’ve said “card” about 100 times now) and coupled with items moving about lead to a very unsatisfying and confusing experience for our users.

There were also certain key pieces of information missing from cards that weren’t shown, which users expressed they really wanted : bedrooms, baths, square footage, mls vs non-mls , and the actual mls number. This top level information was shown in our other products, but not in our cards, which lead to frustration and confusion when our user would go to their dashboard and not see that information.

To compound things further, the initial cards could be dynamic in size - responding to the image size/dimensions that the user uploaded which lead to some cards being really large, or, really small.

An early iteration of the original card design. Note the lack of some top level home information and hard to read white text on background.

A slightly later version of the card. Here we already see room rapidly running out for actions. Also note the change of card size - this is based on image size and dimensions and often lead to inconsistent card sizing which often lead to a very odd looking dashboard for the user.

Solution

Card Behavior
Card Info & Actions

Card Behaviour

I first decided to tackle the overall behavior of how the card would function. I decided to design this first because I strongly felt that in order for our listing cards to be sustainable with future features, a set rule and behavior system needed to be in place to guide that. I first decided on a static card, meaning the quality and size of our cards would no longer change depending on the image. This was slightly controversial since interacting with our users and through past experiences I knew that our users were very protective of images uploaded and would not respond positively to an image being cropped or resized within the rich media constraint. Looking through the majority of images uploaded though, there was still an overwhelming percentage of users who defaulted to the standard 16:9 image ratio so I felt confident that this was the right direction to go. I then did further research into best practices for card design with multiple actions and information to get a feel for how other designers are tackling similar issues and why.

Card Info & Actions

I knew what information most of our users wanted to see when they viewed their listing card, so it was a matter of designing and fitting the information onto the card that was both informative and easy to ready. I went through various iterations, some with extra information, some with a little less, but decided on the design below. The design shows the top level information seeked by our users in an orderly and easy to read fashion. I decided against showing more information than is necessary since those iterations looked much more cluttered and made it hard for the eye to easily find what it was searching for. Also, the card is only face value information and our users know that clicking the card itself brings them to a deeper level of detail on the listing.

An issue with the previous cards regarding buttons/actions was that they were scattered across the card with no logic. I addressed this by having a specific area on the bottom of the card where those actions could always “live”. From feedback and also talking to and observing our users I knew what the top 3 most popular actions/buttons were and so I decided to make those the most accessible. Some of our users could have dozens of listings (and thus cards) at a time and I wanted the new card design to enable them to perform frequently used actions easily. I also decided on a drop menu for the other actions that could be accessed easily, but would not lead to a cluttered and visually displeasing card. Not only would the menu enable the rest of the card itself to not be so cluttered, but it would also be a place for new actions and features to be placed as they came along.

Going forward

Thoughts

Thoughts

Overall the design itself was really well liked by our users and this reaction, along with the process of designing a new card, taught me a few things.

Consistency is at times very understated and it’s important to think ahead. A lot of the problems, if not all, came from not being able to think far ahead enough of where our product was headed and this resulted in an experience that was inconsistent and frustrating for our users.

Through this process I also got a better understanding and appreciation for applying more complex behavioral logic to a design. Applying very specific logic and behavior not only solidifies the intent of the design, but with the user in mind makes for a more consistently positive experience.