Asset Dashboard

Product UX/UI Design Lead

Company: Seerist
In Collaboration with: Product Manager, Head of User Experience, Data Science Team, Dev Team

Challenges

Managing Product Input on Design Decisions

Challenge: The product team frequently presented design requirements that conflicted with established UX heuristics and user experience best practices.

Solution: I developed design solutions that balanced the product team’s requirements with a user-centered approach. I facilitated open communication and provided guidance on UX principles and heuristics to inform design decisions, ensuring alignment.

Adapting to Leadership and Process Changes

Challenge: The introduction of new leadership, including a Product Manager and Head of User Experience, brought about numerous changes, some of which were conflicting, impacting ongoing design projects. This created challenges in coordinating with the development team, as these changes had to be implemented in phases.

Solution: I facilitated clear communication with both the Product Manager and Head of User Experience to identify and align on key decisions, ensuring accurate designs within tight deadlines for the Minimum Viable Product (MVP). Additionally, I organized transition meetings to synchronize new processes and expectations, promoting alignment and smooth collaboration across teams.

Balancing Stakeholder Priorities with User Experience Needs

Challenge: Stakeholders often prioritized their requirements over user experience considerations, leading to design decisions that compromised overall product usability. Additionally, due to time constraints, stakeholder restrictions limited opportunities for user testing and research.

Solution: I leveraged industry best practices and heuristic evaluations to advocate for user-centered design decisions, drawing on existing user feedback to address key usability issues. I presented design solutions that balanced stakeholder needs with adherence to UX principles.

Initial Project Requirements from Project Manager

Provide wireframes based on the following requirements and on Miro sketches.

• Remove Custom Field columns to remove horizontal scroll. Custom fields on horizontal scroll was originally a feature for the Beta version that the Head of Product required. The Product Manager wanted to move this feature to an Asset Profile pop up.

• Provide filters within table column headers.

• Provide function that allows user to view a specific Asset on a Map with nearby Hotspots and Verified Events.

• Provide a Back button from Asset on Map back to Asset Dashboard.

Iteration One: Initial Sketch

Desktop

Feedback from Product Manager:

This is looking SO good!

• I like the showing of 'priority' actions outside of the action sub menu. However I think that these can all sit together on the right end of the table, so propose you move these icons next to the three dots.

• Do we need to indicate to user that default category is 'Security'?

• Could you do a few ones here that are 'Within Average' so they have NO shading, as well as some that are 'Above Average' and have a different colour shading to indicate the country/region is more stable than average.

• Red = More unstable than average

• Green = More stable than average

• No shade = within average

Thought Process

I analyzed the feedback and considered that adding shading to the Pulse column would be confusing for the users to know what the colors indicate (the legend provided above by the Product Manager). I suggested a hover as an initial solution, which the Product Manager agreed on.

• Need to consider what clicking on the different content sections would do - where do we take the user to view more about Pulse?

• Please may you add icons for Hotspots, Events and Pulse? Even placeholders for now is fine, I just wanna see how the table looks with these icons?

Implementation

I analyzed the feedback and considered the existing user overwhelm issues. I was concerned with adding icons, especially since their associated icons only had user value on the Map. I communicated that since Hotspot icons are designated as the "warning red" it would cause distraction to users as all Hotspot content is showing red. I provided a wireframe with the icons to visually show the Product Manager what I meant. I also provided an option to utilize the icons by variating the shades of “warning red” to signify the amount of Hotspots.

Response from Product Manager

I think it's looking great with the shading.

• Can we try placing Country first in the table?

• Can we link the content in this panel to the map, for example the item in the panel could have a line drawn to the corresponding pin on the map.

• How about 'Asset Proximity Report' for the title of this box?

Implementation

In response to the feedback, I developed a solution for usability and consistency on the term "Report" for the user by adding the Asset Dashboard Report option/icon here also, so the user can select to Report from either the Dashboard or the Map.

Response from Product Manager

Yes, brilliant idea RE Report button integration! This is really cool. In future we can expand this to allow users to pull items directly off the map to add to their report.

• We need to think of how we can configure:

• Proximity

• Time

in relation to what content is displayed for each asset. Important concepts to consider are:

• What content types does this affect?

• What level is this set at (All Asset, Individual Asset, Content type etc)?

• How do we align this with alerting, so that user can match the Assets page with how their alerts are set up for each asset? IMO the Assets page should be an extension of the alerts that have been created for those assets, and it should be possible to customize alerts for each asset from the Assets page.

Implementation

I analyzed the feedback that syncing to Alerts made sense, but considered how complicated a solution could be. I proposed a solution to the Product Manager that Alerting can be changed within the far right three dot menu. This would not only be design consistency with the Alert dashboard, but also be the exact function of the three dots in Alert dashboard.

Response from Product Manager

