FamilyMart App and Website

Bringing mobile payments to convenience stores

Personal project if FamilyMart embark in mobile payments

Client: FamilyMart
Services: Branding, UI/UX, Art Direction

What if convenience store goes cashless?

Introducing a new way to pay and get rewarded – with this approach FamilyMart created a cashless payment gateway to recruit loyal members. The idea included a responsive website and an iOS App that aligned with existing branding and bringing gamification to its users.

How to get users to go onboard?

To attract users to jump on board the reward system and the app, specially designed member cards preloaded with credit are sold. These cards are designed based on the food in FamilyMart which are well loved by the people.

Intuitive and simple UX

After settling on the best features, through different wireframes and interaction, the app is designed in a way that it simplify the payment process so that users will retain in the app.

Style guide

3 more colours complements the green and blue, which is the brand’s main colour.


The idea is incepted to make it easy for users to adopt mobile payments. There are 2 payment types: By credit or by points where any purchase in FamilyMart with the app earn them points that can be used again. It is a cycle that constantly rewards the users. The UX is easy to adopt, where they just need to swipe left or right to change payment methods, and reloading credit as well as the rewards garnered are all shown in the landing page.

Multipurpose Barcode

When users want to reload, pay or redeem rewards, a barcode will appear for the cashier to scan and proceed with any transaction.

Store Locator

The store locator works in a way that it curates the nearest stores based on distance. It is also integrated with Waze or Google Maps to that users can get the best directions straight.

Reward System

To encourage users to login everyday, a gamification element to fill up a soft serve ice cream is introduced. The end reward? A free sofuto! There are store purchases rewards where users can purchase food or drinks and get rewarded after the 10th purchase.

Desktop UI Design

A microsite is designed to promote the app and educate the users on going mobile. The main objective of this site is to to push downloads, answer any questions through an FAQ or for any enquiries related to the app.

FM – Landing
FM – Landing – 1
FM – Landing – 2
FM – Download again