ShopeeFood

Finding Inspiration in Every Turn

From August 18, 2021, the Now app has appearred in a completely new look and rebranded as ShopeeFood - an app that serves customers in ordering and delivering food in big cities in Vietnam.

Highlights

UX writing improvement - Empty Pages in Now App

Animation in ShopeeFood

Animation in NowFood

Now Service - In-app Video Player and Dynamic Popup Banner

Video player design and Types of dynamic popup banners design

Shopee X Now Integration - Addressbook

Sharing of Integration challenges and how did I tackle it

Sharing -Now Delivery Privacy Issues

Design Talk Sharing in Shopee SG

ShopeeFood Motion Design

As our business become bigger, we have more use cases to handle, so it’s growing the inconsistency and increasing the maintenance cost.

And we don’t have the guidance regarding motion, so I propose to start to run a design system for motion design.

Some animations cases

Menu - Page turning effects

Attraction: Since some users feedback that they couldn't find the menu button. So I tried some animated effects on the component to catch the user's eyes, especially for the first time visit users, which can be a compelling and fun way to interact with the users.

Users will see the menu move in from the left side when entering this page, will see the effect after clicking on the menu button.

Option1: flat style without moving the book

Option2 : flat style and book is moving while page turning

Option3 : 3D style and book is moving while page turning (preferred option)

Ongoing order _ Finding driver animation

Video Player & Dynamic Popup Banner

Background: The CTR (Click through rate) on “Popup banner” is much higher than all the other banners, so the local ops&market wanna have more use cases on this banner type. We tried different combinations of dynamic banners. We hope that the operation team can have more modules that can be applied to advertising

Data findings: The animation on home circle buttons got higher CR. We considered to leverage this findings to make our landing popup "dynamics" so that we can gain more traffic from this component.

Period/ Jul, 2020 Designer/ Ethan (IA, guideline, wireframing, UI/UX logic and data research)

Dynamic Popup Banners

Data Analysis - Key findings

According to the CTR ranking (calculated by PV or by UV), we found that the section of the popup banner is much higher than other banners, which means we can put more effort into advertising from popup banner or explore more types/ideas on this banner.

Data Analysis

I calculated the percentage of how many users see the banners and click on it in the end. And analyzed the frequency of the usage of each banners. Then we can make sure if this design requirement worth us to do, and we also found out that the dynamic icon on home circle can increase the clicks rate, so we consider to leverage this findings to the banners design.

Challenges

Challenges:

We came up with several cases for applying this in-app video and dynamic ads. At first, we were not sure if the operations team will follow these design modules and afraid to display the unmatch and inconsistenct view for users.

How to solve:

So we provide the strict rules and guideline for logic and format. Hope the local market/ops teams could follow this rules.

Wireframes of each use cases