Swiggy Moments - Gifting Happiness
Feature - Sending Swiggy order as a gift
This is a really cool feature that enables you to send your favorite food from Swiggy as a gift to someone and customize it based on any occasion.
Task
As part of the design, I was asked to include micro-interactions and motion to delight and enhance the experience of receiving a virtual gift.
The Flow
(Screenshots from the original design)
Recipient side of the flow.
Receiving a link to a gift that opens the Moments feature in the Swiggy app when clicked. The User must then tap the screen to reveal the surprise. Once tapped, the next screen will appear with the following information:
-
Video message from the sender
-
Information about delivery
The Experience
So, first and foremost, I attempted to comprehend the psychology of receiving and opening gifts. Because this was the most important aspect of the Swiggy gifting experience, I did some research on receiving and opening gifts.
The Gift Experience
The moment of unpacking is the tipping point. Excitement builds until the product arrives, reaches a peak when we open it, and then slowly fades away with time.
First, there is anticipation and intrigue. What is in the link? There is speculation in the user's brain about what might or might not be it. Moreover, there is the reveal, which is the payoff.
The viewer gets a reward from seeing what is inside and seeing how it matches up against whatever they expected it to be.
“So there is a neurological reward, big or small, but that completion of knowledge or the understanding is part of what drives it. People are just curious.”
As a result, the second screen will serve as the big reveal, feeding the user's excitement and curiosity as they open the gift.
Sensory Experience
Opening a gift stimulates the senses of the user. All senses would be curious and try to pick up small cues to identify the gift inside the packaging. As part of the experience, I wanted to incorporate some techniques to stimulate the senses and enhance the user's experience. To help with this, I added sounds and haptic feedback to the experience and some intriguing animation.
Animation Inspiration on Pinterest
I went on Pinterest to look for ideas and inspiration for a motion design for a gift and curated some of them.
You can open this link to check out the curation: https://pin.it/2enfLK8
Storyboarding the idea
I sat down to storyboard my idea after looking at a lot of animations and videos of people opening gifts.
Building the screens for the Animation
I rebuilt the screens from the ground up and prepared all of the Aftereffects layers. To quickly export all of my layers from Figma to After Effects, I use a Google plugin called AEUX.
Assets for Animation
Exporting the screens to After Effects
Animating on After Effects
Results
My inspiration for the animation and the sounds mostly comes from Games. Games these days are moving towards the freemium models where they have in-game purchases. To get the users excited about receiving goodies from the game, they visually enhance how the goodies are delivered and received by the user. This was a significant source of inspiration for me to try to replicate the same model here.
Check out this video from Subway Surfers. This shows a user opening multiple mystery boxes to receive a mystery gift.
The animation is made keeping the timeframe in mind, Too slow? users will think the application is lagging. Too fast? the experience will be spoiled because the user will not be able to notice and comprehend what is happening. So I have specifically curated this timed sequence to delight the users without them noticing that a magical animation is taking place.
Shine
Before the user taps to open
Blinking stars and light streaks serve as a gentle reminder to the user and also tell them something precious is waiting inside.
The first nudge is to get the user excited about the surprise and to make the screen look lively.
Video Link
(Look at the bow)
Reveal & Excite
Once the user taps to open
The gift opens to reveal the contents when the user taps on the screen. We take this experience a step further by including a party popper to commemorate the event or occasion for which the gift is being sent.
Full Video
Adding Sounds (Experiment)
I have added a Gift wrapper opening sound and a party popper. The gift wrapper sound is to accompany the opening animation and also give a feel of unwrapping something. The Party popper just acts as a supporting sound to the pop happening on the screen
As this is just a prototype, I have added the best audio I could find, But I would really like to work on this more as the audio adds a lot to the experience of opening the gift.
Retrospective
This is just a video prototype, It would be really easy to test it out if it was built into a mobile prototype and actual people tried using it. Testing this would give more insights into the Audio and Haptic feedback, As it was my first time incorporating these in a prototype and I am pretty confused about it.