Object Side Panel

In a previous shot, I mentioned that we ran user tests to determine which object card concept worked best.

We tested 3 versions:

a) The one you’re currently reading about.

b) An object card with a details preview.

c) An object card with link cards.

Results

As expected, users preferred the simplest version — a card with a single CTA that opens a side panel containing all object details. You can see it in the second shot below.

Object card layout

This version doesn’t include previews or extra details. Instead, it keeps the focus on the object itself and its relationship with other objects—particularly its parent (if applicable).

Parent chip

At the top of the card, we added a chip that references the object’s parent. For a location, it’s the client; for equipment, it’s the location; for contacts, it’s either a client or location. The client itself has no parent since it’s the top-level object in the hierarchy.

Other elements

Below the parent chip, the main object is displayed, followed by a primary CTA that opens a side panel with full details. Next to it, a context menu groups secondary actions like “Change [object name]”, “Remove”, and more.

Cross-platform approach

Roopairs is a Progressive Web App (PWA), so we prioritize solutions that work seamlessly across platforms, making adaptation easier for both design and engineering teams. However, in some cases, the mobile version integrates native UI elements for a more natural experience — for example, the side panel appears as a drawer on mobile.