top of page
LOADING SPINNERS
Contextual, Festive and Default spinners
“Transforming wait times into fun moments within the Singapore Airlines app journey“
Team: 1 Designer, 2 Developers
Tools used: After Effects, Adobe Illustrator, Miro
Project Goal
This project aims to enhance user experience by introducing new loading spinner designs such as
-
​Contextual Spinners
-
Batik Spinner
-
Festive Spinners
Objectives and Key results
To deliver a unique brand experience
SQ Mobile UX introduces a new default spinner design, thoughtfully incorporating SIA's iconic batik pattern and brand-specific colors.
What is it serving :
It ensures brand consistency and also improves user experience by blending SIA's identity into every interaction seamlessly
To facilitate travel with timely and contextual information
Unlike conventional loading spinners, our new spinners provide context regarding user next steps.
What is it serving :
Each step will have a spinner that is related to the page's content and provide context for the next step in the user journey.
Contextual Spinners
To kickstart the project, the entire app flow was mapped out, and key areas where contextual spinners could be incorporated were identified.
Glassbox stats revealed that the booking flow was the most significant area of interaction for users, making it the primary focus for implementing contextual spinners.
Every stage of the booking flow was carefully considered, with the aim of immersing users in the travel experience. Various illustrations tailored to each stage of the process were created to evoke a sense of excitement and anticipation.
Booking Flow :
Search Results
User enters destination and clicks on search, leading to the search results page. A loading spinner appears during the transition.
Seat Selection and Payment
After entering passenger details, the user proceeds to either select seats or proceed to payment. Loading spinners accompany these actions.
Passenger details
User selects the flights, triggering another loading spinner before being directed to enter passenger details.

Payment Processing
Finally, during payment processing, another spinner appears to indicate the transaction's progress.
Spinner Creation Journey :
Search Results
Instead of using a magnifying glass searching flights, I chose to depict a flight moving through clouds. This represents the journey of searching for flights and suggests the smooth travel experience users can expect.
Survey Outcomes :
Feedback indicating that the blue flight doesn't resemble an SQ flight; instead, it gives the impression of being more like a toy.
Initial Design
Final Design
Passenger details
I illustrated various passenger profiles - families, individuals, couples, and infants - moving along a travellator, reflecting diversity.
Survey Outcomes :
For the animation of a man carrying baggage and walking, we received feedback expressing concern about depicting only a single man.
Initial Design
Final Design
bottom of page