Back to list

Hawaiian Airlines

Hawaiian Airlines is Hawaii's largest and longest-serving airline, offering non-stop service to Hawaii from the U.S. mainland and international destinations. The company recently launched its first native mobile app.

Live Preview

2018

Timeline

Motion Designer

Role

Background

As a contract Product Designer through a software development agency, I joined the Hawaiian Airlines app development team to enhance the mobile user experience through sophisticated animations. Collaborating closely with an illustrator, I focused on animating detailed illustrations and converting them into efficient JSON files using Lottie. This technology allowed us to implement complex animations that were not only high-quality but also lightweight compared to traditional GIFs or videos, ensuring they did not slow down the app. My primary responsibility was to perfect these animations for use within the Xamarin framework, optimizing them to enhance the app’s loading experience without compromising performance. The successful integration of these animations made the app more engaging and enjoyable for users, reflecting the lively spirit of Hawaiian Airlines and is now available for download.

Goals

Animate a Unique Loading Animation

Develop a delightful and visually engaging loading animation that enhances user experience without slowing down the app, ensuring seamless performance and a positive first impression.

Animate a Unique Loading Animation

Develop a delightful and visually engaging loading animation that enhances user experience without slowing down the app, ensuring seamless performance and a positive first impression.

Animate a Unique Loading Animation

Develop a delightful and visually engaging loading animation that enhances user experience without slowing down the app, ensuring seamless performance and a positive first impression.

Solutions

Leveraging Lottie for Optimal Animation Performance

To tackle the challenge, I used Adobe After Effects to design and animate the "hammock guy." After perfecting the animation, it was exported as a JSON file, drastically reducing its size from 3 MB to just 130 KB. We utilized the Lottie library for seamless integration into the app, which allowed us to maintain a high-quality visual experience while ensuring the animation was lightweight and did not compromise the app’s performance.

Leveraging Lottie for Optimal Animation Performance

Tools

Adobe After Effects

Adobe Illustrator

Lottie

Conclusion

Working on this project was a career-changing experience for me. It pushed me to learn motion graphics and a new technology, Lottie, which helped me discover my passion for micro-interactions. These small but impactful design elements significantly improve user experiences. Collaborating closely with the engineering team to test and integrate new technologies taught me the importance of continually exploring innovative solutions. This approach not only speeds up development but also enhances the quality of the products we build. This project has profoundly influenced my professional path, reinforcing the value of embracing new technologies to create better and more efficient user interactions.