Planetrisk
Risk Assessment Management Application
UX & UI Design - 2018
PlanetRisk is a privately held security risk management firm that had one big problem, they had too many products competing for resources, budget, time, and management. Additionally some of these products could be brought together in a viable way to be able to merge the entire process of development to having a simpler unified product to promote to their customers. The project was about 5 months of intense UX / UI mapping and prototyping until we arrived at the final product for the first iteration. Additionally there was a mobile component to the tablet/desktop version and the idea was to make the entire process responsive.
The Need
PlanetRisk supports a customer base that spans the Military to Fortune 100 companies that deal in the area of risk asset management which can be essentially any physical location (retail store, power plant, bank, convenience store, etc.) and one of their products monitors events that take place like weather, crime, and news feeds to report on events that their algorithms detects could affect an asset and therefore warns the end user of that event. Another product was a user relationship social graph that could take entire data sets and derive relationships between the given objects, while cross referencing them with other data sets to create very intricate social graphs of people and objects.
What was left to be done was the exercise of bringing together these products under one cohesive and unified design style language and roll out the responsive functionality that their customers had requested.
Creating works spaces that can be reviewed as a whole or independently
One of the main challenges was determining how to combine all of these products without making the desktop workspace feel cluttered or difficult to focus on. We had several conversations as to what mattered to the user and why, but also what kind of contextual or supporting information would be adequate to paint a clearer picture of an incident. For example if an event close to a 7-Eleven occurred was it due to being in a location where crime was more rampant, where there was perhaps a lesser concentration of people based on whether the majority of housing around the site of concern was more densely populated all could be information that might be looked in to, in order to enhance or even entertain a hypothesis as to why a particular event occurred, this could then run as a simulation for all 7-Elevens to see how they might score based on specific criteria.
Events are listed out, but a user can also initiate their own search utilizing the same results template
Allowing for long chained facet searching
Part of the solution was in allowing the user to have the ability to select multiple facets that were based on unique data sets. In other words, a data source could have multiple sub-categories types, so based on the initial source would determine what other sub-types would render. This meant that one source could have several types, or that the data source really didn't matter because there was a flexible UI solution to handle any source that could be thrown at it. The colors were use to instantly identify a "Source" from a "Type". Blue was used for the "Source" and is the reason why this color renders first, and sub-types followed in the color green. Often chains could get very long, so we solved for this by exposing the first 2-3 rows, and allowed the user to expand to view more or less, without taking up considerable amounts of real estate on the screen; a reasoning that became particularly useful when translating the design over to mobile.
Center screen illustrates the social graph view, while supporting screens show search, and split screen views
Map view and card view are interchangeable interfaces that can be viewed collectively or independently.
The Kickoff
Transferring the knowledge of 3 projects, seeing where their data is shared, figuring out a design system at a high level and then implementing that into a responsive mobile experience is what PlanetRisk had in mind when we began our talks. They always knew that their 3 flagship products shared similar data, had interchangeable functionality, and was offered to the same types of clients, that there had to be a better way of consolidating efforts. But where to start?
The mobile portion was important because we would have to decide early on what features absolutely needed to be on the mobile version and which ones we could save for later releases after more thought was put in to them. So we started by having a solid conversation on what the main page would look like after bringing in data from 3 apps and what might be important to the end-user to see collectively.
The Need
NCQA had a few rough ideas of what some of their most important core functionality, vital to their business revenue, would look like in a UI; which we used to start the conversation.
How we began combining three products in to one.
What was clear from the beginning was how powerful the mapping feature was, but also the incident threads. The client wanted to add their own search results to an incident, that also included the map so we had these three functions potentially working together that were completely separate at the time, so we had to conceive the manner and user workflow that best encompassed the strengths of each product individually while giving the clear impression that they were working collectively feeding off of each sources data in order to best isolate the information the user was looking for.
My process for working always aims at starting with the smallest view port size in order to ensure that I can account for each function and feature that the client wants to have. But also this allows for the point in the process where specific decisions can be made about how a user is intending to use this application on the go. Meaning not every piece of information can be revealed at once, and also determine the hierarchy of information and what information should be the most relevant, while secondary and tertiary pieces of information can still be easily accessed without feeling intrusive, or hindering to the overall experience.
Map Incidents Feed
Drill down into map incident
The Solution
By creating a multi-panel view that could be expanded to view each pane in isolated mode, allowed the user to have the screen space needed in order to see all or some of the information needed to which the user could continue to add search queries to, pull data from the web in to, and overall have a better overview on any incident of interest they deemed important. Since security analysts can all have differing opinions of what is important this allowed each individual user to build their investigation, and then share their results internally or externally. It gave the user the power to customize their investigation.
Aesthetics were key in making complex information accessible and readable
Often times complex applications lack any cohesive style and aesthetics that make the entire process of investigations seem fragmented and disconnected. But by creating a unified style and user interface the updated product became more universally recognized throughout the organization and the user base could appreciate less cognitive overload, with a user workflow that was more memorable, and familiar. In turn this made accessing new information, and adding that information to a current or new investigation easier and more memorable. Simple changes like making the font sans-serif, larger in size, and darker in color made important content more readable, causing less fatigue and increasing productivity as a result.
Unified color palette
Chat screens for easy communication between internal teams, and for easy management of customer requests.
Map and text view of incidents on the feed.
Seamlessly switch between mobile to desktop, and back.
Additional Screenshots
The Conclusion
The new product that resulted from the merging of three previously independent products, accomplished what we set out to do, and tested well amongst users. The user testing that we had done helped us to determine how a user investigates, compiles research, and used the tools when they were separated now came together nicely under one unifrom look and feel. This ultimately made the application less confusing, allowing for more focus, and versatility when conducting investigations. The mobile app served an intergal part in adding new information to the investigation on the go, and gave a new level of cohesiveness that wasn't previously experienced.
