The big problem we’re trying to solve
In his book “Hit Makers” journalist Derek Thompson highlights the work of famed industrial designer Raymond Loewy and the concept of the MAYA (“most advanced yet acceptable”) design. The MAYA design sits in the middle between solutions that are entirely familiar and those that are entirely novel: be too familiar and customers will look right past you, but be too novel and customers will tune you out.
MAYA is the sweet spot. Novel, but familiar. Advanced, yet acceptable.
JupiterOne already had robust functionality when I joined the company. Its struggle was a perception that it wasn’t “easy to use”. JupiterOne excelled at the advanced and failed at the acceptable. The product was very innovative, but too novel.
The core data graph and proprietary query language are powerful but still new for most security customers. JupiterOne’s user interface doubled down on that novelty by diverging from many common UI patterns that might help a new customer orient themselves in this space.
We aimed our design approach at moving JupiterOne toward its MAYA sweet spot; make the platform more familiar via its UI to offset the novelty of its core technology. This means leaning into common, robust UI patterns from other web applications. It means aligning navigation patterns with what customers expect from other tools in our space. It means making color an enhancement rather than a distraction. And so on…
We haven’t stopped innovating, we just now recognize that we must dress our innovation in familiar clothing to make it approachable for the nascent ‘attack surface management’ market.
What JupiterOne does
My CEO might shed a tear at this simplification, but for our purposes, you just need that basics.
First, JupiterOne ingests a lot of data that might be important for your business’s security via our extensive set of integrations. We pull that information into one big ole data graph made up of ‘Entities’ and the relationships that connect them. These could be infrastructure-type entities like AWS resources, identity-type entities like user accounts and much, much more.
Once you’ve integrated some data, we give you the ability to search it deeply via our graph query language (J1QL), letting you save important queries for quick recall into smart query containers we call ‘Questions’. Why ‘Questions’? Because we strive to give you a natural way to ask JupiterOne about your security posture and get a meaningful response. Once you’ve saved a Question finding the data you want, it’s as simple as clicking that Question in your library to get the answer again with current data.
If you’re more comfortable browsing and filtering assets in a familiar tabular format, we also surface every asset of your cyber universe in our ‘Asset Inventory’.
Downstream from that core JupiterOne experience, we let you re-use those saved Questions in a number of powerful ways: as evidence for security compliance standards, as triggers for alerts and automations, and of course as data visualizations on dashboards. All that power from one core set of re-usable, connected data spanning your entire cyber attack surface.
Key product design updates
Let’s hit a few bullet points on how we’re addressing our MAYA problem across the platform.
- Our old navigation hid the top-level sections of JupiterOne in a non-obvious menu. We changed that by making them persistent up front.
- This was important not only for giving new customers more clarity on all that we offer, but also for giving return users more clarity of wayfinding as they move across the platform.
- Our old color palette was inconsistent. It over-emphasized some bits of information and under-emphasized others.
- We refined it to align and reinforce our JupiterOne brand and optimized it to minimize distraction from important data within the platform.
Dashboards and Data Viz
- Unhid navigation by default for more clarity
- Refined visual & interaction design of dashboarding structure and mechanics
- Refreshed each data visualization chart type (data metric, pie/donut, table, graph, bar, line/area, matrix)
- Refreshed data visualization color palette to support categorical, sequential, diverging and alert based color scenarios
Cyber Asset Inventory
- Consolidated filter chain layout and mechanics aligning to common inventory filter mental models.
- Set the foundation for basic, advanced and saved filter sets
- Aligned structure with the asset inventory for better consistency of experience across browsing and searching.
- Unhid key functionality by default (Question library etc…) for more upfront clarity and a focus on recognition rather than recall.
- Refined the visual design to use color more intentionally and highlight important information about graph entities and their relationships.
- Updated navigation for more clarity and scalability
- Added new functionality (like Control inheritance) that I don’t have space for in this post 🙃
Policy Reader & Editor
- Updated visual design to improve navigation clarity, contrast accessibility, brand and design system alignment.
Alerts & Automation Rules
- This feature set has more underlying tech debt, so for now our updates have focused on design system adoption and improving the foundational experience by aligning to common UI patterns.
Systems for designers and devs
We didn’t even have a team Figma account when I joined, so we were starting from scratch as far as design team resources were concerned.
On the dev side the team had built much of the UI using the Material UI React framework. We chose to lean into adopting elements from that library, curating and refining our own specific subset to serve as the core of our system. We stood up a separate repo for this J1 specific Material subset (which we call Juno), and maintain it across a Figma library and Storybook instance, ensuring the two are closely in sync.
Note: We haven’t achieved this ability within JupiterOne yet.
While dark mode is a crowd pleaser, I think it’s somewhat overblown as a feature within the design community. In my opinion, the most important reason to work toward releasing a dark mode is simply the fact that striving to support multiple color themes requires a lot of diligence to incorporate UI best practices on both the design and dev sides of the house.
So basically I’ve been designing with color themes in mind and dangling the carrot of dark mode out there to keep the team motivated 😇.
I designed the brand’s hero gradient that you see across our marketing site and also reworked the JupiterOne logo into the stoke version you see today.
The color system I established for the product influenced the refinement of our public brand palette.
I also chip in to provide product graphics for the website from time to time and have done some other random things like create Mac app icons.
Design ops, management and strategy
To align the team on what successful product design looks like at JupiterOne I led the effort to establish our team design principles. This resulted in a current set of six principles: four focused more on the product (in dark blue), two focused more on our craft as designers. (in green).
Like I mentioned above, I started our Figma team from scratch. Everything is custom based on best practices I’ve found within the field over the last few years and my own experience installing Figma systems at Signal Sciences, Fastly and JupiterOne.
I write consistently about what I’m up to in this area on my Substack. Of particular note:
How I facilitate workflow within Figma
Figma Helpers: the custom library I use to kickstart my designs
The single most important thing 💡 Design systems aren't just for the product. You can (and should!) design systems for yourself to facilitate your own unique design workflow. Resource: Grab a copy of this library from my Gumroad shop to support your own work!
How I think about file types
1 Figma file type, 7 types of work
Welcome back! If you're new here my name is Pat. I'm a principal product designer in tech and in this newsletter I explore tactics and strategies from my decade in the business to help you elevate your craft and make what you're making better... by design.
Design Ops and Workflow
I’m a big time workflow nerd, so I think about designing systems for team workflow just like I do for the products I create.
At JupiterOne I established the design management systems we use within the Atlassian Suite. I manage the product design backlog in Jira and partner with my counterparts in product and engineering to plan the roadmap to ensure all our application dev teams are working together to deliver a cohesive end-to-end experience. I also continuously improve our team Wiki on Confluence to facilitate better knowledge sharing in a fully remote work environment.
My background as a UI developer puts me in a unique position to be able to break down design work into meaningfully scoped chunks that facilitate better iterative development.
Design Keynotes and Vision Setting
On the flip side of my workflow tactics, my background as a brand strategist puts me in good position to help set the vision for both the product and brand. This could be storyboards to help communicate the vision of our ideal customer journey, slide decks to communicate product design strategy, detailed Figma prototypes to communicate new product opportunities or even just word docs to clearly capture problem statements and design opportunities.
If you’ve made it this far, thanks for sticking around 🙏🏻.
I know this isn’t exactly a standard case study format, but I’ve just done too much at this point to have that format make sense as an intro.
I hope this can serve as a jumping off point to talk in depth about any of the areas mentioned. I’ll happily go deep with you on anything that piqued your interest.
Live long and design better 🖖🏻,