Case study | Wiliot Asset Page

From a long scroll to a master-detail view

I redesigned Wiliot's Asset Page, a sales and demonstration tool that lets customers examine an IoT-tracked asset's details, metrics, and event history up close.

Redesigned Asset Page, showing an asset's metrics and location history

What the page needed to handle

The Asset page exists to show a prospective customer what Wiliot's tracking can do for one specific asset — but it wasn't holding up as assets generated more metrics and more events. What came out of research and usability review:

How we found this

User interviews surfaced where the page was hard to use, and Pendo analytics showed which parts of it customers actually touched versus what was going unused. From there it was wireframe iterations exploring different layouts for pages with very different data volumes, then prototypes validated with stakeholders.

Three wireframe versions of the Asset page layout

Three layout directions — wireframe versions explored before landing on a master-detail structure: a scrollable single column, a tabbed page-title layout, and the master list plus detail panel that eventually shipped.

Pendo analytics showing usage of the Asset page

Pendo usage data — visits, time on page, and which features on the Asset page (temperature charts, device tabs, edit actions) were actually being used, versus built and ignored.

What we changed

Each change traces back to a specific gap in the old page.

Master-detail layout

Replaced the long single-column scroll with a master list plus a detail panel, so moving between an asset's info and its metrics doesn't mean scrolling back to the top.

WHY? · Transitioning from a scroll view to a master-detail view was the fix that made the page hold up at real data volumes.

Devices folded into the header

Dropped the separate Devices tab and surfaced an asset's connected devices as a link right in the page title.

WHY? · Eliminating tabs and incorporating devices into a link at the title cut a click out of the most common path.

Added a Geo location metric

A new metric card surfaces an asset's coordinates directly, instead of leaving location as something you had to infer.

WHY? · So a customer could see an asset's location on a map, not just as a name or a zone label.

Chart and list, for every metric

Each metric, temperature and location included, now gets both a chart view and a raw event list, with a toggle between them.

WHY? · The page needed to show both visual and raw data per metric, not force a choice between them.

Location History chart

Added a dedicated history chart for location, layered under the live reading, instead of only showing the latest position.

WHY? · A single last-known point didn't answer where an asset had actually been, so a history view was added to improve visibility.
Annotated comparison showing the redesigned Asset page changes

Redesign, annotated — the master-detail structure, devices folded into the title, and the added Geo location and Location History metrics, side by side with the version that shipped.

Walkthrough of the redesigned Asset page's metrics and devices tabs

Metrics and devices tabs — the finished page: two tabs (metrics, associated devices), a common set of metrics scrollable for every asset, and a chart plus event list for temperature and location each.

What's next

Want to go deeper on any of this?

Happy to walk through the wireframe iterations, the Pendo data behind the priority calls, or why the master-detail layout won out.