cardification-header-2x

STICK IT IN A CARD

LEAD DESIGNER • SIFT SCIENCE (2016) • VIEW LIVE

The main bread and butter of the Sift Science Console is the User Details page, a comprehensive overview of an account and its relationship to potential fraud. Here, we take all the data a business has sent us and create a visual interface that helps fraud analysts efficiently and confidently decide: ‘is this account committing fraud or not?’


Making sure that the User Details page—traditionally one of the most viewed pages in our console—effectively helps our customers quickly make fraud decisions is always of the upmost importance. That’s why in 2016, after realizing that our long, sectioned layout was simply not performing, we decided to rethink our entire User Details interface. The result of that project was “Cardification,” the movement toward a card-based layout.

full-layout-browser-2x

A sneakpeak of the final product we launched, scroll down to read about how we arrived here.

THE INITIAL EXPERIENCE

 

The user details page was originally designed as a long, scrollable page that was sectioned off thematically. While this was a great way for us to present a controlled “story” for why an account was scored a certain way, we quickly realized that this layout was ineffective for two main reasons:

 

Issue 1: Lack of Information Density

The original User Details page was designed in 2014 and remained unchanged for about 2 years. During that time, we were able to conduct numerous usability sessions with our customers. One universal opinion that came out of those sessions was that scrolling was bad news. Scrolling meant spending precious time looking for information, rather than using those seconds to digest it. A page that was designed to be long and scrolled was simply not getting the job done.

 

Issue 2: Lack of Versatility

A sectioned layout by nature is difficult to customize. We could remove sections altogether if they were irrelevant to certain customers (ie, customers that never sent transactional order data would not have an orders section), but aside from that, there was no other form of customization. Because our customer base is so wide and varied, having a console that can support different use cases is very important. We needed a layout that could be modular enough to adapt to our customer base.

initial-experience

THE GOAL

The goals were clear, we wanted to develop a new interface that could improve our console’s information density and also be flexible enough to handle multiple use cases. In order to make sure we were working toward our goal, the interface overhaul needed to be designed with these values in mind:

efficiency
flexibility
foundation

Efficiency
Fraud analysts are measured by the speed (and accuracy) of their reviews. Our interface must be efficient so no seconds go to waste.

Flexibility
Our customer base is wide and varied, the new interface has to be flexible enough to meet their unique business needs.

Foundation Building
Drastically changing a UI can cause disruption and require new training material. The new interface should be built to last and adapt.

border-2x

LET THE SKETCHING BEGIN

After aligning on the goals, I got straight to work sketching and wireframing out possibilities. Knowing that our new interface had to be flexible and adaptive, my mind jumped straight to card based layouts. Our horizontal layout wasn’t working on the information density side, so I wanted to introduce vertical columns to break up the real estate and fit more above the fold. Having predefinted sections wasn’t adaptable, so I wanted to explore creating modules (or cards) to visualize the data. 

 

sketch-1
border-2x

ANATOMY OF THE CARDS 

Having explored the general skeleton of the new layout, it was time to start working on the actual card modules themselves. Though each card has been designed around the type of data that it visualizes, there are some shared common traits between each of the cards. We wanted to make sure that each card felt interrelated and part of a bigger whole, despite being a modular system.

anatomy-card-2x

Make it dense and show me more

Having a modular layout inherently made the interface more information dense as we were able to display many cards side-by-side on a single page, but we also consciously designed each individual cards to be more space efficient as well. The orders card is a perfect example of how we displayed more information in a smaller amount of space.


Not only did we add a couple columns (Billing Name and Decision Made), we also made an effort to give more information in each space. For example, the Payment Method column now depicts more credit card information, including the card type and last 4. By using more visual cues and fitting more information on the page, we were able to make manual reviews even more efficient for our analysts.

orders-card

Adding in visual cues and colors makes it easier to process information at a glance, as evidenced by the payment method column.

Customize it

Creating card modules meant that our interface was more flexible in adapting new use cases, as we could now easily introduce new cards to support specific business needs (like a content card or flight information card). Aside from allowing Sift Science the ability to add new cards to the system, we also introduced customer-level ability to customize their page layouts. Customers culd add, delete, and rearrange cards as they saw fit. This meant that they could now delete cards that were irrelevant to their business and arrange their cards so that the most important data could always be at the top of the page.

edit-layout

Customers could add, delete, and rearrange cards.

PUTTING IT ALTOGETHER

Below is a sample layout of how all the cards fit together in the new interface. Though this is already a big improvement over our previous iteration of the User Details page, it’s only the beginning. There’s still a lot more that we can do! If you want to experience the console live, check out our demo.

Looking to the future

Phase One of the Cardification project— creating modules out of our existing sections—is now complete, but this is only the beginning. With a modular system, we can now add new cards as they’re developed and customers can easily add them as it suits their business needs. For example, recently we’ve been doing very well in the on-demand food delivery space. We could potentially introduce a card that’s specifically geared toward showcasing the route of deliveries made. Aside from Sift Science developing card modules for our customers, in the future, we can even empower our customers to develop their own cards.

border-2x

Hi, just wanted to let you guys know my feedback about the new interface. Its great step forward! It allows for faster analysis of users and orders without any loss of information. I enjoy not having to scroll as much. Keep up the good work!

Green Man Gaming

border-2x

I previously worked with Payza.com and helped design and build their in-house fraud platform. I really liked Sift Science user interface and the way you present data, like your linked account network diagram thing, really cool. Nice product.

Payment Rails

cardification-full
dribbble
linkedin
instagram
email

© copyright 2017