Sparking Joy* in Sugar
Another Sprint Week Hackathon project I spearheaded was for addkingmore visual "delight" to our software. I created some Illustrated Messages for Empty States.
What is “delight”?
“Delight is unexpected value in the form of simplicity, convenience, and/or satisfaction”
-
Visceral Delight
Aesthetics plays a role in positive perception and delight -
Behavioral Delight
Tasks are easy to accomplish compared to the user’s expectations -
Reflective Delight
Appeals to a person’s emotional sense of self/values/aspirations
Hiearchy of User Needs
From "Designing for Emotion" by Aaron Walters
What are Illustrated Messages?
Empty states are moments in the user experience when there is no content to display. They can appear anywhere within an application and occur most commonly when a user:
-
Interacts with an application or feature for the first time
-
Performs a search or filters data
-
Encounters an error due to permissions, systems, or configuration issues
An illustrated message is a combination of
-
a solution-oriented message
-
engaging illustration
-
conversational tone to better communicate an empty state than just a message alone
An illustrated message turns a situation (even a negative situation) into a better experience for your users.
Why Spark Joy In Sugar?
-
CRMs feel dull. Black, white, and gray rows and columns of text
-
Everyday tasks can be the same old experience
-
Messaging can be robotic or too technical
-
Illustrations delight human emotion
-
Animations + strategic loading bring assurance of reliability
-
Relatable microcopy speaks to users as human beings
From Meh to Marvelous
Empty Dashboard: Before
When adding a new dashboard, it is mostly empty with a generic gray bar chart placeholder graphic. 🫤
Empty Dashboard: After
The new empty dashboard features a playful animation of a tumbleweed rolling through the desert, paired with a friendly message inviting the user to start building their workspace.
Empty Leads: Before
When SugarCRM is first installed, most listview pages are initially empty, leaving a blank expanse of white space.
Empty Leads: After
Incorporating a short animation that blends the Leads module icon—a leaf—with a money concept, paired with engaging instructions on creating new leads, adds both clarity and a touch of fun.
BWC Pages
The BWC (Backwards Compatible) pages of SugarCRM are a vital part of the product but feel noticeably dated. Adding lively loading animations could bring a modern touch without a full redesign.
