Hanwha Solutions Qcells Division is a complete energy solutions provider worldwide that is actively engaged in various businesses across major global markets. This includes the production of solar cells and modules, energy storage system (ESS) power plant development, power retail, and solar financing.
In addition, Qcells offers Energy Management Software called Q.OMMAND. This platform consists of Q.OMMAND PRO, which facilitates easy and fast hardware installation and monitoring for installers, and Q.OMMAND HOME, which helps homeowners efficiently manage their energy. These platforms enable users to experience a sustainable energy independence.
With the goal of making energy more relatable to our users, the Q.OMMAND platform utilizes Lottie animations to visualize energy throughout its interface. Here, we’ll discuss how Q.OMMAND’s use of Lottie animations manages to capture the dynamic and living nature of energy.
Improving User Experience (UX) Data Visualization with Lottie Animations
The Q.OMMAND software provides a service for users to monitor the usage of renewable energy in their daily lives. To make the message concise and clear, there was a need for a tool that could convey complex energy information accurately and make it easily understandable. This is where Lottie animations prove crucial; it helps users clearly visualize the process, while explaining the invisible energy flows and delivering real-time data effectively. Here are our examples of simplifying complex informations using Lottie animations to enhance user experience.
Lottie Animation 1: Energy Flow
This screen allows customers with installed hardware at home to monitor the energy flow in real time. The illustrations of the house and hardware were created based on real forms. Meanwhile, the energy pathways reflect the actual installation locations and electrical circuit logic. The UX was improved by using Lottie animations to help users easily understand the energy flow.
Lottie Animation 2: Energy Validation
This screen helps installers verify the operation of the installed hardware and check if the energy is flowing correctly. The layout is kept simple, while Lottie animations make it easy to grasp the energy flow at a glance. Different colors were assigned to each product to allow users to distinguish between individual cases clearly, improving the UX.
Lottie Animation 3: Electric Vehicle (EV) Charging
By utilizing the transparency and gradient features, which are supported by the Lottie file format, we managed to showcase the difference in energy being transferred into the EV charger from solar and regular electricity. Applying different colors to the same Lottie animation allowed for significant UX improvements with minimal effort.
Lottie Animation 4: Battery
This screen displays the amount of electricity in the battery’s state of charge (SoC), as well as the battery's charging and discharging status. Instead of the typical static battery icon and percentage representation of SoC levels, we enhanced the UX by using dynamic Lottie animations to express the SoC, making it more intuitive.
We aimed to depict electricity as a fluid inspired by the analogy of comparing electricity to water, further expressing its flowing characteristics through the Lottie animation. Lottie, being a vector-based format, allowed us to implement these characteristics seamlessly in high quality graphics.
Digital UX for Global Users
Q.OMMAND is designed with global users in mind. Through effective use of Lottie animations on the screen, users can easily understand their current situation without having to rely on text. It provides visual indicators of status and real-time responses for tedious processes, ensuring users receive valid feedback. Various Lottie animations are used to clearly convey the progress during loading or downloading, enhancing the user experience and improving retention.
Why Choose Lottie: Benefits of Open Source
LottieFiles’ animations not only benefit users but also provide an efficient working environment for designers and developers. Utilizing the Lottie file format offers significant advantages in reducing working time and managing files compared to other formats.
Designer, Chung Ju-yeon: “The greatest advantage of using LottieFiles in our work is the reduced working time. One of the benefits of LottieFiles is that it speeds up animation design production with a new workflow involving LottieFiles for Figma, compared to the previous Adobe Illustration → Adobe AfterEffects workflow. Additionally, by utilizing various design open sources from LottieFiles, we could quickly apply Lottie animations to apps and websites, preview the final design of the files being worked on, and extract them to prevent rework.”
Developer, Lee Jun-young: “Using the same JSON format of Lottie for Android, iOS, and web is efficient as it allows one file to be applied across all OS. Despite the complexity of the energy flow animation, the lightweight Lottie format allowed it to run smoothly in the app without any stuttering.From an Android developer’s perspective, while other open-source libraries may not respond quickly to new UI development technologies like Compose, LottieFiles supported it immediately, making it easy to use."
Sustainable Energy Life with Qcells
Qcells Product Design department’s goal is to help people understand and familiarize energy as easily as possible. As part of building a differentiated user experience compared to competitors, Q.OMMAND actively utilizes Lottie animations that are well-suited for visualizing the characteristics of energy. In the future, Qcells aims to make users feel positive about living an energy-independent life, contributing to a sustainable life for humanity.
