Project 01 · Salesforce Lightning (SLDS)

Optimizing the Account Console for high-velocity teams

Redesigning the standard Salesforce Account record page to cut “toggle tax” and put action-first data in front of both desktop and mobile users.

Role
UX Designer
Platform
Salesforce Lightning
Surface
Account Record Page
Devices
Desktop + Mobile
Salesforce · Account · Edge Communications
Redesigned Salesforce account record page for Edge Communications
The redesigned record page. A persistent Highlights Panel and action-first tab order, read along the natural F-pattern (arrows).
01 The Challenge, the “why”

Critical data was buried under “toggle tax”

Standard CRM interfaces suffer from information overload, the data that matters most is hidden behind deep scrolls and stacked tabs, so account managers pay a constant “toggle tax” just to answer a simple question.

My goal was to architect a persona-based record page that prioritizes immediate action (Activities) while keeping historical data (Related Lists) and deep-dive details organized and one glance away, not buried.

01

Information overload

Every field competes for attention; nothing is prioritized for the task at hand.

02

Toggle tax

Answering “what’s next?” means hopping between tabs and losing context each time.

03

Action is buried

The next best action sits below historical detail instead of leading the page.

In account management, “what do I need to do next?” matters more than “what are the account details?”, so lead with action.

02 Technical Solution, the “how”

A “Header & Right Sidebar” architecture

Using the Salesforce Lightning App Builder, I rebuilt the page on a Header & Right Sidebar template, keeping the most critical real-time information inside the F-pattern reading zone, where the eye lands first.

A

Global Highlights Panel

A top-level panel gives an instant 360° view of the account, without clicking a single tab.

B

Prioritized information architecture

The tab component is restructured to lead with the Activity tab: action before reference.

C

F-pattern reading zone

Highlights and Activity occupy the natural top-left scan path; deeper detail follows.

D

Dual-device optimization

Activated for desktop and mobile, so field reps can log activity on the go.

Lightning App Builder · Create a new Lightning page
Choosing the Header and Right Sidebar Lightning page template
The architectural choice. Header & Right Sidebar, a full-width header above a main region and right sidebar that stacks gracefully on phones.
03 The UI Focus

Desktop, mobile, and behind the scenes

Mobile view. The Header & Right Sidebar template collapses gracefully into a single, scannable column, proving the layout is genuinely responsive, not just desktop-first.

Mobile view collapsing into a single column
Lightning App Builder · New Account Page
Lightning App Builder configuration showing components, canvas, and page properties
Behind the scenes. Components on the left, the live canvas in the centre, and the Header & Right Sidebar template set in page properties, design as technical configuration, not just visuals.
04 Design Logic: the “so what?”

Cognitive load reduction, not just configuration

While this was a technical configuration, the core design philosophy was cognitive load reduction.

By separating Activities from Record Details, I cut the time-to-task for Account Managers, freeing them to focus on the customer relationship rather than navigating the CRM.

↓ Time-to-task
Faster next action
Action-first IA removes the hunt for “what’s next.”
0 tabs
To a 360° view
The Highlights Panel surfaces context on load.
2× devices
Desktop + mobile
One responsive system across form factors.
Project 02 · Salesforce Lightning (SLDS)

Enhancing enterprise data scalability with Dynamic Forms

Upgrading a dense, hundred-field Account record into a modular, high-performance experience that surfaces only the most relevant data, on every device.

Role
UX Designer
Platform
Salesforce Lightning
Focus
Interaction · Data Density
Devices
Desktop + Mobile
Salesforce · Account · Edge Communications, Details
Edge Communications account record, Details tab with the Dynamic Highlights Panel surfacing New Case and New Opportunity actions
The Dynamic Highlights Panel. Five curated “power fields” plus critical actions, including New Case and New Opportunity, span Services to Sales workflows from the very top of the page.
01 The Challenge: solving “field fatigue”

Hundreds of fields, endless scroll

In large-scale enterprise environments, Account records often contain hundreds of fields. A static Record Detail page forces users to scroll endlessly to find what they need.

My objective was to upgrade a standard Account page to Dynamic Forms, creating a modular, high-performance experience that prioritizes only the most relevant data for the task at hand.

01

Field fatigue

Hundreds of fields on one page bury the few that actually drive the work.

02

Endless scroll

A rigid, monolithic layout means hunting top-to-bottom for a single value.

03

One-size-fits-all

The same static page serves every persona, profile, and record state.

02 The Solution, contextual data architecture

From a monolithic layout to modular components

I transitioned the page from a rigid, monolithic layout to a flexible, component-based architecture built on Dynamic Forms.

A

Dynamic Highlights Panel

Five curated “power fields” (Type, Industry, Phone, Rating, Owner) and four critical actions, so ~80% of tasks finish from the top 10% of the page.

B

Progressive disclosure via tabs

A “More Information” tab houses low-frequency System and Description data, cutting cognitive load while keeping it one click away.

C

Clutter reduction

A UI audit removed redundant or obsolete fields like Fax and SLA Expiration Date.

D

Mobile experience parity

Dynamic Forms enabled on mobile too, one “single source of truth” that works in the office or in the field.

Lightning App Builder · New Account Page · Field Section
Lightning App Builder showing Field Section, Dynamic Highlights Panel and Tabs components in the Fields panel
Clicks, not code. The Field Section component configured in the Lightning App Builder, building modular Dynamic Forms without writing a single line of code.
03 The UI Focus: desktop & mobile parity

Progressive disclosure, on every device

Salesforce · Account · More Information
Desktop More Information tab showing Description, System and Additional Information sections
Desktop, progressive disclosure. Description, System and Additional Information collapse into a dedicated “More Information” tab, kept out of the primary view.

Mobile parity. The same Dynamic Forms layout renders natively on mobile, a unified “single source of truth” whether the user is at their desk or in the field.

Mobile More Information view with the same Dynamic Forms sections
04 My Design, impact & scalability

Beyond one-size-fits-all

By implementing Dynamic Forms, I moved beyond a “one-size-fits-all” layout toward an architecture built to scale.

As the business grows, visibility rules can show or hide fields based on user profile or record status, keeping the CRM clean, fast, and user-centric.

80% of tasks
from the top of the page
5 power fields + 4 critical actions, surfaced first.
1 source of truth
desktop + mobile parity
Dynamic Forms enabled across every device.
future-proof
visibility rules ready
Show or hide fields by profile or record status.