# Secure APIs: Making API security make sense to the engineers who run it Designer: Phaneendra Sivangula Interactive version: https://hellophaneendra.com/#/work/cyber Role: Interaction Designer Timeline: 2 months (60 days) Team: Co-designers, PMs and the client team Summary: CloudVector's API security platform had the data but not the experience. In 60 days we redesigned the Enterprise and Community Editions around what SecOps engineers and admins actually need to see and do. Problem: A powerful API security product buried its value under raw data, which kept user acquisition and retention low. Approach: Product strategy first (brief, competitors, concept and scenario maps), then workflows, sketches, wireframes and visuals. Outcome: Redesigned Enterprise and Community Editions, a standout at the RSA conference and an award-winning design. --- CYBERSECURITY / CLOUDVECTOR ## Making API security make sense to the engineers who run it CloudVector's API security platform had the data but not the experience. In 60 days we redesigned the Enterprise and Community Editions around what SecOps engineers and admins actually need to see and do. ROLE Interaction Designer TIMELINE 2 months (60 days) TEAM Co-designers, PMs and the client team SCOPE 12 experiences, 50 screens 45% more efficient task accomplishment 12 experiences designed 50 screens in 60 days PROBLEM A powerful API security product buried its value under raw data, which kept user acquisition and retention low. APPROACH Product strategy first (brief, competitors, concept and scenario maps), then workflows, sketches, wireframes and visuals. OUTCOME Redesigned Enterprise and Community Editions, a standout at the RSA conference and an award-winning design. 01 The brief OVERVIEW ### APIs are everywhere, and so are the risks Businesses use APIs to connect services and move data. Broken, exposed or hacked APIs are behind major data breaches, and even practitioners struggle to discover, monitor and secure them. CloudVector built an end-to-end API security system that goes beyond the gateway, giving teams a full picture of their environment. Their core user, the SecOps engineer, needs both the big picture and the detail of a company's network. The hard part wasn't collecting the data. It was understanding raw data and turning it into insight. The challenge: a seamless, robust application that protects information privacy and delivers insight, because the poor experience was driving low acquisition and retention. MY PART ### What did I do? As the Interaction Designer, I worked with a team of co-designers and set up a common design system for all of us. I managed daily client conversations to set expectations on a tight two-month deadline, and flagged inconsistencies across modules to the PMs and design teams. - Design brief and concept map - Experience audit - Interaction design and interaction notes - Visual design and prototyping 1 Product strategy: validate the problem, pick the right problems, define the MVP 2 Design execution: workflows, sketches, wireframes and visuals 02 Research DESIGN BRIEF ### Naming every problem up front The design brief pinned down every user and business problem we were solving. Through several sessions with the client, we agreed where to focus: - The key differentiators of CloudVector weren't visible in the product - Users dug through multiple layers to find safety information - With so much data, it was easy to miss what mattered most - High cognitive load, and no clear next step after reading the data COMPETITIVE ANALYSIS ### Feature-rich, but not seamless Early research turned up 15+ products that could solve parts of the problem. We narrowed them to three: Wallarm, Salt Security and PingIdentity. We compared target users, problems solved, features and value proposition. They were powerful, but none addressed a robust, seamless experience. So we built our own. 03 Strategy CONCEPT MAP ### One web of players, objects and actions To make sure nothing slipped through, I built a concept map: the players, the objects and how they interact, forming the ecosystem the solution lives in. It grouped the product into Security, Discovery and Monitoring, and confirmed the two players we were designing for: the SecOps engineer and the system admin. SCENARIO MAP ### From every scenario to an MVP A scenario map listed every experience relevant to our players, and every scenario inside each one. The SecOps engineer and admin scenarios defined the MVP. We ranked the rest by the priority of the problems they solved, and split the roadmap into phases. #### Core experiences - Setup - Monitoring - Discovery - Configuration #### Responding - Events handling - Incident response - Alert management - Troubleshooting 04 Design WORKFLOWS ### Every scenario, step by step Each scenario needs a set of actions. I assigned those actions to specific screens and ordered them so they made logical, intuitive sense. These workflows set the information architecture for every platform, like the first-run path from the website to the Community Edition dashboard. SKETCHES ### Many ideas, quickly, on paper I sketched every screen from the workflows to explore layouts and patterns fast, each one aimed at a design problem: - How might we help the SecOps engineer proactively prevent risks? - How might we help admins create a monthly report? The sketches led to layout variations, pattern ideas, and even new features. WIREFRAMES & VISUALS ### Pinning down every component Low-fidelity wireframes nailed the exact function of each component, with interaction notes on the logic between elements. A simple-looking monitoring tool hid several hard problems, so I compared variations side by side for each one. Once the functionality was fixed, I created a style guide, and we designed the hi-fi screens for the DevOps engineer and admin platforms. Here is the final flow, from the first look at the dashboard to the audit report. Every view leads with the insight, and the raw data sits one click below. 01See every API at once 02Compare two spec profiles 03Zoom into any hour Brush the timeline and the whole dashboard follows. 04Read similarity at a glance One score and one bar before the detail. 05Track every call Daily API calls, with new APIs called out. 06Flag sensitive calls Sensitive calls get their own line, so spikes stand out. 05 Outcome VALUE DELIVERED ### A streamlined experience unlocked the product 2 editions redesigned: Enterprise and Community RSA a standout at the conference 1 award-winning design - CloudVector stood out at the RSA conference, where 32% of attendees had seen attempts to exploit their APIs in the past year - The Community Edition let teams try before they buy, and raised awareness of CloudVector's value - The client went on to win an award for the design The final designs. Use the arrows or swipe. Click a screen to see it full size. 01 / 03 One dashboard for every API TAKEAWAYS ### What I'd bring to the next one 1 #### Data isn't insight. Security data only helps when it points to what to do next. 2 #### Map the system first. The concept and scenario maps kept 12 experiences consistent in 60 days. 3 #### A free tier is a feature. Designing the Community Edition made the product easy to try, not just to buy.