Design Case Study
RipeMetrics — Design Portfolio
From brand creation and trademark registration through collaborative design sprints with a UX/UI design team to 180+ production-ready screens — the complete design story of an AI-powered customer growth platform.
0
Figma Frames
0
Figma Files
0
UX/UI Designers
0
Design Phases
Founder & Product Designer · 2017–2025
See Engineering Deep-Dive1
Brand Foundation
Logo DesignColor SystemTypographyTrademark
Created the entire RipeMetrics brand identity from scratch — logo, color system, typography — and secured USPTO trademark registration.
0Logo Variants
0Color Nodes
0Brand Colors
The RipeMetrics brand was built in Figma from zero. Eight logo variants were designed across light and dark backgrounds, each with careful spacing and proportion rules. The color system spans 5 brand colors (Orange #FF792A, Yellow #FFC107, Magenta #E0274A, Green #15A15F, Black #2A2C36) plus a full system palette with semantic naming for UI states. Typography was established with clear hierarchy and pairing rules. The brand was strong enough to earn USPTO Trademark #88266303 (Registration #5855789).
Key Artifacts
- 8 logo variants across light/dark with spacing rules
- 5 brand colors + full system palette with semantic naming
- USPTO Trademark #88266303 (Reg #5855789)
- Color naming convention maps to CSS variables ($primary-dark, $danger-lightest)
Logo VariantsOpen in Figma
Color SystemOpen in Figma
2
Design System & Components
Component LibraryDesign TokensIconsDocumentation
Built a 223-component Figma library with systematic naming, 75 color tokens, and 457 icon assets — the foundation for every screen in the product.
0Components
0Color Tokens
0Icon Assets
The design system lived in Figma as a shared component library with strict naming conventions (colors/brand/brand orange/100%). It included 75 color tokens organized by role (brand, semantic, neutral), 457 icon assets in both solid and outline variants, and reusable UI components for forms, cards, tables, navigation, and data visualization. The email design system added its own 416-element color documentation and comprehensive typography references with 65 total children across 2 reference frames.
Key Artifacts
- Systematic naming: colors/brand/brand orange/100%
- 457 icons in solid + outline variants
- 416-element email color documentation
- Typography reference frames with full hierarchy
- Design tokens structured for direct CSS/Tailwind export
Component Library (223 components)Open in Figma
Email Typography SystemOpen in Figma
3
Design Sprints & Team Collaboration
Design SprintsTeam DirectionFacilitationConvergence
Ran collaborative design sprints with a UX/UI design team — 1,892 frames of divergent exploration converging into production navigation designs.
0Sprint Frames
0Designers
0BI Layout Frames
The design sprint process ran across a massive 1,892-frame Figma canvas with dedicated sections for each designer. Each person explored different approaches to campaign management, marketing groups, demographics, and navigation. The sprint canvas included a 'FINAL NAVIGATION DESIGNS' consolidation section showing how divergent exploration was driven to convergent decisions. Additional sprint activities included Campaign Center variants (8+ by Omid), Marketing Groups explorations (6+ variants), and systematic dropdown and calendar component specifications.
Key Artifacts
- 'FINAL NAVIGATION DESIGNS' consolidation from divergent exploration
- Campaign Center: 8+ variant explorations by Omid
- Marketing Groups: 6+ layout variants explored
- Systematic dropdown and calendar component specs
Sprint Canvas (1,892 frames)Open in Figma
BI LayoutsOpen in Figma
4
SaaS Product — Early to Production
SaaSDashboardCRMData VisualizationEnterprise
Evolved from 190 early mockups through design sprints to 180 polished production screens spanning CRM, marketing, feedback, and AI recommendations.
0Early Mockups
0Final Compositions
0Final Compositions v2
The product UI evolved across multiple Figma files — from early 1440×1024px mockups exploring dashboard layouts, customer profiles, and messaging to polished final compositions ready for React implementation. The production screens cover the full SaaS platform: Customer Profile (16 screens with a 6-step call transfer flow), Marketing Platform (12+ variants), Communication Center (5+ screens with 3-panel messaging), Feedback Management (8 screens), Multi-Operation Analytics (6 screens), AI Recommendation dashboards, Reports (up to 17,094px tall data-dense pages), Prospect Management pipeline, and Contact/Employee management.
Key Artifacts
- Customer Profile: 16 screens with 6-step call transfer flow
- Marketing Platform: 12+ variants with campaign builder
- Communication Center: 3-panel messaging interface
- AI Recommendation dashboards with intelligent suggestions
- Reports up to 17,094px tall — data-dense enterprise analytics
- Prospect Management pipeline with stage progression
Early Mockups — DashboardOpen in Figma
Final Compositions v2 (76 screens)Open in Figma
5
Mobile App Design
MobileNative UICRMComponent Library
Designed a full mobile CRM across 6 modules — native-style mobile UI with its own component system, not just responsive web.
0Mobile Modules
The mobile app was designed as a standalone native-style experience, not a responsive adaptation of the desktop UI. Six modules cover the core mobile CRM workflow: Login & Home (onboarding + dashboard), Messenger (real-time customer communication), Customer Profile (mobile-optimized detail views), Component Library (reusable mobile patterns), Loyalty (customer reward tracking), and Navigation (tab bar + drawer patterns). Each module has its own component specifications and interaction patterns optimized for touch.
Key Artifacts
- Login & Home: onboarding flow + mobile dashboard
- Messenger: real-time customer communication UI
- Customer Profile: mobile-optimized detail views
- Dedicated mobile component library
- Tab bar + drawer navigation patterns
Mobile Login & HomeOpen in Figma
Mobile MessengerOpen in Figma
6
Email Design & Data Reporting
Email DesignResponsiveData ReportsTypography
990-element email design system with responsive desktop+mobile pairs, 5 iterative revision rounds, and data-dense automated report templates.
0Email Elements
0Revision Rounds
0Color Tokens Documented
The email system was designed for a platform sending 10,000+ daily emails. Templates include Desktop Negative Report (768×1169px), Desktop Weekly Report (768×1566px), and their mobile counterparts (320px wide). A comprehensive Monthly Report template spans 1024×4449px with embedded dashboard visualizations. The design file also includes 5 iterative revision rounds on feedback emails showing the refinement process, a Liquid Ratings template, and full typography and color documentation for email-specific design tokens. Embedded dashboard screens within the email file cover Store Stats, Customer-Coupons, Overall Rating, Top Brands, Demographics, NPS Breakdown, and Popular Times.
Key Artifacts
- Desktop + mobile responsive pairs (768px → 320px)
- Monthly Report: 1024×4449px data-dense template
- 5 iterative revision rounds documented in Figma
- Embedded dashboard screens: NPS, Demographics, Store Stats
- 10,000+ daily email platform with SendGrid integration
Email Templates (990 elements)Open in Figma
7
Marketing Website & Funnels
MarketingLanding PagesFunnelsCRO
15+ landing pages from awareness through conversion to retention, with 4 homepage iterations showing collaborative design evolution.
0Figma Pages
~0Frames
+0Landing Pages
The marketing website spanned 31 Figma pages with ~500 frames covering the full acquisition funnel. Four homepage iterations (A01 → New Order → CURRENT → Morgan) demonstrate collaborative design evolution with the UX/UI design team. 15+ landing pages target different funnel stages: awareness (Forbes LP, industry survey, cannabis CX report), consideration (feature-specific pages, cause marketing), and conversion (CX Guide download, dispensary landing, loyalty program). The site includes blog templates, about page, sales page, and a comprehensive design for the email-based data reporting interface.
Key Artifacts
- 4 homepage iterations: A01 → New Order → CURRENT → Morgan
- Forbes LP, industry survey, CX report — awareness stage
- CX Guide download, dispensary landing — conversion stage
- Loyalty program and email reporting — retention stage
- Blog, about, sales page — full site design
Homepage (CURRENT iteration)Open in Figma
Landing Pages (44 frames)Open in Figma
8
Data Visualization & BI
Data VisualizationNPSBusiness IntelligenceAccessibility
Dedicated NPS charts, BI dashboards, and systematic chart color testing — proving rigorous approach to accessible data visualization.
0NPS Chart Frames
0BI Layout Frames
0Color Test Frames
Data visualization was treated as its own design discipline across dedicated Figma pages. The NPS Charts page (71 frames) explores Net Promoter Score visualizations with multiple chart types and layouts. The BI Layouts page (116 frames) contains business intelligence dashboard compositions with Performance Dashboard, Customer Insights, Shopping Analytics, and Marketing Campaign views. A dedicated Chart Color Testing page (36 frames) documents the systematic process of choosing accessible, visually distinct color palettes for multi-series data — testing combinations against colorblind accessibility standards.
Key Artifacts
- NPS visualizations: multiple chart types and layouts
- BI dashboards: Performance, Customer Insights, Shopping, Marketing
- Systematic color palette testing for multi-series data
- Colorblind accessibility validation
- 40+ custom charts implemented with Highcharts
NPS Charts (71 frames)Open in Figma
Chart Color Testing (36 frames)Open in Figma
9
Dev Handoff & Delivery
Dev HandoffDesign TokensImplementationDesign-to-Code
116 implementation-ready frames with Page Bar components, measurement specs, and design token naming that maps directly to CSS/Tailwind variables.
0Dev-Ready Frames
0Component Specs
The dev handoff process bridged Figma design to React implementation. The Develop page contains 116 frames with implementation-ready specifications: NPS Measures (3 variants), Performance Dashboard, Customer Insights, Shopping Analytics, Marketing Campaign views, Communication Center, and Product Summary (3 variants). Reusable Page Bar components were built as systematic patterns. Design token naming ($primary-dark, $danger-lightest) was structured to map directly to CSS/Tailwind variables, eliminating translation errors between design and code. As the founder who designed the product from the ground up and built it in React, the handoff was seamless — no designer-developer communication gaps.
Key Artifacts
- Page Bar components as reusable implementation patterns
- Design token naming maps to CSS/Tailwind: $primary-dark → var(--primary-dark)
- NPS Measures: 3 implementation variants
- Founder designed in Figma and built in React — zero translation loss
- Performance Dashboard, Customer Insights, Shopping Analytics specs
Develop (Dev Handoff)Open in Figma
See How It Was Built
Explore the engineering decisions behind these designs — from Laravel→React migration to multi-tenant RAG architecture.