Project Showcase
A comprehensive list of interactive products, mobile applications, and custom design systems. Click on any links to view live files or community assets.
Apex Design System
A comprehensive design system for web and mobile interfaces built in Figma. Crafted for modularity, accessibility, and fast developer handoff.
The Challenge
As our product team grew, we faced severe consistency issues across our iOS, Android, and web products. Spacing, typography, and button behaviors were being reinvented in silos, leading to slower design iterations, redundant code, and a fragmented user experience.
The Solution
I architected Apex, a unified, multi-platform design system. I established a systematic taxonomy for tokens (spacing, typography, color semantics, shadows) and built a production-ready component library in Figma.
Key Highlights
- Semantic Color Tokens: Built standard, accessible color tokens with perfect dark-mode counterparts (Web Content Accessibility Guidelines AAA compliant).
- Responsive Layout Grids: Designed modular grid templates for 12-column web layouts and 4-column mobile views, enforcing visual consistency.
- Figma Best Practices: Utilized Figma’s latest features (auto-layout v5, component properties, nested variants, slot components) for maximum adaptability.
- Interactive Prototyping: Included fully interactive state variants (Default, Hover, Focus, Active, Disabled) for form fields, buttons, and menus to ensure precise design specifications.
- Developer Handoff: Provided an exported JSON schema of design tokens directly compatible with Tailwind CSS theme configuration, reducing developer implementation friction by 40%.
FinTrack Dashboard
A comprehensive SaaS dashboard that simplifies complex financial analytics, personal budgets, and cash flow tracking into easily consumable interactive widgets.
The Challenge
Most small business owners get overwhelmed when looking at spreadsheets, balance sheets, and numbers. The goal was to build a clean web application dashboard that summarizes business health instantly, with intuitive analytics that let users dive deeper with a single click.
The Solution
I designed FinTrack Dashboard, employing a strong grid layout (modular architecture) to group related financial metrics, combined with vibrant color highlights to direct the user's attention to critical changes.
Key Highlights
- Widget-Based Dashboard: Created a flexible drag-and-drop dashboard design with customized card components for cash flow, expense categories, and monthly targets.
- Custom Data Visualization: Designed custom bar charts, line graphs, and donut charts that utilize distinct, accessible color-coding and highly readable typography for high-density information.
- Advanced Filtering Interface: Streamlined the complex date and tag filtering interface into a single, intuitive control panel, allowing rapid querying.
- Accessibility & Contrast: Addressed accessibility by validating all chart color variations against WCAG AA standards, ensuring clarity for colorblind users.
- Responsive Layout: Engineered visual breakpoints so the dashboard resizes seamlessly from ultrawide desktop monitors to standard iPads.
Nova E-Commerce
A premium mobile-first e-commerce experience designed for modern apparel brands, featuring minimalist interfaces and a frictionless 3-step checkout process.
The Challenge
Most retail websites suffer from heavy drop-off rates on mobile platforms due to bulky menus, slow-loading images, and lengthy checkouts. Our objective was to create a modern, high-converting checkout and browsing flow that feels as fluid as a native mobile app.
The Solution
I designed Nova E-Commerce, taking a clean, content-first visual approach. I replaced heavy borders and busy headers with whitespace and structural grids. The products are showcased with large, high-fidelity photos optimized for fast mobile rendering.
Key Highlights
- Frictionless Checkout Flow: Simplified checkout from 7 form steps down to a single-screen, 3-step accordion (Shipping, Payment, Confirm), increasing completed purchases by 18%.
- Elegant Product Detail Page: Designed a card-based swipeable carousel for product media and a sticky CTA drawer that keeps the purchase button accessible on long scroll.
- Smart Filters: Created a bottom-drawer filter overlay for mobile screens, giving users quick sliders for size, price, and color tags.
- Micro-interactions: Added a subtle card-adding animation that provides visual momentum, drawing the buyer's attention smoothly to the cart badge.
- Image-Centric Design: Leveraged large product grids that let high-quality brand imagery sell the product, emphasizing crisp typography (Instrument Serif and Inter).
ZenSpace Meditation
A calming mobile application designed to assist users with daily mindfulness, meditation, and habit tracking. Built with beautiful micro-interactions and dark-mode optimization.
The Challenge
Most mindfulness apps are cluttered, distracting, or visually overwhelming. Our research showed that users wanted a serene, intuitive mobile application that would help them settle into a calm headspace, rather than feel like another task on their to-do list.
The Solution
I designed ZenSpace, focusing on soft gradients, low-contrast UI elements, and highly engaging micro-interactions. The interface adapts to the user's local time, offering warm, sunny morning gradients and deep, starry midnight dark modes.
Key Highlights
- Stunning Aesthetics: Utilized a soft, organic color palette combined with clean, modern sans-serif typography (Plus Jakarta Sans) to establish a premium and relaxing tone.
- Dynamic Breathing Guide: Designed a custom, interactive breathing bubble visualizer with soft CSS animations that help users sync their breath to the screen.
- Dark Mode Perfected: Carefully tested color contrast on OLED mobile screens to ensure deep midnight modes are highly legible and soothe eye strain during nighttime meditation.
- Micro-interactions: Added satisfying sensory feedback (haptic-inspired transitions, soft sound waves) to encourage positive reinforcement as users hit daily targets.
- Usability-First Navigation: Positioned all critical buttons within thumb's reach for single-handed use while walking or lying down.