PT. Fazz Capital Finance
Financial Technology
Full time
On-site
Mar 2019 - Oct 2020
PT. Fazz Capital Finance
Financial Technology
Full time
On-site
Mar 2019 - Oct 2020
The product work on defining and implementing a solid design process, creating a cohesive design system, and building a well-organized library to streamline workflows and ensure consistency across projects.
The business challenge I focus on driving team growth, expanding our product offerings, and enhancing functionality to better meet the needs of our users.
My role as a DesignOps professional, I focus on optimizing designer performance by offering guidance and support during team discussions. I also build strong partnerships with developers across iOS, Android, Flutter, and Web to establish clear contracts. My goal is to ensure a seamless and consistent design language across all platforms.
I created a design system to ensure clear communication with the team. How did I start? First, I needed to understand the company’s products and gather all the assets in Sketch App to build a new library. I reviewed all the product designs to understand the unique characteristics of each UI, while ensuring that the same assets were used consistently across the board.
Catalog Menu
All menu show
All menu show
Create Menu
Creating menu to adding the catalog
Creating menu to adding the catalog
Report
Recap of sale and shifting the employee
Transaction
History of transaction
Change Sellfazz to POST.
Change Sellfazz to POST.
Redesign the Fazz POS product, Sellfazz, into POST. Create the flow and standardize the design for the POST interface while using the design system. Before delivering the design to the team, it is tested with A/B testing to gather user feedback. The results from user testing show that the design makes it easier for users to manage their business operations, including product stock management, and streamlines the cashier system during transactions.
Redesign the Fazz POS product, Sellfazz, into POST. Create the flow and standardize the design for the POST interface while using the design system. Before delivering the design to the team, it is tested with A/B testing to gather user feedback. The results from user testing show that the design makes it easier for users to manage their business operations, including product stock management, and streamlines the cashier system during transactions.
https://design.fazzfinancial.com
https://design.fazzfinancial.com
Share the design system so everyone can contribute and collaborate on it.
Share the design system so everyone can contribute and collaborate on it.
Why a design system? Because design should be organized to deliver a seamless experience to users while reflecting the unique identity of the company.
Why a design system? Because design should be organized to deliver a seamless experience to users while reflecting the unique identity of the company.
UX Audit
UX Audit
Reviewing UX research documentation and conducting A/B testing on product components helps gather valuable insights into user behavior and preferences.
Reviewing UX research documentation and conducting A/B testing on product components helps gather valuable insights into user behavior and preferences.
PT. Fazz Capital Finance
Financial Technology
Full time
On-site
Mar 2019 - Oct 2020
Design System
Design System
Build Library
Build Library
I developed a comprehensive design system to ensure clear communication and consistency within the team. To get started, I familiarized myself with the company’s products and gathered existing assets from Sketch App to create a new library. I then analyzed the design characteristics of each product’s UI to identify common elements, ensuring consistency while still preserving the unique identity of each product.
I developed a comprehensive design system to ensure clear communication and consistency within the team. To get started, I familiarized myself with the company’s products and gathered existing assets from Sketch App to create a new library. I then analyzed the design characteristics of each product’s UI to identify common elements, ensuring consistency while still preserving the unique identity of each product.
I created a design system to ensure clear communication with the team. How did I start? First, I needed to understand the company’s products and gather all the assets in Sketch App to build a new library. I reviewed all the product designs to understand the unique characteristics of each UI, while ensuring that the same assets were used consistently across the board.
The product work on defining and implementing a solid design process, creating a cohesive design system, and building a well-organized library to streamline workflows and ensure consistency across projects.
The business challenge I focus on driving team growth, expanding our product offerings, and enhancing functionality to better meet the needs of our users.
My role as a DesignOps professional, I focus on optimizing designer performance by offering guidance and support during team discussions. I also build strong partnerships with developers across iOS, Android, Flutter, and Web to establish clear contracts. My goal is to ensure a seamless and consistent design language across all platforms.
Organize assets into two levels:
Atoms: The basic building blocks like buttons, icons, and other simple elements.
Composite: More complex elements made up of atoms, such as cards, bottom sheets, and similar components.
Organize assets into two levels:
Atoms: The basic building blocks like buttons, icons, and other simple elements.
Composite: More complex elements made up of atoms, such as cards, bottom sheets, and similar components.
Optimize existing components by addressing any issues, removing unused or unnecessary elements, and conducting research to clarify any ambiguous components. Create new components or UI elements when needed, guided by A/B testing results. Document and explain the findings from research and A/B testing for each component in the UT Board, serving as the foundation and reference for future use.
Optimize existing components by addressing any issues, removing unused or unnecessary elements, and conducting research to clarify any ambiguous components. Create new components or UI elements when needed, guided by A/B testing results. Document and explain the findings from research and A/B testing for each component in the UT Board, serving as the foundation and reference for future use.
Problem
The current library is disorganized, with each designer creating their own assets.
This inconsistency causes inefficiencies when designers need to create new components for specific use cases.
Many designers are unaware of existing components that could be reused, leading to unnecessary duplication of work.
Benefits
A well-designed system streamlines workflows, ensures consistency, and strengthens the product.
Faster development: Save time by reusing existing components.
Reduced complexity: Minimize confusion and ambiguity.
Stronger collaboration: Encourage consensus and alignment among designers.
The design system’s hierarchical structure offers clear guidance, making it easier for designers to select and use the right components for their specific use cases.
Centralized Visual Experience
It's not just about the interface; it's about the experience too. Using the right component for the right use case enhances the overall user experience.
Problem
The current library is disorganized, with each designer creating their own assets.
This inconsistency causes inefficiencies when designers need to create new components for specific use cases.
Many designers are unaware of existing components that could be reused, leading to unnecessary duplication of work.
Benefits
A well-designed system streamlines workflows, ensures consistency, and strengthens the product.
Faster development: Save time by reusing existing components.
Reduced complexity: Minimize confusion and ambiguity.
Stronger collaboration: Encourage consensus and alignment among designers.
The design system’s hierarchical structure offers clear guidance, making it easier for designers to select and use the right components for their specific use cases.
Centralized Visual Experience
It's not just about the interface; it's about the experience too. Using the right component for the right use case enhances the overall user experience.
Implement Design System
Implement Design System
Fazz Financial has successfully implemented a design system across its products, creating a centralized approach that promotes consistency, simplifies workflows, and improves the overall visual user experience.
Fazz Financial has successfully implemented a design system across its products, creating a centralized approach that promotes consistency, simplifies workflows, and improves the overall visual user experience.
Catalog
Select menu on catalog
Select menu on catalog
Payment
Input nominal to pay
Input nominal to pay
Payment Method
Select payment method
Select payment method
POST : Tablet Version
POST : Tablet Version
POST : Mobile Version
POST : Mobile Version
Implement Behavior
Implement Behavior
There are too many features in the Fazz product, specifically Payfazz as a PPOB (Payment Point of Sale Bank).
We introduced a "favorites" feature as a shortcut menu to help users easily find the most important options they need. Since most Payfazz users are merchants, this feature helps tailor the app to better suit their specific business needs.
There are too many features in the Fazz product, specifically Payfazz as a PPOB (Payment Point of Sale Bank).
We introduced a "favorites" feature as a shortcut menu to help users easily find the most important options they need. Since most Payfazz users are merchants, this feature helps tailor the app to better suit their specific business needs.
Select or Drag & Drop
The first screen view when the app is released or when the user hasn't selected any menu yet.
When the user selects Edit favorites, the menus in the Payfazz app will change, and an Add icon will appear, ready for the user to add items to their favorites menu.
When the user selects Edit favorites, the menus in the favorites section will change, and a Delete icon will appear, allowing the user to remove items from their favorites menu.
The first screen displays menus based on user data, with frequently used menus being recommended as favorites by the system. This is also how the screen looks once the user’s favorite menus are saved.
Select or Drag & Drop
The first screen view when the app is released or when the user hasn't selected any menu yet.
When the user selects Edit favorites, the menus in the Payfazz app will change, and an Add icon will appear, ready for the user to add items to their favorites menu.
When the user selects Edit favorites, the menus in the favorites section will change, and a Delete icon will appear, allowing the user to remove items from their favorites menu.
The first screen displays menus based on user data, with frequently used menus being recommended as favorites by the system. This is also how the screen looks once the user’s favorite menus are saved.
Report
Recap of sale and shifting the employee
Transaction
History of transaction
