App Splash Screens
Role
Animation, Designer
Duration
4 months
Tools
After Effects, Android Studio
Team
Creative Services, iOS & Android Developers
Overview
This initiative set out to enhance the loading experience for the Kroger app. I worked with teams on the tech side of our organization to design and build animations for our app loading screens. This work involved creating assets for both IOS and Android operating systems
-
Improved user experience: Native splash screens provide a more engaging and visually appealing experience for our customers.
-
Enhanced brand consistency: The seasonal and animated content aligns with our overall branding and messaging.
-
Competitive advantage: By offering a similar experience to our competitors, we can better attract and retain customers.
-
Feeling-based connection: Paired with the visual approach on home screen, it helps make the customer think and feel a certain way, which inspires them to take the action we want them to take next.
Objective
-
What possibilities and restrictions does each oporating system have in regards to loading screens.
-
What type and frequency of content do we want to feature?
-
What is the outcome of implementation? positive, negative, or neutral?
Key Insights to Find
Android & iOS Splash Screens
Android
Android Animation
The loading animations are a bit different on Android compared to iOS. Our current systems we work within as well as the operating systems limitations led us to create two different experiences for each operatign system. For android I created an animation of our "Fresh Cart" icon loading on screen.
Android Guidelines
Android splash screen elements must live within the center of the screen inside the 288dp image to the left. This differs from IOS which is why you see the Kroger Fresh Cart animation enter from off the screen. Android animations must also be an Animated Vector Drawable (XML) file which comes with limited animation options as well. So for Android we went with a different approach, and I created an XML animation of our Fresh Cart animating on screen.
Instead of having the animation go static after its initial animation I chose to utilize the "fruit" segments to act as a loading icon. For users whose app start time took longer than 3 seconds to load we didn't want them to think the experience had just froze. This extended segment loading animation communicated to them that the app was not frozen but still loading, and provided some fun movement for the logo.
iOS
iOS Animation
The iOS platform allowed us to more flexibility for creativity within the experience. For iOS we have the Korger fresh cart animate on to reveal the full Kroger logo. We were also able to be more expressive with themed creative messaging for holidays like Thanksgiving, Christmas, and exclusie offerings.
Holiday Testing Results
Below is a deeper dive into some of the research findings from the 2025 Christmas holiday seasonal campaign with the first introduction of the ios splash screen. Overall it was found that the addition of the splash screen led to increased engagement on the landing page.
Below, another 2024 Christmas campaign shows the hit-level performance on homepage following the app loading screen as compared to 2023 performance metrics.
Future
Next Steps
Overall we set out with a "do no harm" approach to this project to make sure we were not impeding on user experience and performance. We definitly surpassed our expectations and the release has turned out to be very succesful. Moving foreward there will be more testing doen to refine what creative goes out, hoe it impacts user behavior, and which holiday or programs perform the best.
Lets connect!
© 2023 by Name of Site. Created on Editor X.