Design Systems & BEX CRM Multi-Platform
Design Systems
& BEX CRM Cross-Platform
Design Systems & BEX CRM Multi-Platform
TEAM
TEAM
TEAM
1 Head of Project
1 Sr. Software Engineer
1 Product Designer (👨🏻💻)
1 Head of Project
1 Sr. Software Engineer
1 Product Designer (👨🏻💻)
1 Head of Project
1 Sr. Software Engineer
1 Product Designer (👨🏻💻)
YEAR
YEAR
YEAR
2023-2024
2023-2024
2023-2024
INDUSTRIES
INDUSTRIES
INDUSTRIES
Real Estate & CRM
Real Estate & CRM
Real Estate & CRM
PLATFORM
PLATFORM
PLATFORM
Desktop
Mobile App
Tablet App
Desktop
Mobile App
Tablet App
Desktop
Mobile App
Tablet App
BEX Realty needed a CRM Dashboard (web) and Mobile App to manage real estate operations. I applied the Atomic Design System from their existing mobile app while expanding the system to meet the complex requirements of the CRM and multi-platform needs.
BEX Realty needed a CRM Dashboard (web) and Mobile App to manage real estate operations. I applied the Atomic Design System from their existing mobile app while expanding the system to meet the complex requirements of the CRM and multi-platform needs.
BEX Realty needed a CRM Dashboard (web) and Mobile App to manage real estate operations. I applied the Atomic Design System from their existing mobile app while expanding the system to meet the complex requirements of the CRM and multi-platform needs.
Overview
Overview
Overview
Build a unified design system for BEX Realty’s CRM Dashboard
Build a unified design system for BEX Realty’s CRM Dashboard
Build a unified design system for BEX Realty’s CRM Dashboard
TARGET USERS
Manager
Concierge & Follow Up Concierge
Real estate agents
Admin & Tech
Manager
Concierge & Follow Up Concierge
Real estate agents
Admin & Tech
Manager
Concierge & Follow Up Concierge
Real estate agents
Admin & Tech
GOAL
Consistent UX and UI parity across platforms and easy adaptation for CRM-specific features Performance on mobile app.
Reusability faster development via modular components.
Consistent UX and UI parity across platforms and easy adaptation for CRM-specific features Performance on mobile app.
Reusability faster development via modular components.
Consistent UX and UI parity across platforms and easy adaptation for CRM-specific features Performance on mobile app.
Reusability faster development via modular components.
CHALLENGE
Mobile lag with 500+ data rows & handle 1,000+ transactions seamlessly
UI parity across platforms while preserving brand identity
Components weren’t cross-platform ready
Mobile lag with 500+ data rows & handle 1,000+ transactions seamlessly
UI parity across platforms while preserving brand identity
Components weren’t cross-platform ready
Mobile lag with 500+ data rows & handle 1,000+ transactions seamlessly
UI parity across platforms while preserving brand identity
Components weren’t cross-platform ready
IMPACT 🤯
Critical feature abandonment
User confusion during platform switching
Longer dev & design time
Critical feature abandonment
User confusion during platform switching
Longer dev & design time
Critical feature abandonment
User confusion during platform switching
Longer dev & design time
Audit & Identify
Audit & Identify
Audit & Identify
I audited 45 BEX Realty mobile app components in Figma, then researched existing CRM systems via stakeholder workshops to identify relevant components. A component comparison table will summarize the findings.
I audited 45 BEX Realty mobile app components in Figma, then researched existing CRM systems via stakeholder workshops to identify relevant components. A component comparison table will summarize the findings.
I audited 45 BEX Realty mobile app components in Figma, then researched existing CRM systems via stakeholder workshops to identify relevant components. A component comparison table will summarize the findings.
Solution
Solution
I implement Token System + Atomic Design to solve the challenge following the process
I implement Token System + Atomic Design to solve the challenge following the process
Architecture
Architecture
Solution
I implement Token System + Atomic Design to solve the challenge following the process
Architecture
Multi-Platform & Token-Driven Atomic Design
Multi-Platform & Token-Driven Atomic Design
Multi-Platform & Token-Driven Atomic Design
Raw design values that serve as the building blocks
(colors, spacing, font, shadows, border radius,…).
Raw design values that serve as the building blocks
(colors, spacing, font, shadows, border radius,…).
Raw design values that serve as the building blocks
(colors, spacing, font, shadows, border radius,…).
Connecting with global design tokens.
Contextual aliases that map foundations to specific uses.
Connecting with global design tokens.
Contextual aliases that map foundations to specific uses.
Connecting with global design tokens.
Contextual aliases that map foundations to specific uses.
Apply design tokens.
UI elements built using semantic tokens.
Consumes semantic tokens (primaryBg, not #2A5C8B).
🤩
Apply design tokens.
UI elements built using semantic tokens.
Consumes semantic tokens (primaryBg, not #2A5C8B).
🤩
Apply design tokens.
UI elements built using semantic tokens.
Consumes semantic tokens (primaryBg, not #2A5C8B).
🤩
Choosing theme, platform, brand, …
Rules for modifying components per platform.
Single component codebase with platform-aware logic.
Choosing theme, platform, brand, …
Rules for modifying components per platform.
Single component codebase with platform-aware logic.
Choosing theme, platform, brand, …
Rules for modifying components per platform.
Single component codebase with platform-aware logic.
Execution
Execution
Identify the previous components of BEX Mobile design systems, then add new components. Implement Table of Contents to make it easier for designers and developers to search, and use Figma's Variant feature to manage tokens, atomic components, and adapt platforms.
Identify the previous components of BEX Mobile design systems, then add new components. Implement Table of Contents to make it easier for designers and developers to search, and use Figma's Variant feature to manage tokens, atomic components, and adapt platforms.
Execution
Identify the previous components of BEX Mobile design systems, then add new components. Implement Table of Contents to make it easier for designers and developers to search, and use Figma's Variant feature to manage tokens, atomic components, and adapt platforms.
Effortlessly adapt UI across all platforms in a snap – freeing up valuable time to focus on perfecting the user experience, not pixel-pushing.
Effortlessly adapt UI across all platforms in a snap – freeing up valuable time to focus on perfecting the user experience, not pixel-pushing.
Result
Result
Result
Our goals focus on improving design impact and development efficiency. We're targeting 95% adoption of component tokens for visual consistency, boosting performance to 60 FPS with 1,000+ rows, cutting feature dev time by 50% through reusable components, and scaling fast—adding 5 CRM features in just 2 months.
Our goals focus on improving design impact and development efficiency. We're targeting 95% adoption of component tokens for visual consistency, boosting performance to 60 FPS with 1,000+ rows, cutting feature dev time by 50% through reusable components, and scaling fast—adding 5 CRM features in just 2 months.
Our goals focus on improving design impact and development efficiency. We're targeting 95% adoption of component tokens for visual consistency, boosting performance to 60 FPS with 1,000+ rows, cutting feature dev time by 50% through reusable components, and scaling fast—adding 5 CRM features in just 2 months.
0:00/1:34
0:00/1:34
Our tight collaboration led to a successful launch of the Cross-platform for BEX CRM Realty at the end of 2024.
Our tight collaboration led to a successful launch of the Cross-platform for BEX CRM Realty at the end of 2024.
Our tight collaboration led to a successful launch of the Cross-platform for BEX CRM Realty at the end of 2024.
