CASE STUDY
Sugar Modernization
Phase 1: Crafting a Vision
COLLABORATORS & PROJECT PEERS: Product Management, Engineering, UX Team Leads & Executive Stakeholders
Product Management, Engineering, UX Team Leads
& Executive Stakeholders
The Aesthetic-Usability Effect
SugarCRM was suffering from the "Aesthetic-Usability Effect" which is when users perceive attractive designs as more functional, believing that better-looking products will perform better, even if they don’t. Conversely, less attractive designs are believed to perform worse, even if they don't.
The Goal
"Oooooo, that looks good."
Exhibit A:
Sugar
Screenshots
Deep Thoughts:
Deep Thoughts:
I was tasked with pushing the envelope, focusing more on aesthetics rather than usability for the moment... I liken this to how high fashion designers push boundaries to set trends, which clothing brands then adapt into more practical styles for the mass market.
The Challenge
"Sugar looks old."
SugarCRM, a leader in the CRM space, is known for its powerful customization but had started losing potential customers due to its dated look and feel. To change this, I was tasked by the executive team with revitalizing the platform on a company-wide basis—pushing boundaries and exploring bold design choices beyond our usual constraints.
The Result
Click screens to play
The Strategy
Guiding Principles
I researched competitors and analyzed modern UI designs, distilling my findings into a few core principles to guide the redesign.
Prototype
Focus
Drawer
Principle:
Simplicity &
Consistency
Prototype
Display Density Controls
Principle: Personalization & User-Centric Design
Prototype
Record View
Principle: Personalization & User-Centric Design
Prototype
AI Assistant
Principle: AI integration
Prototype
Business Processes
Principle: Simplicity & Consistency
Prototype
Create New Contact
Principle: Simplicity & Consistency
Prototype
Sugar Live
An omnichannel tool
Principle: Simplicity & Consistency
Prototype
Calendar
Principles:
-
Simplicity & Consistency
-
Colors and Gradients
Prototype
Update BWC Pages
SugarCRM has hundreds of Backwards Compatible (BWC) pages that must be maintained due to tech debt, many dating back to the original 2004 code—and they look it. I gave these pages a structural facelift, refreshing fonts, and colors while preserving the core layout to ensure existing functionality remained intact.
Prototype
Theme Builder
Principles:
-
Visual Hierarchy & Typography
-
Interactive Charts & Data Visualization
-
Colors, Gradients and Graphics,
-
Personalization & User-Centric Design
Key Takeaway:
“Big things take small steps.”
🏅
The redesign was a great success, generating significant market excitement among senior executives, colleagues, and users who previewed the designs at customer events.
💰
My designs served the additional purposes of facilitating product investment decisions and supporting strategic alignment across the company.
💪
While the redesigns were a success, the next challenge was determining how to break down the work and translate these concepts into reality—details of which are outlined on the next page.
🍎
Inspired by Apple, I crafted a wider vision for the product, and broke that into attainable steps that would get us there. While Apple used a 20 year time-horizon, we opted for 7 years