Brilliant :D would this then link into the existing alert configs screens/process or would we need to work on this too?

Thought Process

I collaborated with the Product Manager on a solution. While my thought process was that the solution would not link the user to the Alert Dashboard, I communicated my thought process with him. In thinking of the use case of why a user is in Asset Dashboard, would the user want to update one or two Alerts without leaving their current work flow, while if the user wanted to work on their Alerts, they'd go to Alerts in navigation. Do you have a different thought on this?

Response from Product Manager

I'll put a talking point in our meeting on Thursday for this. If we link into the existing Alerts set up, then we don't need to start scoping out a new Alerts flow in this body of work.

Solution

In response to the feedback, I proposed a solution that instead of recreating the Notifications screen here, which could possibly contribute to user overwhelm, but instead we could offer from any workflow that a user could open a pop up to fix Alert settings, without being taken away from their current workflow.

• Can we also add Pulse and RR to the top of this panel? Just summaries - basically same info as was in the Asset table. This would give a holistic view of the asset in this panel. They could be smaller elements towards the top of the panel, less important than Hotspots and Events. Could also link to RR page from here for user to follow that content journey more. Lmk what you think!

• Last question on this: not sure if this information is available or helpful for user, but instead of just RR from Asset table, we could show all Risk Ratings for Country (Nigeria): Political, Economic, etc? I think I'm confused on that I thought there was no such thing as an Overall Risk Rating (only Political, Eco, etc).

Feedback from Chief Technology Officer

• Add rollover state for icon type and the drop down for icon type to show how the user can view the icon type title if they need to.

Feedback from Chief Product Officer and Head of Product

• We need to represent both time and distance on the dashboard. It is unclear as to which time period we're representing e.g. is this the past 7 days, last 30, last 30 vs prior 30 etc. I think we need to have a linear time parameter here e.g. select the timerange for the table to adjust to. A future iteration could then enable comparability e.g, last 30 days vs prior period." "On distance, the same concept as above - distance changes to the circumference.

• What time range is user looking at for VE.

• Default Verified Events to only show 'Security VE' but for this to be configurable from the drop down. This would be similar to the RR, which default to 'Security' but can be changed.

• How the user sets the geofence radius for each/in bulk?

Response from Product Manager

How about a preset which defaults to 5 miles, but is customizable? In my opinion, this should be the configured monitoring proximity set for that particular asset.

Thought Process

To address the issues raised, I first reflected on the implications. I communicated to the Product Manager that this would not solve for Monitoring Proximity for a specific Asset, which the Product Manager had previously provided feedback as a possible solution. I communicated the following questions to help us find a solution:

• Could the Monitoring Proximity be set in the three dot expansion (user can set Alert frequency and delivery options, as well as monitoring proximity without being taken away from their current workflow)? This would cause an issue:

• How would that overwrite the Distance filter used as default above for the table? We would have to add a Header for Distance to convey if it is using the Default Distance or user-specified Monitoring Proximity Distance.

I communicated that I would implement filters above the table for Time and Distance that applies to all Headers and fields for the Product Manager to provide further feedback. This feature would show the use case of a user landing on the Asset Dashboard with 7 Days and 3 Miles defaulted on.

Response from Product Manager

Perhaps we can show it within the table - it is either 'Default' or 'Custom', with the value also shown. Let's explore that in future. I will note down a talking point for our meeting on Thursday with stakeholders to discuss monitoring proximity from time and location perspective. Verified Events would show 3 days of data as default. In further iterations, we can then make time and location proximity customizable.

Native Mobile: iOS

I was responsible for putting together wireframes for conveying how Assets could be implemented into the native mobile app. For MVP, I needed to provide a simple solution for the user’s key workflow in being able to not only locate what Hotspots and Events are near their Assets (both in a List View and Map View), but also read further on the threat they pose to the user’s asset. Future versions would include features from the desktop, such as a distance filter. The main pattern requirement from product was to use a swipe up modal on map.

One difference between the desktop and mobile design is a condensed Asset Dashboard. In mobile, I narrowed down the dashboard to the user’s key workflow on the go: “What nearby events are affecting my Assets?” I moved the Countries out from being a column within the Asset Dashboard table, and instead organized the user’s Assets by Country, which is automatically sorted in alphabetical order. The custom fields is removed from the mobile app, reserving this feature for in depth workflows best suited to desktop. Now, the user can quickly access each Asset’s Events nearby, Pulse, and Risk Rating.

For consistency and highest usability, where possible, all interactions remain the same on mobile as desktop to provide the user with a seamless and intuitive experience between the two.

Iteration Two

Feedback from Stakeholders in Meeting Presentation

Feedback from Head of Product

• Filters for Time and Distance: VE and Hotspots (not Pulse or RR) shouldn’t be above table if not applied to all header content types. 

