System Design
Designing Console Interfaces for Database Administrators
At Oracle, designing the Database console for OCI taught me how UX principles apply to highly technical interfaces. Database administrators deal with complex systems, multiple configurations, and critical decision-making. The challenge wasn't just visual design—it was cognitive load management.
Key Design Patterns:
- Progressive Disclosure: Advanced options hidden until needed, preventing overwhelm
- Smart Defaults: Pre-configured values based on common use cases
- Visual Hierarchy: Critical actions prominently displayed, secondary options nested
- Inline Help: Context-sensitive documentation within the UI
Takeaway: Complex systems need clarity more than simplicity. The goal isn't to strip features—it's to organize information hierarchically so users can find what they need without friction.
Frontend Engineering
Building Responsive Experiences with CSS Variables and Media Queries
When refactoring the Emoji Tetris game for different screen sizes, I discovered that responsive design goes beyond breakpoints. Using CSS Variables allows you to build flexible systems that scale elegantly from smartwatches to 4K displays.
Technical Implementation:
- CSS Variables for Theming: Define colors, spacing, and sizing at the root level for easy theme switching
- 8 Strategic Breakpoints: Cover 320px phones to 1920px+ desktops
- Aspect Ratio Preservation: Maintain game playability without distortion
- Touch Optimization: 48px minimum touch targets for mobile devices
Takeaway: Responsive design is a feature, not a constraint. CSS Variables enable dynamic theming (dark mode) without duplicating styles, reducing maintenance burden by ~40%.
Product Design
Creating Frictionless Scheduling Systems with EmailJS Integration
Building the booking system for my portfolio taught me how to design microservice-based user flows. Rather than building a monolithic backend, leveraging third-party services (EmailJS, Google Calendar) keeps the system simple while maintaining reliability.
Design Philosophy:
- Progressive Form Design: Collect information in logical stages, not overwhelming screens
- Clear CTAs: Single primary action with visual feedback (loading states)
- Confirmation & Feedback: Users know their action succeeded immediately
- Mobile-First Approach: Optimize for the smallest screen first, then enhance
Takeaway: Good design anticipates mental models. When users book time, they expect date/time pickers to feel natural—aligning with native OS patterns reduces cognitive load.
Design System
Adopting Design Systems for Consistency and Scale
Implementing Material Design 3 across my portfolio pages showed me how design systems enable consistency without creativity loss. The system defines tokens (colors, typography, elevation) but gives designers freedom within those constraints.
System Benefits:
- Token-Based Architecture: Change one color variable, entire app updates
- Accessibility Built-In: WCAG compliance by default through predefined color contrasts
- Reduced Decision Fatigue: Designers focus on UX problems, not "which shade of blue"
- Scalability: Add new features without redesigning existing ones
Takeaway: Design systems aren't constraints—they're enablers. Teams move faster when everyone speaks the same visual language.
User Preferences
Respecting User Context: Implementing Dark Mode and Theme Preferences
Users experience interfaces in different contexts—bright office, dark bedroom, outdoor sunlight. Implementing dark mode taught me that accessibility isn't just for disabilities; it's for context.
Implementation Strategy:
- localStorage Persistence: Remember user preference across sessions
- System Preference Detection: Default to OS-level dark mode setting
- Smooth Transitions: 0.3s CSS transitions prevent jarring switches
- Sufficient Contrast: Both themes meet WCAG AAA standards
Takeaway: Context matters. Users in dim lighting will abandon sites with only light mode. Respect their environment, and they'll stay engaged longer.