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.
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 still 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.
Project Overview
- Salesforce Experience Cloud Developer: configured the portal, page templates, navigation, sharing, and security.
- LWC Developer: built reusable LWCs (cards, tables, filters, timelines, forms) driven by property and project data.
- Frontend Implementer from Figma: converted design system tokens, spacing, grids, and components into pixel‑accurate Experience Cloud pages.
- Integration of key business processes such as property status tracking, construction milestones, and customer communication touchpoints.
Research
Reviewed Gallery Group’s public website and brand narrative to understand how to visually align the portal with their positioning in co‑living, SDA, dual and traditional homes. Also studied Figma prototypes and design systems in depth to standardize spacing, typography, and reusable UI patterns across dozens of screens.
Ideation
- Designed a flexible template strategy in Experience Cloud using a combination of standard page templates and custom LWC‑driven layouts.
- Defined a component library of LWCs to implement once and reuse across multiple screens: list/grid views, detail layouts, step indicators, filter panels, and action toolbars.
- Planned a navigation structure that groups co‑living, SDA, dual, and traditional options while keeping the portal intuitive for non‑technical users.
- Outlined responsive behavior for all major layouts, ensuring that investors and buyers could access their information seamlessly on mobile and tablet.
Experience cloud setup
- Configured the Experience Cloud site with branding, theming, and typography aligned to Gallery Group’s main website and marketing materials.
- Set up page templates for dashboard, list, detail, and form pages to be used throughout the 48–50 screens.
- Implemented custom navigation menus and page variations based on user role, ensuring each persona sees relevant sections immediately after login.
Figma to code
- Translated Figma spacing, grid systems, and typography directly into SLDS‑aligned and custom‑themed styles within Experience Cloud.
- Recreated complex layouts (multi‑column dashboards, tabbed sections, cards with nested content) exactly as per Figma across nearly 50 pages.
- Ensured consistency of buttons, icons, and component states (hover, active, disabled, validation) to match the design system.
- Collaborated with designers to resolve edge cases where Figma interactions needed to be adapted for Salesforce capabilities and performance.
Key Design Improvements
- Consistent, branded Experience Cloud portal closely aligned with Gallery Group’s main website look and feel.
- Modular, reusable LWC component library reducing duplication and simplifying future enhancements.
- Clear, role‑based navigation that helps investors and buyers quickly find property details, status, and documents.
- Responsive layouts ensuring that stakeholders can access critical information from any device.
Final Output
- A modern Salesforce Experience Cloud portal comprising approximately 48–50 fully implemented screens built from Figma designs.
- Rich library of custom LWCs powering dashboards, listings, detail views, forms, and document areas across the portal.
- Secure, role‑based access model allowing Gallery Group to confidently share project information with investors and buyers while protecting sensitive data.
- A scalable foundation that can be extended with new components, screens, or integrations as Gallery Group evolves its property offerings and internal systems.
