Delightful Loading Screens: Enhancing User Experience for BigBasket

6 min readMay 10, 2024

BigBasket, India’s largest online food and grocery store, is committed to providing a seamless shopping experience for its customers. With a vast catalog of over 18,000 products from more than 1,000 brands, BigBasket aims to revolutionize the way people shop for everyday essentials. However, one area for improvement identified is the loading screens within the app, with an average screen transition time of 1.2 seconds. This case study delves into the design process undertaken to infuse delight into BigBasket’s loading screens, focusing on engaging users and enhancing their overall app experience.

Research and Scope:

The design process began with comprehensive research to understand user expectations and industry best practices. Primary research involved surveying 30 users to gather insights into their shopping habits and preferences. Additionally, secondary research was conducted to explore loading screen design principles and examples from other successful apps.

Platform and Delivery Types:

BigBasket operates primarily through its mobile app and website, offering various delivery options to cater to diverse customer needs. These include standard delivery, express delivery, scheduled delivery, on-demand delivery, contactless delivery, and subscription delivery.

Persona:

The primary persona for BigBasket is the busy urban consumer seeking convenience and time-saving solutions for grocery shopping. This persona values speed, availability, and reliability in the shopping experience.

Problem Statement:

Despite BigBasket’s efficient service, loading screens within the app have been identified as an opportunity for improvement. The goal is to transform these screens into moments of delight, engaging users and minimizing any perception of slowness in the app experience.

Primary Research Insights:

Conducted a Google Form survey circulated among users, garnering 30 responses.

Usage Frequency: Most users utilize online grocery delivery services at least twice weekly, indicating high demand.
Choice Factors: Speed and product availability heavily influence user selection, emphasizing the importance of efficiency.
Repeat Orders: 80% of customers reorder, indicating satisfaction and loyalty.
Loading Time Preference: Users prefer shorter loading times for a seamless experience.
Engagement Desire: Users seek engaging content during wait times, such as tips or visuals.

Secondary Research Insights:

Conducted an extensive review of industry literature, articles, and online resources related to loading screen design principles and examples.

Loading Feedback Best Practices: Research outlines key practices including upfront loading, appropriate screen space usage, and time prediction.
Skeletal vs. Visual Loading Screens: Comparison of skeletal (functional) and visual (aesthetic) loading screens reveals differing emphasis on efficiency versus engagement.
Effective Loading Screen Examples: Analysis of apps like Feedly and YouTube provides insights into setting expectations and providing engaging content during loading.

Pain Points:

Users prefer shorter loading times.
Only a small percentage of users notice loading screens or delays.
Most users would appreciate tips/facts or visuals on loading screens.

Insights on Competitors:

Competitors like Dunzo, Swiggy Instamart, Grofers, and JioMart offer similar services but vary in their approach to loading screen design. Some focus on functionality (skeletal loading screens), while others prioritize aesthetics (visual loading screens).

Microinteractions and Microanimations Integration:

Integrated principles of microinteractions and microanimations into the design of loading screens, leveraging real-world examples and best practices. These subtle animations and interactive moments offer visual feedback, enhance usability, and create delightful experiences for users during wait times. By prioritizing intuitive design and engaging interactions, the loading screens aim to improve the overall user experience, making the process more efficient and enjoyable for customers.

Brand Assets Collection:

Gathered relevant brand assets including logos, color palettes, typography, and imagery from BigBasket’s brand guidelines to ensure consistency and alignment with the company’s visual identity throughout the loading screen design process.

Approach:

To address the challenge, I explored two main approaches: skeletal loading screens and visual loading screens. Skeletal loading screens prioritize functionality and efficiency, ensuring essential app components are loaded swiftly. Visual loading screens, on the other hand, aim to create a visually engaging experience, utilizing animations, artwork, or informative content to keep users entertained during loading times.

Design Process:

Research and Scope:

Conducted primary and secondary research to understand user preferences and loading screen design principles.
Defined the scope of the project, focusing on enhancing loading screens to improve user engagement.

2. Information Architecture:

Mapped out the user flow and journey within the app, identifying key touchpoints where loading screens occur.

3. Persona and Pain Points:

Developed a primary persona based on user research, highlighting their goals, challenges, and pain points related to the shopping experience.
Identified the need to address user preferences for shorter loading times and provide engaging content during wait times.

4. Moodboarding and Visual Iterations:

Created mood boards to explore visual styles and themes that align with BigBasket’s brand identity and user preferences.
Generated visual iterations of loading screens, experimenting with different layouts, animations, and content types.

5. Wireframes and Mockups:

Designed paper wireframes and digital mockups to visualize the placement of loading screens within the app interface.
Iterated on wireframes based on feedback from stakeholders and usability testing.

6. Prototype and Final Design:

Developed a prototype showcasing both skeletal and visual loading screen designs.
Conducted user testing to evaluate the effectiveness of each approach in enhancing user experience.
Incorporated feedback to refine the final design, balancing functionality and aesthetics to create delightful loading screens.

Conclusion:

By incorporating user feedback and industry best practices, BigBasket successfully transformed its loading screens into moments of delight for users. Whether through efficient skeletal loading screens or visually engaging designs, the aim is to keep users engaged and informed while minimizing any perception of slowness in the app experience. Moving forward, BigBasket remains committed to enhancing user experience through continuous iteration and innovation.