Designed for threat analysts.
Developed using React & Keylines.
As Lead UX Designer at King & Union for 18 months, my role was to transform the legacy app into one that would onboard analysts more quickly and make Avalon more competitive. Both goals were achieved.
Design Thinking
Some of my thinking behind this redesign.
Avalon Before Kristi
A decent framework to start from
When users created a workspace the screen was just blank - they had to know to use the toolbar to add the first node to the graph or a little strangely, they could open the chat dialog and type an ip address in and then add it that way - something a new user would never know to do. There were many navigation issues I also wanted to make better, but I kept the same essential framework as you can see in the After version.
Avalon After Kristi
A new graph builder, less screen clutter & easier navigation
One of the biggest issues the original product had was the lack of any clue about how to get started. Keylines, which is the graphing software, had a drag and drop feature, so I wanted this to be the first thing users experience. I also moved some old and new features into an easy to show or hide dock pane. This pane is used in a flexible way to reveal attributes as users hop from node-to-node, or for working on a case, chatting or writing a report..
The Arc
Options for a single node, multiple nodes or cluster of nodes
One of the goals we had for the product redesign was to make Avalon accessible to less experienced analysts, while retaining advanced functionality for experienced threat analysts. We wanted the app to feel a little like a game and mobile app, and were pleased when people saw it at the RSA conference and commented that it looked like a game and they were curious. Our partners also seemed to admire the new design.
Arc Dialogs
Keeping users focused on a single quick task
Click a node on the graph and you get the arc. The arc breaks down tasks and displays mini dialogs (several shown here) so users can do things quickly. This helps people as a guide to add/view data that exists about an indicator. They can also perform bulk actions on a group of indicators by selecting multiple nodes and then launching the arc. The node changes in real-time to show a highlight color or score (things that change visually.)
Elevating Data Partners in the App
Highlighting one of the primary reasons to use Avalon
Partners used to be found in a single dropdown in the license area, or in a dialog for enriching a node, just in plain text, no logos or anything to give visual cues about the data you want to see. I wanted to change that and we began adding partner logos to make them more visible in redesigned areas. I designed the enrichment carousel for selecting specific enrichments, and designed an activity pane inspired by Facebook's as a solution to a problem.
Attribute Comparison
Helping users find and filter data to take action or export it
Graphs can get out of control - what you see here are my very basic design mockups but a graph can have thousands of nodes and users need to cluster them, research them (enrich them even more which may add more nodes), export them, add tags or attributes. They also need to compare attributes and all of the above is what this table design offered. You only see this table if you have multiple nodes or a cluster of nodes selected.
Redesign Results
Compliments from partners and prospects, new users gained, and former users came back.
I did some of my best work with this incredible team – these are a few of my friends.
I had some goals, aside from just increasing the usability of the app, when I was hired to work on Avalon the first was to get users on the platform – they had been struggling with that despite having a phenomenal, sharp sales team. Avalon needed some technical changes made and it was not as appealing at a a glance as it could have been. Post-launch at RSAC with this new design we began to see results when multiple intelligence teams from major Fortune 1000 companies wanted to see if they could replace our competitor, an industry standard, with Avalon. We closed multiple POC deals.
Unseating that key competitor was also my personal goal. That application has some graphing advantages but does not offer the same ability to collaborate with others that we did, but they are older and entrenched in the space. So to hear over and over that a brand wanted to see if they could make the switch to Avalon was personally satisfying – if you can't unseat another app so widely used it is hard to gain traction.
Partners really liked the new design and we had elevated them on our website with new product integration pages, in campaigns and also in the app so the difference was tangible. This was important for new partnership deals as well as crafting co-branded opportunities with our biggest partners.
Review the Avalon Marketplace to see how we turned traditional partnerships into an industry disruptor.
