Gallery Group is a property development and construction company offering end-to-end solutions for investors and homeowners, with a strong focus on co-living, SDA, dual, and traditional home designs. A key project objective was to modernize their Salesforce Experience Cloud portal, align it with updated Figma designs, and streamline customer and partner journeys across 48-50 unique screens built with LWC components and tailored Experience Cloud templates.
Key Tools & Technologies:
VS Code & Lightning Studio
Figma Design System
My Role & Scope
Served as Salesforce Experience Cloud Developer, LWC Developer, and Frontend Implementer from Figma over a 3-month project lifecycle.
The scope encompassed end-to-end site setup (branding, login, navigation, page structures), building 48-50 Figma-derived screens (dashboards, list views, detail pages, wizards, forms), developing LWC components (property cards, project timelines, progress indicators, document sections, interactive filters), creating role-based journeys for investors, buyers, and internal staff, and integrating property tracking and construction milestones.
The Challenge
The existing portal and processes did not fully reflect Gallery Group’s current brand positioning and end-to-end service offering, creating a fragmented digital experience for customers and partners.
Multiple user journeys (investors, buyers, property managers, internal staff) needed to be unified into a consistent UI while supporting different permissions, data views, and workflows across nearly 50 screens.
Additionally, the complexity of property data, milestones, and documentation required robust component architecture and careful handling of state, security, and performance in Experience Cloud.
Research & Ideation
Reviewed Gallery Group’s public website and brand narrative to visually align the portal with their positioning in co-living, SDA, dual, and traditional homes. Studied Figma prototypes and design systems in depth to standardize spacing, typography, and reusable UI patterns across dozens of screens.
Designed a flexible template strategy in Experience Cloud combining standard page templates with custom LWC-driven layouts. Defined a modular LWC library (list/grid views, detail layouts, step indicators, filter panels, action toolbars) for write-once, run-anywhere reuse.
Planned an intuitive navigation structure grouping property types cleanly for non-technical users, while establishing responsive behavior ensuring seamless mobile and tablet access for investors and buyers.
Experience Cloud Setup & Figma to Code
Site Setup: Configured branding, theming, and typography aligned to main marketing assets. Established standardized page templates for dashboard, list, detail, and form layouts. Implemented custom navigation menus and role-based page variations ensuring relevant post-login views for every persona.
Translated Figma spacing, grid systems, and typography directly into SLDS-aligned and custom-themed Experience Cloud styles. Recreated complex layouts (multi-column dashboards, tabbed sections, cards with nested content) across nearly 50 pages with strict state consistency (hover, active, disabled, validation).
Key improvements delivered a consistent, branded portal closely aligned with Gallery Group’s core website look and feel, a modular LWC library simplifying future enhancements, clear role-based navigation, and fully responsive cross-device layouts.
Final Output
A modern Salesforce Experience Cloud portal comprising approximately 48-50 fully implemented screens built from Figma designs.
Features a rich library of custom LWCs powering dashboards, listings, detail views, forms, and document areas across the site.
Delivers a secure, role-based access model allowing Gallery Group to confidently share project information with investors and buyers while protecting sensitive data, creating a scalable foundation ready for future property offerings and system integrations.
