Process

Learning about the content

Having all the loan information in a single view will benefit the users, our research has indicated so far. To begin, I needed to understand the content — the data types, the relationships between them and all their attributes. I arranged for demonstrations with company trainers to do just that. I also worked closely with Product Managers who had collected pertinent loan details.

Generally speaking, the big blocks of data was a straightforward parent-child relationship but elements were nuanced creating endless possibilities. The screen design needed to be flexible enough to unlimited combinations.

Determining what users need

For context but will not going into detail here, I classified the activities users are doing with this data and let that inform the content layout design. What types of things will they be doing on this screen, what will they be looking for?

The findings dictated the content layout.

Identifying the needed components

As the content detail was collected, I began to think about the components needed to house them. It was helpful to think of them in pieces, then tying it back unto the overall system. The components include the container, controls, notifications, alerts, status and hints.

Brainstorming container ideas

The container design must be flexible enough to handle all the possible instances of content structure. Sketching on paper helped quickly go through various scenarios.

Testing layouts

I provided prototypes to validate and fine tune our designs. The Product Managers tested the prototypes with the users.

Final Container Pattern

In the end, the card design offered the flexibility needed and visually represents content relationships. With that as baseline, we expanded the card pattern to include other content blocks.

Expanding the card pattern idea

Taking advantage of the inherent nature of cards, we expanded it to handle content blocks. When applied across the system, the result was a layout that was consistent and cohesive.