— ROLE

UI/UX

Interaction Design

Lottie Animation

ShopSM is the online shopping platform of SM, the largest Mall chain in the Philippines. This app offers same-day grocery delivery, and its catalog has over a thousand authentic items from various brands.

On Scroll

Transition

One of the tasks given to me is to improve the user experience by tidying up the interactions. Making sure even the subtlest user interaction, such as a banner transitioning to scroll mode, would feel natural when triggered by gestures and should respond as intended by the users.

Floating

Chat Button

Based on our initial A/B testing, we found out that it is more convenient for users to access the help button when it’s always present on the screen. We originally designed it to be static, but as we go along and after a few more tests, we’ve noticed that some of the details in certain areas have been obstructed by it when the page is being scrolled.

To address the issue, I proposed the idea of a movable floating button that can be repositioned when it becomes an obstruction, with the condition that it should always be attracted to the side of the screen with a magnetic-like effect when it reaches the center area.

It is also designed not to exceed the reach of the average thumb.

Animated

Order Status

Banners

The main goal here is to provide a visual representation of each order status to the users. This also gives character to the app in a fun and playful manner without compromising the app’s loading time. This is made possible by using After Effects to export JSON files and executing the animation in the app using Lottie.