Overview
NightShift is a speculative smart home control app designed for security and empowerment. Animation was used to support a seamless experience across multiple screens, including an animated logo preloader, welcome screen, and dynamic interfaces for adjusting lights and temperature controls. The project consisted of UI screens and storyboards designed in Adobe XD, and animations created in After Effects.
Design Approach
The project kicked off with competitive research and a storytelling exercise to land on key brand principles. The UI is simple, designed to be an easy, utilitarian tool for the home. There was a highly iterative back-and-forth between the UI phase and animation – testing ideas, integrating feedback, troubleshooting timing issues, and a minimal, seamless animation was adopted to mirror the app’s UI, with reduced animacy designed to cultivate a sense of safety.
Challenges
Coming from the static 2D design world, animation feels like time travel. Adding a third dimension to design is a completely new way of thinking. The first attempt at animating the yellow “Discover” popup on the home screen wasn’t very natural, but switching to Animation Composer effects made a huge improvement. The first iteration of the preloader screen had a simple fade in, and TextEvo was then used to refine a more fluid logo reveal.
Final Animation
The final animation includes a preloader animation with logo reveal, card-based screen transitions, and navigation between app screens. Polishing touches included separately animating the menu to seamlessly integrate icon transitions, and adding a simple tap gesture between screens.
Mockup attribution: Image by Freepik
Retro
Future developments for the app could introduce more moments of whimsy and delight, with opportunities to add movement to the on/off switches and experiment with color transitions. Refining the 3D screen transitions would ensure these effects are used more consistently, ideally in subtle ways that enhance user experience, rather than draw attention away from it. While the current project was designed to showcase specific tools, exploring features like dark mode could also provide new ways to improve accessibility for users, day or night.