A Bare Experience

As I dug deep into the existing Asset Details page, the first thing I noticed was a bare experience. It’s also important to note that this was not contingent on the fact that one asset had more data than another, but strictly having to do with the layout and design. Nothing about it was inviting, or felt like the intent was for a user to stay and browse around which is the exact opposite of what we want our users to do.

Findability

Another issue I found with the current Asset Details page was that information was difficult to find. Findability is key with our platforms because of the amount of data and information we as a company have to share with our customers. We want to present the data that’s needed in a way that gets users the information they need in order for them to use it and take their next action.

The Solution

I used our design system that encompasses bold colors and standout components to create a dynamic layout that would ease the browsing experience for users. Due to the amount of information that would be going on the page, I was cautious around how much information I presented for each card. I kept in mind that this is an overview page and users would have the ability to drill down to a deeper level page to get more information.

Finding the balance was a challenge at times, but going back to the idea of presenting “need to know” information kept me on track. I frequently went back to the existing Asset Details page and continued to take inventory of what wasn’t working from a design perspective. Nailing aspects of the design like headings, font weights, and color usage was crucial in visually separating content in each card. These small visual aids allow users to more quickly scan the page to find what they’re looking for, and are going to be key for our busy and on the go users.

A Drill Down Experience

Due to the cards themselves not being clickable, we needed another way aside from the page tabs for users to drill down to view more contextual information. The reason for this was since the tabs are not sticky, if a user wanted to drill down, they’d have to scroll back up to the top of the page to find the tabs.

The solution for this was adding “Show More” links on cards to kick off that drill down experience. The clear text indicates to users there is more information to be seen, and the blue color is consistent with other platforms and signifies a clickable link. An example of that is shown here with the Timeline and Planned Maintenance cards.

The Solution

What I was aiming for with the timeline was the ease of use. I wanted users to be able to quickly and easily scan the timeline and it’s events and be able to have the information they needed to move forward. The timeline design went through a couple iterations. The first was a more “relaxed” look and feel that presented users with all of the necessary data we’d provide. I used brand colors like the CAT yellow to indicate the most recent events on the timeline and used our maintenance colors to indicate urgency. 

The Final Iteration

The final iteration of the design came after I received a new requirement that users would have the ability to view the timeline on its own page for a better viewing and searching experience. Although all of the data would stay the same, I adopted a look that made the current date standout much more than the previous version to draw the users attention to the most recent events. With that, I also shortened the timeline card on the overview page to make room for a new feature that would have it’s own card. With the timeline having its own page, the card on the overview didn’t need to take up that amount of real estate.

Timeline Drill Down

The design of the drawer itself also took on a new look and that was another reason for the UI change. In this version, I swapped information around to ease the scannability for users and moved the date to one side of the card. This would make it easier for users to correspond dates with events in the full page version when the user would have the option to go back to view events up to two years prior. 

Adding New Components

Due to the amount of scrolling a user will do on this page, I added a “Back To Top” feature that would appear one the user had scrolled or navigated so far down the timeline. This would allow users easy access to return to the most recent event. This also was a new component introduced into our design system for future needs. When new components are built, it’s an opportunity to share them with the rest of the design team for knowledge around usage and its availability. This also ensures that a duplicate component isn’t created.

The Solution

The solution for the Asset Details page specifically was a full size drawer that allows a user to remain in their current experience while navigating to a deeper level. The metadata is sticky at the top for easy reference as well as in page tabs to drill down to deeper levels. When navigating to other Asset Details pages, metadata at the top remains and the page body content would change based on the page.