Enabling Consistency for
Cashbac Web Products.

An endeavour of initiating and embracing
Design System practice and Design Ops mindset.

Design System

UI Design

Design Ops

Front-End Dev

Fintech

Company

Cashbac
(PT Global Pay Indonesia)

My Role

UI/UX Designer​,
Front-End Developer

Platform

Web

Time Frame

2019 - 2020

Stack

Bootstrap CSS
Sass
Vue JS
Nuxt JS

Tools & App Used

Sketch App
InVision Prototype
InVision Design System Manager

Company

Cashbac (PT Global Pay Indonesia)

Time Frame

2019 - 2020

Summary (TL;DR)

Problem

Vending machine from PT Ultra Jaya need to be updated, to increase sales and enhance it engagement and interactivity among their customers. The old vending machine had several problems.

Solution

Overview

About Cashbac

Cashbac is an application developed by PT Global Pay Indonesia,  that allows customers to earn instant cashback from a transaction. For businesses, Cashbac acts as a marketing platform that helps our affiliated partners to reach the targeted customers. PT Global Pay Indonesia operates under SMDV, a digital venture arm under Sinarmas group and formerly known as Dimo (Digital Money) Group with products Uangku (acquired by Traveloka), PaybyQR™, HelloPay, and Flashiz.

Context

At the moment, as a UI/UX Designer for web based products in Cashbac, I found the 

Problem Statement

  • How might we improve all Cashbac products across all devices by creating a consistent visual language?
  • How might we reduce design churn by eliminating low risk UI design conversations?
  • How might we reveal the disparity between product platforms, websites, and mobile app?
  • How might we empower the team with resources that help drive a unified experience of using all Cashbac Products?

The Process

Discover

Design Audit

The first thing we did is auditing the existing web products of Cashbac

Component Prioritization

Component prioritization is very important to lay the foundation of the design system, to prioritize and decide which component that very important or less important.

Output

Foundations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Components

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Web Documentation.

Result and Takeaways

Results

1.25x

increase in productivity*

1200

hours given back to designers and developers*

+80

million money saved in Indonesian Rupiah (IDR)*

*From 7 contributors (3 designers + 2 developers + 2 QA), had saved +2 hours each day in a year 2019.

Lesson Learned

  • For designers, getting seat in the table and Design System buy-in is very important, so keep struggle even start small
  • Evangelizing about Design Ops mindset and Design System is better started sooner and since small team
  • Dedicated role of Design System manager is necessarily needed for better maintenance.
  • Alignment with Marketing Design team is a must, especially for branding and unified digital assets collaterals