Designed for security teams.
Developed in React.
The Avalon Marketplace is not just a replacement for a too-hidden licensing section, it offers a completely new paradigm in data licensing and management, and is patent pending.
Marketplace Design Process
This design was a collaboration between myself and my boss Peter. We were the Product Design team at this small startup.
The Initial Problem
The partner experience in the app was lackluster.
King & Union had done a great job of attracting partners and integrating data feeds from amazing brands into Avalon. But on the site and especially in the application, this was not very evident, and while Avalon offers some data out of the box, the power is in the partner feeds. 20-25 partners were buried under that single dropdown that says "Anomali"! From the moment I arrived, I wanted to change this to give partners the prominence they deserve, plus make integrating their licenses feel easy.
Plans for a New Paradigm
Peter did detailed wireframes but I had other design plans in mind.
While I was finishing up the redesign effort with developers, Peter and the bizdev team had been working on a concept that was more than a new feature – it would disrupt the data licensing industry if successful. I had already planned a look for new licensing screen that was similar to the screen I had done for enriching a node, but this was much more.
I didn't know Peter had worked on these wireframes without my input, but he was just capturing all his flow ideas along with requirements I needed to understand while thinking through a lot of technical details. I took his wireframes and simplified the design so it was a little cleaner and felt like the rest of the new design we had just launched. His work gave me some good information and he was happy with the new design I proposed.
Sketching & Zooming
"Teamwork makes the dream work", as CJ in Sales loved to say.
The Marketplace storefront was one thing, but Peter and I had so many Zoom sessions where we sketched out graph ideas, discussed various technical and data-related issues and how we wanted to filter things for a new Account Tracking section, that I can't count them.
These graphs would be a valuable new tool not just in Avalon but in the industry – we didn't know of any other partner providing data usage insights... much less data usage on multiple vendors within each individual investigation. So these were fun discussions to have and I love what we did for users in the Account Tracking section.
Sketch Design: Account Tracking
Designing a game changer that no one else has gives me life!
For technical reasons the dev manager wanted the Account Tracking screens first. This was mostly okay, as the section was not directly related to the Marketplace storefront, however it wound up causing me to make navigation-related changes and some other adjustments again later as you do usually design from the top down and not bottom up, so to speak.
That said, having spent so much time working out details of what we wanted to in pencil, I was so pleased with some of the interaction I came up with to filter data and my goal here was that everything move in a very fluid way. To show/not show certain things or to make the main graph expand and contract, or even to use the timeframe slider to alter the data... it was imperative that in the real design those movements felt fast and smooth and our devs made that happen.
Sketch Design: The Marketplace
At last, my vision of an appealing and usable Licensing area is fulfilled!
While I'd already envisioned the front screen of the Marketplace, the challenges came in the details of what happened when the user wanted to do one of several things they could do to set up an integration: use tokens and buy fractional data, use an existing corporate license or use a personal license that only they could utilize. As you can imagine keeping this very clear for myself was the first problem, but for the devs it was an even bigger problem.
We also had four different types of product cards (the side pane) due to variations in product offerings. So I had to design for many different user scenarios. This is just a subset of my many screen variations in this section.
Flow Diagrams
Communicating all these permission settings and variations was hard.
Multiple permissions for two roles created some coding challenges. I created many of these flows and comparison dock panes side-by-side to try to show devs exactly what should be displayed on the screen – given the user's role and whether or not they had the permissions to set up a license for the company, a license just for themselves, or whether they could only request access. Even with these flows it was still somewhat confusing to code but with constant communication we got there. Ah, the joys of role-based permissions! :-)
inVision Prototypes
My prototypes helped sell the future of Avalon and fractional data.
While my devs needed these prototypes to use while coding per our design process, they were an invaluable selling tool to partners. The Partnerships team used these to generate excitement over becoming a Token Partner and to get into conversations about reselling licenses and other expanded opportunities, plus they gathered some feedback to give us about the proposed design. Melissa Smith, VP of Partnerships said "the design turned out better than I ever could have imagined!" She is one of the originators of the concept of using tokens to buy fractional data.
Analyst Feedback
The road to launching new features goes through our analyst users.
In this case we did not show analysts until the prototypes were done. There is nothing like this to compare to. We wanted to put forth our best effort because in reality the end users were not yet aware of this fractional data concept – it was a secret until launch.
We gathered input from stakeholders, partners and our internal threat analysts, who gave me good feedback about how they thought this would be received, how they would have used it at other jobs and they were excited about what they saw, so we felt confident about releasing and then getting real-world feedback for changes.
Developer Teamwork
Bringing out developers best work takes time and acknowledgment.
I was extremely happy with how the screens came out when coded except for some alignment issues and color issues within the graph library they used for all the charts in the Account Tracking section. But the devs and I worked and worked and they got this design extremely close to my Sketch versions in the end.
I was so proud of my three front-end devs for getting the design done on time and with such great quality and attention to detail that I sent them all a gift of sweet treats. I couldn't ask for a better group of devs to launch software with... Luis, Quang and Lealani know how much I value them and their insights, ideas, attention to details and skills.
Design Results
The Avalon Marketplace launched after I left.
This was my design for a rolling-right web intro that would have used a Revolution Slider and animation to tell the story. Tokens would roll down the hill and "activate" the fractional data partners, and then that screen would switch to a real video to watch about the Marketplace.
I wish I could knew how the Marketplace was received by analysts and partners, but despite it being a number one priority for months, and having been pushed to production in a soft launch, the official announcement kept getting delayed. It was launched a few weeks after I left the company.
Review the initial Avalon Redesign to see more of my work on this application.
