CASE 03 / VISION PORTAL / DESIGN SYSTEM
Building a shared design foundation for a growing cybersecurity platform.
Vision was expanding across modules, workflows and teams, but its interface still depended on one-off visual and interaction decisions.
I created a design system from the ground up to give the product a consistent identity, make complex interfaces easier to navigate and help design and engineering scale without reinventing the UI for every release.
Reusable library
Production-ready components
Reusable patterns for Vision’s core interfaces
Shared foundations
Color, type, spacing and states
One visual language across product modules
Source of truth
Documented usage and rationale
Shared decisions for design and engineering
COMPANY / ISH TECH
PRODUCT / VISION PORTAL
ROLE / UX/UI DESIGNER
PRODUCT FOUNDATION / VISION DESIGN SYSTEM
FROM ISOLATED INTERFACES TO A SHARED PRODUCT LANGUAGE
GROWING PLATFORM
New modules, dense workflows and an active product roadmap
SYSTEM GAP
No shared rules for visual hierarchy, interaction or component behavior
ONE-OFF DECISIONS
The same interface problems were solved differently across screens
DELIVERY FRICTION
More rework, ambiguous handoff and inconsistent implementation
SCALABLE FOUNDATION
A shared system that could evolve without interrupting product delivery
FROM AD-HOC UI TO A SCALABLE SYSTEM
STRATEGIC DECISION / FOUNDATION BEFORE EXPANSION
Build the rules before multiplying the screens.
TRADE-OFF / A focused visual concept replaced a longer branding exploration. Consistency, legibility and scale took priority over decorative variation.
An audit of the existing interfaces revealed inconsistencies in color, typography, spacing, components and interaction patterns.
Vision’s users were technical professionals working with dense security information, so the system had to reduce cognitive load and make status, severity and priority immediately recognizable.
With no room for a visual reset or a long branding study, I grounded the system in functional retrofuturism: a restrained visual direction combining familiar technical references with strong hierarchy, contrast and semantic color.
I prioritized durable foundations and reusable behaviors first, allowing the product to gain a clearer identity while the roadmap continued.
CURRENT UI AUDIT → TECHNICAL USERS → SEMANTIC CLARITY → REUSE BEFORE VARIATION
SOLUTION / FOUR SYSTEM LAYERS
One system connecting visual foundations, product behavior and delivery.
I created Vision’s design system from scratch, connecting principles, tokens, components, data visualization and documentation in a single product language. Each layer was designed to support new modules without forcing design and engineering to reinterpret the rules for every release.
The visuals below are representative portfolio samples. Proprietary specifications, product data and internal documentation have been omitted.
01
Visual Foundations
A representative sample of the color, typography and spacing principles used to create consistent hierarchy across dense product interfaces.
DESIGN DECISION / Establish shared rules before expanding the component library.
02
Semantic Color & Data Visualization
Shows how severity, status and feedback were made predictable across representative security contexts.
DESIGN DECISION / Use color to communicate meaning consistently.
03
Components & Interaction States
Demonstrates how a representative set of reusable components handles hierarchy, interaction and feedback across key states.
DESIGN DECISION / Standardize behavior as carefully as appearance.
04
System in Context
Applies the same foundations and components to a representative cybersecurity workflow, showing how the system creates coherence at product level.
DESIGN DECISION / Validate the system through complete product compositions.
IMPACT / FOUR PRODUCT SHIFTS
The product could grow without reinventing its interface.
DESIGN PRINCIPLE
DESIGN THE RULE, NOT JUST THE SCREEN.
A design system becomes valuable when teams understand why a pattern exists, reuse it confidently and extend it without breaking the product’s logic.
01
ISOLATED VISUAL DECISIONS
→ A SHARED PRODUCT LANGUAGE
New modules could follow the same hierarchy, semantic logic and interaction principles.
02
REPEATED DESIGN WORK
→ REUSABLE FOUNDATIONS AND COMPONENTS
New screens and flows could start from existing patterns instead of being designed from scratch.
03
AMBIGUOUS HANDOFF
→ CLEARER IMPLEMENTATION RULES
Documented states, variants and rationale reduced interpretation and discrepancies between design and development.
04
GROWTH AT THE COST OF CONSISTENCY
→ A FOUNDATION BUILT TO SCALE
Vision could add features, modules and interface complexity without losing product coherence.
50+ PRODUCTION-READY COMPONENTS
Reusable interface patterns and states created for Vision’s core product experience.
ONE SHARED SOURCE OF TRUTH
Foundations, interactions and design rationale documented for design and engineering.