• Hotspots only live for 24 hours. Only need within VE. Pulse time filter. 

• Pulse increase: take to Pulse page (on table, not just from Asset Map). It is on Latest, so not big lift. 

• If there is a narrow distance, there might not be Hotspot or Event results.

Response from Product Manager

Is there a way we can link Hotspots to Assets aside from Distance? Location isn’t only factor that conveys relevance. 

• Hover label on icons.

• Users forget Asset Types, so take away Asset Type.

Feedback from Head of User Experience 

• Info hierarchy: mirror.

• Keep Asset widget to right consistently.

• Build new pattern while using same components that applies across product. Build UI systems to use/reuse to reinforce consistency. 

Feedback from Second Product Manager

• Since 90% of Assets don’t have Hotspots, provide a design solution for this use case, in a way that doesn’t look like there is a problem with product not loading information.

Feedback from Chief Product Officer

• Need feature on Asset Dashboard to sort by Risk Rating level because Risk Rating Dashboard won’t have this feature. 

• If Nigeria’s Risk Rating changes from High to Extreme, we need to show when this change happened (date of change or high for 6 years).

• Nature of Hotspot (bomb important more than amount): gradient by volume is not right way of doing it (maybe add small dot icon if urgent Hotspot appears). Human from Analyst team would need to designate significance. What is at the top of the list of Assets: which Asset has the most Hotspot or Event severity?

Response from Head of Analyst Team

Too much gradient on Asset Dash. High Severity Hotspot/Events should be colored differently to convey severity: White (nothing), yellow (close), red (massive). Simplify for users on what Assets to start with. Don’t need before and after rating because these change quickly.

Use case for Asset Manager: When do I need to care? Where does the user need to draw attention day to day. Consult Data Science on what models can be used.

• Priority is that we do not design by engineers, and we do not design by committee. 

• Too much variety in the table header actions. If we have a huge amount of space wasted at the top of the page, why are we trying to cram filters into the same place as sorting and time/date controls.

Feedback from Product Manager on Implementation

In terms of what needs achieving from the tasks above, for speed (since this is going into Sprint Planning now), I believe for the moment we can take this approach:

• Where there are no reported Verified Events Events AI or Hotspots for an Asset, show 'No Content' in the relevant space.

• Where the user is a Seerist Essentials User, show 'Content Not Available' and perhaps shade the column out.

• Where an Asset falls outside of a country and does not have a Risk Rating available, show 'No Content'.

• Where an Asset falls outside of a country, show 'No Country Identified' Remove Time Filter from Updated Filter Bar.

If you have any better solutions for these states please feel free to implement, but keen to solve for these quickly. Then in future we can improve how we handle these empty states.

Iteration Three

Feedback from Product Manager:

This is brilliant. Cheyanne has done incredible work bringing our ideation to life and I am excited to move this to the next step.

Feedback from Chief Technology Officer

• Clicking on Pulse takes user to Watch Page

• Custom fields in table is imperative.

Response from Product Manager:

Please can you make the Asset Actions column fixed and stick to the right hand side of the table so that regardless of whether user is has to horizontal scroll across page they can always access Asset Actions. It's a good compromise if we are going to allow user to have Custom Fields.

Response from Head of User Experience

Lock these Asset Actions to the left of the row for users to access quickly and easily.

• What does 3 miles mean? Is this the radius? I think this makes sense if it is the radius for now, but if we add capability to have multiple Monitoring Proximities per Asset OR to have custom shape Monitoring Proximities, then we will need to think how we express the Monitoring Proximity as a number.

Implementation

In response to the feedback, I suggested the solution to name the header "Monitor Radius” to reduce user confusion.

Response from Product Manager

Yes "Monitoring Radius" is good I think. For now this is fine, may need to change in future.

• Need indicator for if Pulse shown is City level or Country level.

Response from Product Manager

So depending on location of Asset, it will be either one of these. Use an icon to give a visual indication if the Pulse is derived from City Level or Country Level. I am assuming that the colored icon within Pulse score column in the table is displaying the current Pulse score color from the Pulse bar. A key variable is whether the Pulse is within, above or below average. I believe we are not displaying this variable in this first iteration, which is fine but we'll need to solve for this quickly in next iterations.

Response from Chief Technology Officer

Unclear what the new icons do/mean. Do we have an indicator of which city this is? Would seem to be an important attribute.

Response from Head of User Experience

Provide information within a hover component to user on whether the Pulse if from City level or Country level, and if City level, which City. Within this hover, also provide Pulse score information on whether this score is within, above or below average.

• RR can be determined from a Risk Rating Zone OR Country Level. If the Asset is within a Risk Rating Zone then we can use the more localized rating of the Risk Rating Zone. If the Asset is not within a Risk Rating Zone, but only within a Country - then we will use the Country Risk Rating. We need a way to visually indicate which level we are taking the Risk Rating from for each Asset.

