Loading animations
Loading animations
Loading animations
I integrated movement into the user engagement process in this project with GE Appliances. Upon examining the oven platform, loading screens emerged as an appealing opportunity to enhance with dynamic interactions. These screens also functioned as an extra touchpoint for reinforcing brand identity and displaying each brand's unique traits during user wait times.
Name
Loading Animations
Client
GE Appliances
Collaborators
UX Designers & Developers
Role
Motion Systems
Motion Design
Architecture
UX Design
Animations to reflect GE's brands
Loading animation reflects the brand marks of the significant brand under the GE Appliances umbrella
Multiple States
Multiple loadings to convey meaningful feedback to the user
Works across platforms
Using Lottie as a framework for the animations meant they could be across different platforms and still be performant
I integrated movement into the user engagement process in this project with GE Appliances. Upon examining the oven platform, loading screens emerged as an appealing opportunity to enhance with dynamic interactions. These screens also functioned as an extra touchpoint for reinforcing brand identity and displaying each brand's unique traits during user wait times.
Name
Loading Animations
Client
GE Appliances
Collaborators
UX Designers & Developers
Role
Motion Systems
Motion Design
Architecture
UX Design
Animations to reflect GE's brands
Loading animation reflects the brand marks of the significant brand under the GE Appliances umbrella
Multiple States
Multiple loadings to convey meaningful feedback to the user
Works across platforms
Using Lottie as a framework for the animations meant they could be across different platforms and still be performant
I integrated movement into the user engagement process in this project with GE Appliances. Upon examining the oven platform, loading screens emerged as an appealing opportunity to enhance with dynamic interactions. These screens also functioned as an extra touchpoint for reinforcing brand identity and displaying each brand's unique traits during user wait times.
Name
Loading Animations
Client
GE Appliances
Collaborators
UX Designers & Developers
Role
Motion Systems
Motion Design
Information Architecture
UX Design
Animations to reflect GE's brands
Loading animation reflects the brand marks of the significant brand under the GE Appliances umbrella
Multiple States
Multiple loadings to convey meaningful feedback to the user
Works across platforms
Using Lottie as a framework for the animations meant they could be across different platforms and still be performant
Case Study
Case Study
Case Study
Background
When I was thinking about incorporating motion into the design at GEA, I wanted something that would make sense to add a touch of elegance and interactivity. I also wanted the interaction to have a sense of meaning and purpose behind it and not just be present as eye candy.
One of the areas that popped out during my initial analysis was the wait time when users had to complete specific tasks on the device (A smart home appliance in this case). I felt these wait times warranted enough reason to build and deploy animated microinteractions to add a layer of user excitement and brand awareness.
4-5 sec
Waiting time for WiFi Authentication
6-9 sec
Waiting time for Account Creation
30+ sec
Waiting time for Software Updates
Background
When I was thinking about incorporating motion into the design at GEA, I wanted something that would make sense to add a touch of elegance and interactivity. I also wanted the interaction to have a sense of meaning and purpose behind it and not just be present as eye candy.
One of the areas that popped out during my initial analysis was the wait time when users had to complete specific tasks on the device (A smart home appliance in this case). I felt these wait times warranted enough reason to build and deploy animated microinteractions to add a layer of user excitement and brand awareness.
4-5 sec
Waiting time for WiFi Authentication
6-9 sec
Waiting time for Account Creation
30+ sec
Waiting time for Software Updates
Background
When I was thinking about incorporating motion into the design at GEA, I wanted something that would make sense to add a touch of elegance and interactivity. I also wanted the interaction to have a sense of meaning and purpose behind it and not just be present as eye candy.
One of the areas that popped out during my initial analysis was the wait time when users had to complete specific tasks on the device (A smart home appliance in this case). I felt these wait times warranted enough reason to build and deploy animated microinteractions to add a layer of user excitement and brand awareness.
4-5 sec
Waiting time for WiFi Authentication
6-9 sec
Waiting time for Account Creation
30+ sec
Waiting time for Software Updates
Brand Expression
Other than a place for these animations to belong, they also needed to convey a message that reflected the overall message each of the brands under GEA were trying to convey. The overarching themes conveying what the brands communicate with the animation are the driving forces for the look and feel of the animated microinteractions.
Elegance and Simplicity
Stylish with a Personality
Energetic and Eye-Catching
Brand Expression
Other than a place for these animations to belong, they also needed to convey a message that reflected the overall message each of the brands under GEA were trying to convey. The overarching themes conveying what the brands communicate with the animation are the driving forces for the look and feel of the animated microinteractions.
Elegance and Simplicity
Stylish with a Personality
Energetic and Eye-Catching
Brand Expression
Other than a place for these animations to belong, they also needed to convey a message that reflected the overall message each of the brands under GEA were trying to convey. The overarching themes conveying what the brands communicate with the animation are the driving forces for the look and feel of the animated microinteractions.
Elegance and Simplicity
Stylish with a Personality
Energetic and Eye-Catching
“How could I improve user delight during periods of inactivity and waiting?"
“How could I improve user delight during periods of inactivity and waiting?"
“How could I improve user delight during periods of inactivity and waiting?"
Exploring Ideas
With a general direction to aim toward, the first step was to come up with a bunch of ideas. In this phase, many different styles were explored.
The main themes were trying to incorporate the ideas of food and drink into the loading animation as the appliances were kitchen based. Couple of the ideas involved using a food tem and using it as a proxy for a progress bar. Other ideas explored included abstract loading bars that could be branded with different colors. A type of connection based animation, in this case looking at bluettoth, was also studied to see if it could fit within the system. Lastly, exploration with componenets present in the appliances was tried out, in this case a knob was used to indicate progress of sorts.
Exploring Ideas
With a general direction to aim toward, the first step was to come up with a bunch of ideas. In this phase, many different styles were explored.
The main themes were trying to incorporate the ideas of food and drink into the loading animation as the appliances were kitchen based. Couple of the ideas involved using a food tem and using it as a proxy for a progress bar. Other ideas explored included abstract loading bars that could be branded with different colors. A type of connection based animation, in this case looking at bluettoth, was also studied to see if it could fit within the system. Lastly, exploration with componenets present in the appliances was tried out, in this case a knob was used to indicate progress of sorts.
Exploring Ideas
With a general direction to aim toward, the first step was to come up with a bunch of ideas. In this phase, many different styles were explored.
The main themes were trying to incorporate the ideas of food and drink into the loading animation as the appliances were kitchen based. Couple of the ideas involved using a food tem and using it as a proxy for a progress bar. Other ideas explored included abstract loading bars that could be branded with different colors. A type of connection based animation, in this case looking at bluettoth, was also studied to see if it could fit within the system. Lastly, exploration with componenets present in the appliances was tried out, in this case a knob was used to indicate progress of sorts.
Monogram
For the Monogram brand, the logo was a distinct mark of its own. I wanted to leverage the mark to indicate a state of progress and to finish it off with a sense of luxury. This animation takes the outline of the mark as its progress state and makes the complete mark visible when the loading is complete.
Cafe
For Cafe, I wanted to find a way to help showcase the stylistic aspect of the brand. One of the ways we wanted to accomplish this was to play with gradients and include the brands signature spark with it. This animation draws insipration from the sublte motions of a lava lamp to move the brand gradients around within the spark container, while having the conatiner breathe as a whole. This added a layer of warmth and personality to the loading animation.
GE Profile
For GE Profile, the aim was showcase the marriage of the traditional to technology. I wanted to come up with an approach to leverage the brands voice of tech savviness and pairing it with an energetic approach. I wanted to juxtapose the idea of the knob on an appliance with a loading ring on a computer. By combining the physical with digital, we felt that we would be doing justice to the brands vision and direction.
Monogram
For the Monogram brand, the logo was a distinct mark of its own. I wanted to leverage the mark to indicate a state of progress and to finish it off with a sense of luxury. This animation takes the outline of the mark as its progress state and makes the complete mark visible when the loading is complete.
Cafe
For Cafe, I wanted to find a way to help showcase the stylistic aspect of the brand. One of the ways we wanted to accomplish this was to play with gradients and include the brands signature spark with it. This animation draws insipration from the sublte motions of a lava lamp to move the brand gradients around within the spark container, while having the conatiner breathe as a whole. This added a layer of warmth and personality to the loading animation.
GE Profile
For GE Profile, the aim was showcase the marriage of the traditional to technology. I wanted to come up with an approach to leverage the brands voice of tech savviness and pairing it with an energetic approach. I wanted to juxtapose the idea of the knob on an appliance with a loading ring on a computer. By combining the physical with digital, we felt that we would be doing justice to the brands vision and direction.
Monogram
For the Monogram brand, the logo was a distinct mark of its own. I wanted to leverage the mark to indicate a state of progress and to finish it off with a sense of luxury. This animation takes the outline of the mark as its progress state and makes the complete mark visible when the loading is complete.
Cafe
For Cafe, I wanted to find a way to help showcase the stylistic aspect of the brand. One of the ways we wanted to accomplish this was to play with gradients and include the brands signature spark with it. This animation draws insipration from the sublte motions of a lava lamp to move the brand gradients around within the spark container, while having the conatiner breathe as a whole. This added a layer of warmth and personality to the loading animation.
GE Profile
For GE Profile, the aim was showcase the marriage of the traditional to technology. I wanted to come up with an approach to leverage the brands voice of tech savviness and pairing it with an energetic approach. I wanted to juxtapose the idea of the knob on an appliance with a loading ring on a computer. By combining the physical with digital, we felt that we would be doing justice to the brands vision and direction.
Finding a Framework
In the conversation of future-proofing our designs, we wanted a system that could not only work across multiple appliances but also on mobile devices and desktop computers if need arose. We also needed a framework that could keep the designer's vision intact without having the animation redone in CSS by the developers.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images. Lottie uses animation data exported as JSON files from After Effects.
Finding a Framework
In the conversation of future-proofing our designs, we wanted a system that could not only work across multiple appliances but also on mobile devices and desktop computers if need arose. We also needed a framework that could keep the designer's vision intact without having the animation redone in CSS by the developers.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images. Lottie uses animation data exported as JSON files from After Effects.
Finding a Framework
In the conversation of future-proofing our designs, we wanted a system that could not only work across multiple appliances but also on mobile devices and desktop computers if need arose. We also needed a framework that could keep the designer's vision intact without having the animation redone in CSS by the developers.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images. Lottie uses animation data exported as JSON files from After Effects.
Animation Structure
Once I had an established set of ideas on the look, I wanted to explore the inner working of the animation. I wanted to figure out how the animation would be structured and broken down.
The animation was structured in three distinct states, each built to seamlessly flow from one into the other. The first state was the Animate In state where the animation would animate in. This was done to have a state from which the animation would load into rather than abruptly appear out of nowhere. This state would last from 500ms to about 1s.
The next and the most important state would be the Looping state. This state would last 4s on the base version and can be played repeatedly as long as the loading duration occurs.
The final state is the finishing state and this is split into two separate states depending on the result of the loading scenario. If the task, which requires the loading screen, was successful then the animation transitions into the Success state. If the task encountered an error, the animation would then transition into the Failure state. These would be the final resting states of the animation and there will be no motion after this.
Animation Structure
Once I had an established set of ideas on the look, I wanted to explore the inner working of the animation. I wanted to figure out how the animation would be structured and broken down.
The animation was structured in three distinct states, each built to seamlessly flow from one into the other. The first state was the Animate In state where the animation would animate in. This was done to have a state from which the animation would load into rather than abruptly appear out of nowhere. This state would last from 500ms to about 1s.
The next and the most important state would be the Looping state. This state would last 4s on the base version and can be played repeatedly as long as the loading duration occurs.
The final state is the finishing state and this is split into two separate states depending on the result of the loading scenario. If the task, which requires the loading screen, was successful then the animation transitions into the Success state. If the task encountered an error, the animation would then transition into the Failure state. These would be the final resting states of the animation and there will be no motion after this.
Animation Structure
Once I had an established set of ideas on the look, I wanted to explore the inner working of the animation. I wanted to figure out how the animation would be structured and broken down.
The animation was structured in three distinct states, each built to seamlessly flow from one into the other. The first state was the Animate In state where the animation would animate in. This was done to have a state from which the animation would load into rather than abruptly appear out of nowhere. This state would last from 500ms to about 1s.
The next and the most important state would be the Looping state. This state would last 4s on the base version and can be played repeatedly as long as the loading duration occurs.
The final state is the finishing state and this is split into two separate states depending on the result of the loading scenario. If the task, which requires the loading screen, was successful then the animation transitions into the Success state. If the task encountered an error, the animation would then transition into the Failure state. These would be the final resting states of the animation and there will be no motion after this.
Easing Emotions
Along with the duration and structure of the animation, the emotions conveyed by the animation had to match the brand voice conveyed earlier. A way to impart personality and emotion to the animation was to vary their easing curves.
Easing determines the acceleration of the transition between a starting frame and its destination by using a mathematical function. The representation of the function is called the Easing Curve.
Easing Emotions
Along with the duration and structure of the animation, the emotions conveyed by the animation had to match the brand voice conveyed earlier. A way to impart personality and emotion to the animation was to vary their easing curves.
Easing determines the acceleration of the transition between a starting frame and its destination by using a mathematical function. The representation of the function is called the Easing Curve.
Easing Emotions
Along with the duration and structure of the animation, the emotions conveyed by the animation had to match the brand voice conveyed earlier. A way to impart personality and emotion to the animation was to vary their easing curves.
Easing determines the acceleration of the transition between a starting frame and its destination by using a mathematical function. The representation of the function is called the Easing Curve.
Monogram
To bring a feel of luxury and sophistication for Monogram, the easing was set to easeInOutCubic. With this easing the animation started off slow, accelerates in the middle and slows down as it reaches the end. I used this easing on the individual pieces of the wordmark and staggered their entry to invoke a sharp feeling of style.
Cafe
For Cafe, the easing was set to easeInOutSine. This easuing is similar to the one used before but the accelaration in the middle section is not as fast as the one in easeInOutCubic. This easing property was used to let the spark breathe in and out subtly. I also used this in the moving gradient present within the spark. This easing offered a good balance between making the gradient not accelerate rapidly versus the movement being too linear.
GE Profile
For GE Profile, we used the easing setting of easeInOutQuint. This easing was used to inject a sense of energy into the animation. This easing operates similar to the previous ones but its acceleration period in the middle is sped up and shortened. This conveys a large rate of change in a small time span which is pereceived to have a higher energy level compared to more slower approaches of the other two. This setting was used in the rotation state of the animation.
Monogram
To bring a feel of luxury and sophistication for Monogram, the easing was set to easeInOutCubic. With this easing the animation started off slow, accelerates in the middle and slows down as it reaches the end. I used this easing on the individual pieces of the wordmark and staggered their entry to invoke a sharp feeling of style.
Cafe
For Cafe, the easing was set to easeInOutSine. This easuing is similar to the one used before but the accelaration in the middle section is not as fast as the one in easeInOutCubic. This easing property was used to let the spark breathe in and out subtly. I also used this in the moving gradient present within the spark. This easing offered a good balance between making the gradient not accelerate rapidly versus the movement being too linear.
GE Profile
For GE Profile, we used the easing setting of easeInOutQuint. This easing was used to inject a sense of energy into the animation. This easing operates similar to the previous ones but its acceleration period in the middle is sped up and shortened. This conveys a large rate of change in a small time span which is pereceived to have a higher energy level compared to more slower approaches of the other two. This setting was used in the rotation state of the animation.
Monogram
To bring a feel of luxury and sophistication for Monogram, the easing was set to easeInOutCubic. With this easing the animation started off slow, accelerates in the middle and slows down as it reaches the end. I used this easing on the individual pieces of the wordmark and staggered their entry to invoke a sharp feeling of style.
Cafe
For Cafe, the easing was set to easeInOutSine. This easuing is similar to the one used before but the accelaration in the middle section is not as fast as the one in easeInOutCubic. This easing property was used to let the spark breathe in and out subtly. I also used this in the moving gradient present within the spark. This easing offered a good balance between making the gradient not accelerate rapidly versus the movement being too linear.
GE Profile
For GE Profile, we used the easing setting of easeInOutQuint. This easing was used to inject a sense of energy into the animation. This easing operates similar to the previous ones but its acceleration period in the middle is sped up and shortened. This conveys a large rate of change in a small time span which is pereceived to have a higher energy level compared to more slower approaches of the other two. This setting was used in the rotation state of the animation.
The Human Element
One of the points of emphasis while building the animation was to have a clear demarcation of what would convey the idea of success and failure without having any verbal cues. To understand these concept, inspiration was taken from how people nod to communicate yes and no.
The Human Element
One of the points of emphasis while building the animation was to have a clear demarcation of what would convey the idea of success and failure without having any verbal cues. To understand these concept, inspiration was taken from how people nod to communicate yes and no.
The Human Element
One of the points of emphasis while building the animation was to have a clear demarcation of what would convey the idea of success and failure without having any verbal cues. To understand these concept, inspiration was taken from how people nod to communicate yes and no.
Success State
For the success state, a up and and down action similar to a nod would convey the idea of the action being successful. This would almost mimic the UI nodding and telling the user that their action has been completed.
Failure State
For the failure state, a side to side movement was employed similar to a side to side nod on a human head that would indicate a "No" or an unsuccessful action.
Success State
For the success state, a up and and down action similar to a nod would convey the idea of the action being successful. This would almost mimic the UI nodding and telling the user that their action has been completed.
Failure State
For the failure state, a side to side movement was employed similar to a side to side nod on a human head that would indicate a "No" or an unsuccessful action.
Success State
For the success state, a up and and down action similar to a nod would convey the idea of the action being successful. This would almost mimic the UI nodding and telling the user that their action has been completed.
Failure State
For the failure state, a side to side movement was employed similar to a side to side nod on a human head that would indicate a "No" or an unsuccessful action.
Putting the peices together
After taking all the talked about ideas and distilling them together, these are the final direction of the loading animations that were designed. Each animation shows all the states in which they were built and how they would display.
Putting the peices together
After taking all the talked about ideas and distilling them together, these are the final direction of the loading animations that were designed. Each animation shows all the states in which they were built and how they would display.
Putting the peices together
After taking all the talked about ideas and distilling them together, these are the final direction of the loading animations that were designed. Each animation shows all the states in which they were built and how they would display.
Monogram Loading Success State
Monogram Loading Failure State
Monogram Loading Success State
Monogram Loading Failure State
Monogram Loading Success State
Monogram Loading Failure State
Cafe Loading Success State
Cafe Loading Failure State
Cafe Loading Success State
Cafe Loading Failure State
Cafe Loading Success State
Cafe Loading Failure State
GE Profile Loading Success State
GE Profile Loading Failure State
GE Profile Loading Success State
GE Profile Loading Failure State
GE Profile Loading Success State
GE Profile Loading Failure State
Impacts
Lottie animations demonstrate remarkable efficiency in file size without compromising on quality. For instance, the average size of a GIF for the Cafe Loader, which employed a few gradients, was 2.4 MB, while the Lottie equivalent was a mere 29 KB—a 98.8% reduction in file size! This drastic reduction eases the load on bandwidth and improves performance. This is particularly impactful for user experience, as the lighter files ensure faster loading times, contributing to a smoother and more responsive interface. This efficiency becomes even more critical for mobile users, who often deal with data constraints and varying network speeds.
With Lottie, designers can export a single file that can scale across different resolutions, ensuring visual consistency across devices. This contrasts with GIFs, which may require multiple files to accommodate different screen sizes, as shown in the image, where 16 files were needed for various resolutions.
Impacts
Lottie animations demonstrate remarkable efficiency in file size without compromising on quality. For instance, the average size of a GIF for the Cafe Loader, which employed a few gradients, was 2.4 MB, while the Lottie equivalent was a mere 29 KB—a 98.8% reduction in file size! This drastic reduction eases the load on bandwidth and improves performance. This is particularly impactful for user experience, as the lighter files ensure faster loading times, contributing to a smoother and more responsive interface. This efficiency becomes even more critical for mobile users, who often deal with data constraints and varying network speeds.
With Lottie, designers can export a single file that can scale across different resolutions, ensuring visual consistency across devices. This contrasts with GIFs, which may require multiple files to accommodate different screen sizes, as shown in the image, where 16 files were needed for various resolutions.
Impacts
Lottie animations demonstrate remarkable efficiency in file size without compromising on quality. For instance, the average size of a GIF for the Cafe Loader, which employed a few gradients, was 2.4 MB, while the Lottie equivalent was a mere 29 KB—a 98.8% reduction in file size! This drastic reduction eases the load on bandwidth and improves performance. This is particularly impactful for user experience, as the lighter files ensure faster loading times, contributing to a smoother and more responsive interface. This efficiency becomes even more critical for mobile users, who often deal with data constraints and varying network speeds.
With Lottie, designers can export a single file that can scale across different resolutions, ensuring visual consistency across devices. This contrasts with GIFs, which may require multiple files to accommodate different screen sizes, as shown in the image, where 16 files were needed for various resolutions.
Learnings
This was a very fun project to work on! A lot was learned throughout the project. I felt the ability to understand how motion was employed and dig behind the scenes to justify its usage as a functional component rather than just for aesthetic reasons was one of the key lessons learned from this project. Interfacing with developers and other designers to iron out kinks and convey the ideas of animation in words was a challenge that was fun to overcome.
I can definitely say that this project was the one that pushed me over the line in admitting my love for motion and the process behind its incorporation.
Learnings
This was a very fun project to work on! A lot was learned throughout the project. I felt the ability to understand how motion was employed and dig behind the scenes to justify its usage as a functional component rather than just for aesthetic reasons was one of the key lessons learned from this project. Interfacing with developers and other designers to iron out kinks and convey the ideas of animation in words was a challenge that was fun to overcome.
I can definitely say that this project was the one that pushed me over the line in admitting my love for motion and the process behind its incorporation.
Learnings
This was a very fun project to work on! A lot was learned throughout the project. I felt the ability to understand how motion was employed and dig behind the scenes to justify its usage as a functional component rather than just for aesthetic reasons was one of the key lessons learned from this project. Interfacing with developers and other designers to iron out kinks and convey the ideas of animation in words was a challenge that was fun to overcome.
I can definitely say that this project was the one that pushed me over the line in admitting my love for motion and the process behind its incorporation.