Emotional Resonance, Lottie, and the Hootsuite Delight System
--
We all want to create products that people love. As Designers, Engineers, and PMs, we put various instantiations of this concept into our principles, success metrics, KPIs, OKRs, and other assorted acronyms, but rarely do these documents touch on the one aspect necessary for product love — human emotion.
As we expand and evolve our design system at Hootsuite, we’re asking some rich questions. What components are necessary to create a fully satisfying experience? What does it even mean to add delight to the Hootsuite user experience? And perhaps most critically, what technologies are available that would help us facilitate such madness?
While this is clearly going to be a journey for Hootsuite, we have some ideas and perhaps even a few answers that we’d like to share. Our exploration currently includes:
- Defining the need for delight-inclusive solutions
- Developing a framework and standards that help us generate alignment, build in more efficiency, and ensure consistency
- Investigating the tech and tools that would make it possible
In this article we’ll explore emotional inclusion, our new delight system, and a concept we call Emotional Resonance. Most of this is meaningless if you can’t ship it, so our last section (and perhaps the most important) is about how we’re building and managing delight content and libraries with Lottie and Storybook.
Human centricity & emotional inclusion
If we are going to define the importance of delight in our UX, we need to understand why emotional inclusion is essential for human understanding and decision-making.
At Hootsuite, we are incredibly focused on customer success and obsessed with meeting customer needs. However, historically our customer-focused approach at Hootsuite was heavily concentrated on human reasoning. While this is a rational strategy for customer success, it takes a limited view of satisfaction. Can the customer complete the task? Yes. OK, great, our work here is done, as long as task completion equates to product satisfaction. Although we were creating solutions built on a foundation of solid UX, a must-have starting place, we were not looking at the customer psychology aspect of the user journey: How does the customer feel while completing these tasks? Our equation was missing one vital component — emotional inclusion.
Defining the need for emotional inclusion
Regrettably, emotional inclusion does not get the necessary attention in our solutions for SaaS and productivity apps. We tend to use the solid, steady, rational approach of functionality first, and shy away from delight or anything that might be construed as “not serious” enough. However, the truth is that emotion plays such an enormous role in consumer success that we literally can’t make decisions without it. To attain holistic customer satisfaction, emotion must be included in our UX solutions and systemic thinking.
Chloe Ellis, in her fascinating article on the effects of emotion on marketing Why Emotion Plays a Critical Role in Decision Making, cites Zaltman’s 2016 study demonstrating that 95% of cognition occurs in our emotional brain. Furthermore, Damaioi’s 2000 seminal study found that “when humans had damaged the area of their brain where emotions were generated and processed, despite still being able to use logic and function completely normally, individuals void of emotion seriously struggled to make any decisions, even simple decisions like what to eat for lunch”.
Emotions are actually very rational.
They’re part of the mechanism of reasoning and inform even our most logical decisions. It’s not enough just to know what should be done; it’s also necessary to feel it.
_Chloe Ellis
Cleotilde Gonzalez has done interesting research into the specific effect animation has on our decision-making. She has a variety of studies examining the effect of animation on the overall understanding and likability of user experience. One of her papers Does Animation in User Interface Improve Decision Making? demonstrates that the use of animation produced more accurate responses than transitions with limited or no animations, and moreover, that observations of the enjoyability data indicated that animations increased overall enjoyment.
Don Norman of the Nielsen Norman Group and author of Emotional Design suggests that emotions give us a value system. He states, “Our emotions help us decide what is important and what is not important, what’s urgent and not urgent. Cognition is about understanding and these two go hand in hand.”
Why does mediocre wine taste so much better when drunk from a fancy wine glass?
_Don Norman, Emotional Design
Emotion clearly has a significant impact on the way we perceive the world around us, and its effect on a user interface is no exception. This is clearly demonstrated in the research conducted by Masaaki Kurosu and Kaori Kashimura in their published work Apparent Usability vs. Inherent Usability: Experimental Analysis On the Determinants of the Apparent Usability, which investigates differences in ATM user interfaces. They set up testing with ATM layouts and screens that all had the same functionality, though some of the layouts and screens were aesthetically pleasing and some were definitively not. Not surprisingly, the aesthetically pleasing ATM interfaces had higher likability scores; but in a fascinating twist, they were also perceived to be easier to use!
These findings are yet another reminder of the importance of including positive emotional responses, or delighters, in our UX solutions.
Aesthetics matter, attractive things work better.
_Don Norman
Emotional Resonance & Hootsuite’s Delight System
We realized that our design system was reflecting the same overly rational approach as our development process. So, we devised a horizontal sub-layer of our design system that could standardize our approach to aesthetic and emotion inclusion; we called it the Delight System.
This is still evolving, but it is similar to our design system in that it’s a framework of principles, approaches, and standards. It helps us define how emotion, aesthetics, and delight are integral parts of our design solutions. They are not “nice to haves” — these types of motion design, animations, and other delighter inclusions are just as important as other design elements. One way to think about this is color. We don’t have huge debates on whether color should be added to our solutions — it is universally accepted that color is an important aspect of a healthy app ecosystem, and we just do it. We don’t allocate additional specific cycles around its inclusion; we just incorporate it into our development cycle. Similarly, delight should be factored into the overall holistic approach, planning, and cost of a feature.
The Hootsuite Delight System
Our Delight System will ultimately help define aesthetics in a variety of areas, including color, sound, dynamic light, animation, and motion design. Currently, we are focusing on the inclusion of motion design, animated icons and animated illustrations, and we’re building out component libraries for these items (more on this in the next section Lottie & Storybook make it possible).
We are going through a second renaissance with our entire design system, which includes the delight system. While it is a work in process, we thought it might be helpful to share a few of our principles and approaches thus far.
The hierarchy of user need
Back to the Nielsen Norman group for a moment. As A Theory of User Delight: Why Usability Is the Foundation for Delightful Experiences suggests, we must satisfy our users’ functional, task-driven needs with a foundation of great UX. At the same time, we must satisfy their emotional needs with perfected typography, brilliantly selected colors, and beautifully animated content, among other things, to attain holistic customer satisfaction.
It makes sense that, “If your product or service lacks basic functionality and reliability, delightful features will likely fail to provide any sustainable benefit to your user base” (NN GROUP). The Nielsen Norman Group divides these areas into deep delight and surface delight, reiterating the need to build trust with a foundation of amazing UX combined with pleasurable emotional inclusion. Adding delight is one way we create high-quality, conscious experiences that feel alive and responsive with personality and style. For us, it is about increasing the likability scores of Hootsuite.
Deep delight & surface delight
Trust is built with that solid, reliable UX, or deep delight. This foundation represents the first three layers of Aarron Walter’s hierarchy of user needs: functionality, reliability, and usability. Deep delight is the satisfaction achieved as a result of well-crafted UX.
Surface delight is the emotional layer built on top of this solid base of UX. Delighters don’t work without good UX. It can actually be detrimental to add delight to UX that our customers find lacking or annoying — it’s as though we are celebrating the thing they find unsuccessful or dissatisfying. These types of surface delighters include motion design, UI animations and transitions, authentic imagery or illustrations, and even sound interactions. When our customers’ aesthetic and emotional needs are met, this is surface delight. These are the types of features that make you lean over and show your friend or colleague, laugh out loud, or simply utter… whoa!
We need a combination of the trust that comes from good UX and the likability that comes from emotional inclusion to build products that customers cherish.
Likability + trust = products people love
Emotional Resonance & Delight System principles
Emotional Resonance is the way we describe a system saturation that is achieved when all of the user’s needs are fully satisfied and the likability scores are above average. It is the culmination of likability meeting trust. Emotional resonance is attained through an accumulation of deep delight (functional, reliable, usable) and surface delight (pleasurable and cool) throughout a system. This is an integrated and comprehensive level of customer fulfillment.
Res·o·nance
The reinforcement of sound by the synchronous vibration of a neighboring object.
Our concept of Emotional Resonance is supported by a variety of animation studies as well as a collection of motion design and delight principles. We will explore a few of our delight principles after a brief summary of the psychological research on the halo effect that strongly influenced this concept of Emotional Resonance.
The halo effect in UX design
The halo effect is a psychological phenomenon first discovered in the 1920s by the research psychologist Edward L. Thorndike. He found that an initial negative trait found in participants could be carried through and applied to other unrelated aspects of an individual. They say “you only get one chance to make a first impression,” and the halo effect would agree this is true. While Thorndike’s work was investigating negative attributes, the halo effect works with the affirmative as well. One positive aspect can start to affect other areas of the experience — a certain fruit company from Cupertino comes to mind. Apple has created such positive brand loyalty that we forgive them for some of their less-than-elegant choices. They have harnessed the mother of all halo effects with their products and offerings.
The positive halo effect supports Emotional Resonance in our app experiences as well. If we start to generate these positive emotional experiences effectively and consistently throughout the app, we get a halo effect in the other areas of the app that supports the overall system saturation.
Here are a few of the Delight System principles that we are developing in support of Emotional Resonance:
Anticipation & randomization
Using the same animations, rewards, or celebrations over and over again quickly become stale, creating diminishing returns. We are currently working on an engineering randomization dev package that can be easily added to any animated content. You just point to a set of animations and they cycle. Keep it fresh, people!
Surprise
Building in unexpected rewards and celebration delighters has shown to increase likability. Again, we need to be judicious here so that rewards are infrequent enough that they remain special. The above principle of randomness is especially important here too.
Reduction of perceptive durations
In my research at Microsoft on the effects of using delighters and motion design within loading experiences, we discovered a 20–80% reduction in the perception of time when using animation. Each loading environment was 10 seconds long, and the loaders using animations were perceptively reduced to 2–3 seconds. Emotional inclusion can even change our customers’ perception of time!
Singularities & distinctiveness
Animations, motion design, and aesthetic incorporations are a great way to create uniqueness in our solutions. Don’t be afraid to get out there and create a distinctive style and personality for your app.
Lottie & Storybook make it possible
Lottie
The concepts are solid, the research is sound, the ideas are engaging, but it’s absolutely meaningless if you can’t get any of it into your app. I have spent an inordinate amount of time in the industry trying to get motion into many different products and platforms, and it can be challenging. The key is that the more efficient we can make it for our engineering partners, the more delight, motion design, and emotional inclusion we can get into our products. For some types of delight such as animated icons and illustrations, we now have an amazing solution… Lottie.
Our wonderful engineering and designer friends over at AirBnB have created a beautiful solution in Lottie. You can read all about it on their site, but the primary advantage is that it takes all the animation responsibility from the engineers and places it in the hands of design. They have also made the implementation of the infrastructure into your code base a breeze. Additionally, they are totally responsive, full color, hot-swappable, and incredibly small file sizes. Our design system team engineer, Eric Puchmayr, has also discovered a way to control the color within Lottie JSON files. He is able to programmatically switch colors for state changes in our global navigation buttons that have animated icons. You simply give the fill attribute in After Effects a unique name, and you can call that name from within the code and assign specific brand colors.
We have a variety of different product areas within our core app, and while they don’t all share the same code base for their application logic, they do share and reuse a large number of front-end components. To make this easier for everyone, Luca Ronca, who works on the Hootsuite engineering team responsible for our Social Selling product, created a Lottie wrapper that could be reused by the other teams. This basically allows Lottie to be a front-end component and makes it much easier for all of our front-end engineers to add Lottie to their product features.
Storybook
Another tool we are using is Storybook. Storybook describes themselves as “…an open-source tool for building UI components and pages in isolation. It streamlines UI development, testing and documentation.”
For our delight system, Storybook allows us the ability to provide animated icons and illustrations in the same way that common controls are provided to engineering. Engineers can easily call animated content from within our codebase. Our randomization framework is built right in and can be used for any icon or illustration array. We are creating categorized libraries of these icons and illustrations so that if a designer wants to add an animated celebration illustration to the end of a complex flow, the engineer can call up the celebration array and easily pick one from the list.
Both Lottie and Storybook have added in enough efficiency that we are seeing a real groundswell of emotional inclusion here at Hootsuite, and our use of delighters in our UX is starting to get a foothold.
The wrap up
At Hootsuite we believe that productivity doesn’t have to take itself so seriously. Yes, you need a solid foundation of UX (nothing exists without it), but there must be more than that. Our customers deserve more than that, our customers want more than that, and our customers are more successful when our app is more than just a highly functional tool.
I’ll leave you with one of my favorite design quotes from architect Buckminster Fuller:
When I am working on a problem, I never think about beauty; but when I have finished, if the solution is not beautiful, I know it is wrong.
_Buckminster Fuller
Don’t be afraid to make it beautiful, Champions.
Hey, we’re hiring a ton of designers and engineers. If you’re interested in shaping the future of emotional inclusion in UX, we’d love to chat. Check out all our open jobs at the Hootsuite Career site!
