There is a dangerous disconnect in the software industry. The “Creator” (Developer/Designer) lives in a bubble of technological privilege.

Device: MacBook Pro M3 Max ($4,000).
Connection: Fiber Optic (1 Gbps).
Screen: 32-inch 4K Monitor.
Environment: Quiet, air-conditioned office.

The “Consumer” (User) lives in reality.

Device: 3-year-old Samsung Galaxy A12 ($200).
Connection: Spotty 4G on a moving train.
Screen: 6-inch cracked screen with glare from the sun.
Environment: Carrying groceries, distracted by kids.

If you design for the Creator’s environment, you break the Consumer’s experience. This article introduces Empathy Engineering: The discipline of building for the worst-case scenario, not the best-case.

Why Maison Code Discusses This

We are developers. We love high-end gear. But we force ourselves to suffer. We have a “testing device drawer” full of old Androids (Moto G, Pixel 3). We see the site that runs at 60fps on an iPhone 15 run at 10fps on a Moto G. We discuss this because Performance is Equity. If your site only works on expensive phones, you are excluding 50% of the market. That is bad business.

1. The “Slow 3G” Protocol

Every developer at Maison Code must do this once a week.

Open Chrome DevTools.
Go to the “Network” tab.
Select “Throttling” -> “Slow 3G”.
Reload the homepage. The Result: Pain. You watch that 5MB hero video freeze. You watch the fonts flicker. You wait 15 seconds for the “Buy” button to become clickable. The Insight: “We need to optimize this image.” Without the pain, there is no motivation to optimize.

2. The Battery Vampire (Energy Empathy)

(See Dark Mode Aesthetic). Users are anxious about their battery life. It is modern survival instinct. If your website runs heavy JavaScript animations in the background, their phone gets hot. The battery drains. The Reaction: They close the tab. Ideally, they blame your site. Realistically, they just feel “The internet is slow today.” The Fix:

Use IntersectionObserver to pause animations when they are off-screen.
Don’t auto-play video unless the user interacts.
Respect prefers-reduced-motion.

3. Data Poverty (The Cost of Megabytes)

In the US/EU, we have unlimited data plans. In Brazil, India, or Nigeria, data is expensive. 1GB of data might cost 5% of a monthly salary. If your homepage is 10MB, you are literally costing the user money just to say “Hello”. The Ethical Calculation: Is this 4MB image worth the cost to the user? If it’s just decorative, delete it. If it’s the product, compress it (WebP/AVIF). Respect the user’s wallet.

4. Accessibility is Empathy (Not Compliance)

Most companies treat Accessibility (A11y) as a legal checklist. “Do we have alt tags? Yes. We won’t get sued.” This is the wrong mindset. Accessibility is about Inclusion.

The Blind User: Uses a Screen Reader.
The Motor Impaired User: Uses a Keyboard only (No mouse).
The Colorblind User: Cannot distinguish Red (Error) from Green (Success). The Business Case: 15% of the population has some disability. If your site is accessible, you win 15% more market share. (See Accessibility ROI).

5. Cultural Empathy (Localization)

Empathy extends to language. You translate your site to French. “Buy Now” -> “Acheter maintenant”. But do you convert the currency? Do you show the price in Euros? Do you calculate duties? The “Lazy” Localization: Using Google Translate and keeping USD. The Empathic Localization: “We see you are in France. We calculated the VAT. The price is final. We ship with Colissimo.” This tells the user: “We understand your reality.” (See Borderless Commerce).

6. The “Distracted Parent” Test (Cognitive Load)

Designers assume the user is reading every word. Reality: The user is cooking dinner, holding a baby, and glancing at the screen. The Test: Can you complete the checkout in 30 seconds with one hand? If you ask for:

“Create an Account” (Password complexity rules).
“Mother’s Maiden Name”.
“Survey: How did you hear about us?”. You lost them. The Fix: Guest Checkout. Apple Pay (Face ID). Remove friction requires empathy for the user’s context.

7. The Anxiety of Forms (Form Design)

Forms are stressful. “Did I type my email right?” “Will they call me?” Anti-Patterns:

Asterisks everywhere: Phone Number *. Why do you need my phone?
Aggressive Validation: “INVALID FORMAT” in red before I finished typing. Empathic Design:
Optional Fields: Mark fields as “Optional” instead of marking required ones.
Inline Validation: “Looks good!” (Green checkmark).
Input Masking: Format the phone number (555) 123-4567 automatically as they type.

8. The “No Data” State

Designers design screens with “Perfect Data”.

Profile Photo: Beautiful model.
Dashboard: Full of charts.
Review: 5 stars, long text. Reality: The user just signed up.
Profile: Empty grey circle.
Dashboard: “No data found”.
Review: Empty. The Fix: Design the Empty State. “You haven’t ordered yet. Here is a starter guide.” Turn the empty state into an onboarding opportunity. Don’t leave them in a blank room.

9. The Error Message Tone

When things go wrong (404, 500, Payment Failed), how do you talk to the user? Technocrat: Error 500: Database Connection Refused. SQL Exception. Empath: Oops! Something went wrong on our end. We have been notified. Please try again in 5 minutes. Never blame the user (“Invalid Input”). Always take the blame (“We couldn’t understand that”). Language shapes emotion.

10. The “Fold” is Dead (Scroll Depth)

Clients often say: “Put everything above the fold!” Empathy Check: On mobile, the “Fold” is tiny. 30% of the screen is the URL bar and the Software Keys. If you cram a Hero Banner, a Title, and a Button into 400 pixels, it looks like a cluttered mess. Empathy-Driven Design: Let the user scroll. Scrolling is natural. It is easier than clicking. Don’t fear the fold. Fear the clutter.

11. Touch Targets (Fat Fingers)

I have fat thumbs. The average thumb touch area is 44x44 pixels. If you design a tiny “X” close button that is 20x20 pixels, I will miss it. I will click the ad behind it. I will get angry. The Rule: Minimum Touch Target = 44px (Apple Guideline). Add padding to clickable elements. Make it easy for me to succeed.

12. The Color Blindness Test (Daltonization)

8% of men are Color Blind (Deuteranomaly). If your “Error State” is just red text, they might not see it. If your “Sale Price” is just red text, they might miss it. The Fix: Use Redundant Coding. Don’t just use Color. Use Color + Icon + Shape.

Error: Red Text + 🛑 Icon.
Success: Green Text + ✅ Icon. This ensures that everyone gets the message, regardless of their biology.

13. Conclusion: Empathy is Profit

Empathy is not a “Soft Skill”. It is a “Hard Requirement” for scale. You cannot scale to 1 Million users if you only build for the 1% of users who have the latest iPhone. You must build for the messy, slow, distracted reality of the world. When you do, your software feels “Robust”. It works for everyone, everywhere. That is the definition of quality. And ultimately, quality is what drives revenue. A site that works for everyone sells to everyone. Don’t leave money on the table by ignoring the 99%.

Building for the Bubble?

We perform Device Lab Testing and Accessibility Audits to ensure your site works for the 99%.

Hire our Architects.