Utility Customer Self-Service Portal
Contributed to a large-scale Salesforce Experience Cloud portal enabling customers to manage utility services and payments online.
For Decision-Makers
Executive Summary
Contributed to a large-scale Salesforce Experience Cloud customer portal enabling self-service for service management, billing, and outage reporting. Implemented Aura components against a custom design system and produced supporting email templates—translating brand and UX standards into a consistent customer-facing experience at scale.
Business Challenge
What was at stake
Customers managed utility services through fragmented channels—phone, email, and limited web access—making routine tasks like starting service, paying bills, and reporting outages inefficient for both customers and the support organization.
Key Problems
- Fragmented customer channels for common tasks
- High call volume for self-serviceable actions
- Inconsistent brand and UX across digital touchpoints
- Limited customer visibility into account status
- Slow rollout of new self-service capabilities
Stakeholders Affected
End-customer base, customer support operations, billing and field operations, and marketing/brand owners accountable for the customer experience.
Technical Approach
Design-system fidelity in production code
Implemented Aura UI components aligned to a pre-defined custom design system, built interfaces for service management, billing, and outage reporting, and produced custom Salesforce email templates supporting communication throughout customer workflows.
Aura component development against custom design tokens
UI for service management, billing, and outage reporting workflows
Custom email templates for customer communications
Production-grade implementation aligned to UX deliverables
Coordination with UX designers on component fidelity
The Process
Project Lifecycle
Developed Aura components aligned with a custom design system to support core customer portal functionality.
Supported UI readiness and email template setup for production rollout.
Execution Approach
Design System Implementation
Focused on translating a predefined design system into reusable Aura components, ensuring a consistent and scalable user experience across customer-facing workflows.
Architectural Decisions
Choices that shaped the build
Aura aligned to a custom design system
Decision
Build Aura components mapping directly to design-system tokens rather than Lightning Design System defaults.
Rationale
Brand consistency was a hard requirement. Default styling would not have passed brand review for a customer-facing surface.
Component fidelity over speed
Decision
Validate each component against design specs before broad use.
Rationale
Inconsistencies multiply across surfaces. Fixing post-hoc is more expensive than getting it right once.
Email templates as first-class UX
Decision
Treat customer email templates as experience deliverables, not afterthoughts.
Rationale
Emails carry the workflow forward outside the portal. Brand and clarity matter beyond the portal itself.
Key Tradeoffs
What was chosen, and against what
Design implementation
Chose
Custom design-system implementation in code
Instead of
Lightning Design System defaults
Reasoning
Brand requirements demanded fidelity. Defaults would not have passed brand review for a B2C surface.
Component framework
Chose
Aura aligned to existing program standards
Instead of
Mid-program migration to LWC
Reasoning
The existing program had committed to Aura. Migration cost/benefit didn't justify shifting frameworks mid-flight.
Communication scope
Chose
Email templates inside the UI workstream
Instead of
Separate marketing/email track
Reasoning
Workflows continue in email. Splitting tracks creates inconsistent customer experience across portal and mailbox.
Measurable Outcomes
Results
Key Impact
Customer Self-Service Enabled
4
Features
2
UI Layers
2
Deliverables
Qualitative Outcomes
Beyond the numbers
- Consistent design-system fidelity across customer-facing surfaces
- Self-service workflows live for service management, billing, and outages
- Email communications aligned to portal UX standards
- Foundation of reusable Aura components for future expansion
- Smoother customer journeys across high-volume tasks
Lessons Learned
What generalizes
- 01
Design-system implementation in code is a discipline, not a one-time deliverable.
- 02
Component review against design specs is cheap. Redoing post-launch is expensive.
- 03
Customer email templates are part of the experience—don't outsource them to a different aesthetic.
- 04
Aura is still viable when program standards demand it. LWC migration isn't always the right call.
- 05
Cross-disciplinary coordination among designers, developers, and marketing needs explicit handoffs.
When This Approach Makes Sense
Is this a fit for your program?
Strong fit when
- Building a B2C self-service portal on Experience Cloud
- A custom design system needs production implementation, not just Figma deliverables
- Customer communications must align to portal UX
- High-volume customer journeys need consistent experience across surfaces
Probably not when
- Standard Lightning experience meets brand requirements
- Self-service journeys aren't a priority for the business
- Aura is not a viable choice and an LWC team isn't in place
Next Step
Planning a customer self-service portal on Experience Cloud?
If you need design-system fidelity implemented against a B2C portal, share the scope and I'll respond with engagement options.
Not sure how to engage? See engagement options.
Related Services
See engagement options or contact Bryan to discuss a similar engagement.