Response from Product Manager

Use an icon to give a visual indication if the Risk Rating is derived from Zone Level or Country Level.

Response from Chief Technology Officer

Risk Rating column probably won’t have an up/down as many haven’t changed for 10 years. Unclear what the new icons indicate here.

Response from Head of User Experience

Provide this information within a hover component.

• Seeing the type name instead of the icon should make searching a bit easier. The icon will likely be changeable through map legend controls, so should not be directly associated with the asset for all users - except perhaps as a default.

• What happens when I just click on the row itself or the asset name?

Thought Process and Proposed Solution

User Feedback or User Testing would be ideal here, but since this isn’t an option with stakeholders, and since we provide all user interactions clearly within the row, I considered what would be most beneficial here. I communicated that a row highlight could be helpful, so they can track across to the end of row, especially with adding Custom Fields back in with horizontal scroll. This would ensure the user to select the correct Asset’s Map icon, reducing user frustration.

Response from Product Manager

Let's place the 'Full Asset View' behind the general row click. Also means we don't have to put it in Asset Actions. What do you think?

Response from Head of User Experience

The Head of User Experience agreed to put all clickable items into an Asset Full Profile View, which would replace a right side reading widget for Hotspots, Verified Events, and Events AI.

• Does filtering table filter map display of icons?

Thought Process and Proposed Solution

I analyzed the feedback and considered an initial solution based on user work flow. When the user selects the Map icon of an Asset, and they are redirected to the Asset on Map, the filters that the user applied in table should be the default in order to allow the user to continue their workflow. If this is the case, then I would implement feedback to user within the design on filters being applied (ie, the Map Controls widget could default to open, etc). I communicated that I would like to understand their feedback on a differing use case.

Response from Product Manager

My input on this is: In our model, the map does not load ALL Assets on to map at once, so actions that affect Table Filters do not affect map. The map interaction is currently that user can place an individual Asset onto the map from the Asset Table. User can add multiple [Assets onto the Map] from Map Controls tool, but not in Asset Dash. Therefore Table actions don’t affect Map display. In the future, we can add this capability so that there can be some alignment between table and what is shown on map, but we feel the map is a deliberate tool to tell the story of an asset, not just a map based mirror of the table. We can progress this iteratively.

• Pulse delta should be based on the average, over the listed period, not the delta from a particular number of days ago. Not really clear how to set the date range for the counts and the pulse delta source point- once it is set, where do I see it?

Feedback from Head of Development

I'd like to see how a user filters the table by city, state.

Feedback from Head of User Experience

There are also a lot of random icons that don't have a clear meaning.

Solution

I had communicated to the new Head of User Experience that the platform has a problem with random icons (meaningless for user) and icon inconsistency. Since the Head of User Experience was in the middle of auditing and reducing icons to a specific icon library, I suggested that the Head of User Experience be brought into my collaboration meetings with the Product Manager, so my designs could align with a mutual decision from both the Product Manager and Head of User Experience.

Response from Product Manager

Agreed. We can exclude icons for now and add these in later once an icon set has been agreed? I'm not super happy to do this since I think that without these icons anchoring data types within the table, they get lost, but if the plan is to reinstate these in future then that's fine.

Feedback from Head of Development:

• Since Seerist currently does not offer a card component view in Maps, and this was conceptual, he wanted to remove this feature for MVP.

• Since Seerist doesn’t offer a top navigation bar on how to view Data, either by Table, Map, Graph or Config, do stakeholders want to implement this design for MVP, which means a heavy cross-platform development lift, or will we use the navigation bar in Beta that development has already implemented?

Response from Stakeholders

In order to quickly provide an Asset Dashboard to users, stakeholders decided to hold off on a large cross-platform solution, and to keep the Asset navigation that development had already implemented into Beta.

Final Iteration for MVP

Desktop

Native Mobile: iOS

Click Here for Figma High Fidelity Mobile Prototype

I was able to solve for navigation confusion by adding a breadcrumb bar to the top. This would allow users to understand where they were in the app, and return to any part of their workflow. This breadcrumb bar is interactive, allowing the user to return to any previous part of their workflow at any time. I also removed all close or collapse modal icons, and replaced with a “Back to Event List” button in the top left of modal. These two changes solved for the issue of user confusion with having a back button at the top to return to Assets and another within the modal. By adding text to both these back button options, further clarity is given to the user. I removed the collapse button in the Event Reading Modal wireframe to allow the user to return directly by adding the “Back to Event List” button, which not only provides consistency for usability, but also allows the user to return to their key workflow without confusion. An Asset selector dropdown was added to the top to allow users to stay within a view, but switch what Asset they’d like to view.