Summary
About CATAPA
CATAPA is a digital Payroll and HR Software as a Service (SaaS) that assists businesses in managing the complexity of payroll and employee-related tasks, by creating a more organized and efficient HR management environment, and fostering improved employee experiences.
My Role
Principal UI/UX Designer, Design Ops.
I led the transformation of complex B2B SaaS challenges into HR-focused solutions, delivering efficient workflows and a time-saving system with frictionless experience, with a customizable and modular system. Internally, I also streamlined the product design process and delivered high-quality prototypes and visuals.
Result
Simplified the internal team's workflow by building and maintaining a design system consisting of 60+ UI components and guides, that shortened design development cycles by approximately 75%.
Achieved a significant reduction of UI & interaction inconsistencies by 67.5%, marking a substantial improvement in product reliability and user experience.
UX kept 94% of tenants satisfied, reducing customer churn due to UX-related issues.
The Story
Understanding who our users are and their characteristics is crucial. It helps us align ideas and make strategic design decisions that deliver the greatest value to the business. At CATAPA, I create personas to gather insights about real target audiences, that are come from various job desks, challenges, motivation, and behavior, and find patterns found among them. It will enable UX to design with actual customers in mind.
Journey Through the User's Eyes
After knowing who our personas are, the customer journey helps us understand their stages, action, goals, pain points, emotions, and opportunities for improvement. At CATAPA, I create journey maps to align teams and optimize every touchpoint for the best experience.
Here is an example of a customer journey I created, starting from the discovery phase through to reporting.
Driving Impact at Every Stage of the Product Lifecycle
I initiated UX projects and supervised the end-to-end UX development process. Started from conducting UX audits, setting prioritization, timeline planning, defining UX requirements, performing research and competitive analysis, creating designs (including mockups and prototypes), delivering final outputs, ensuring quality assurance, preparing go-to-market content, and measuring UX performance.
As shown in this simple diagram below, it illustrates the process of creating a product in UX team.
Design across every stage of the product lifecycle
Strategic Plan
🔎 Problem Discovery: Find what really matters
I conduct research as part of the design development lifecycles by first seeking the root problem. During this phase, UX designers conduct user research and gather insights to understand user needs, goals, and pain points. The objective is to identify areas of opportunity that can deliver the most user-centric value, avoid selecting the wrong solution, explore various potential solutions, and be able to resolve other related problems in a holistic manner.
I collaborated with implementers and customer support teams to maintain a strong connection with users. From this experience, I observed users more closely and gained valuable insights into how they interact with CATAPA, identifying their behaviors, use cases, problems, challenges, and expectations.
Each month, UX gets the list of user assistance provided by Customer Support, and we automate the data classifying using the NotebookLM to generate tags, groupings, problem identifications, and alternative solutions.
Diagnose customer experience issues through UX
⭐ Prioritization: What to do when
The UX team analyzes these problem findings and puts them on the backlog list for further prioritization. Prioritization is based on several factors, including UX value, effort, company value and impacted customer.
In general, the problems frequently encountered by users in HR system are related to employees, government regulation, and company needs. Most of these problems are identified from the customer log and internal evaluations.
Critical challenges users face in the system
Define Goals & Analyze Problem
🎯 Objectives definition
The ultimate goal of UX at CATAPA is to simplify and streamline the management of complex payroll and mundane HR tasks, enhancing efficiency, accuracy, and overall effectiveness in HR operations.
This empowers companies to excel with strategies, and assists in automating repetitive processes, reducing manual errors, and facilitating better decision-making through data-driven insights.
📐 Metrics for Measurement
Various UX metrics, both quantitative and qualitative, are used to assess the success of a UX feature or product. I work on each feature that may have different metrics depending on its specific goals, but there are also general UX metrics that serve broader purposes, such as Task Success Rate, Number of Errors, Time on Task, Time/Steps Reduction, SEQ, and SUS. Additionally, I evaluate how the product supports users by collecting feedback on the feature.
🔑 Research
I gather insights to understand user needs, behaviors, and pain points by conducting user interviews, surveys, usability tests, desk research to collect qualitative and quantitative data. I also analyze competitors, review analytics, and synthesize findings to uncover patterns and opportunities. These insights help shape design decisions, ensuring that the final product aligns with user expectations and business goals.
Solution Creation
Equipped with rich and insightful problems and findings, these become a foundation for identifying opportunities to solve issues, leading to comprehensive and profound solutions, and creating a product that addresses the target audience’s needs effectively.
💡 Ideation
UX designers use the insights gained from research to generate ideas and concepts for the product. This phase involves actively brainstorming, sketching to explore various design possibilities and ideas, applying user-centered design principles, ensure that the solution solve the user problem, meet user expectations, and align with business goals. The result is documented in design requirement docs.
🎨 Execute the solution
Every UI/UX designer must create designs following the component standards and guidelines established in the design system, complete the design specifications, and provide mockups/prototypes that are accurate, clear, comprehensive, and represent the final product. I create all component requirements listed in the checklist and ensure that all designers follow the design creation procedures correctly. I simultaneously started to design the first prototype in Figma. This prototype aimed to validate the solution and facilitate discussions about the feature during the scheduled user interviews, and also help us to prioritize our resources.
The CATAPA interface with its features and modules.
✍️ Design Validation
Validate design decisions by conducting usability testing to observe users interacting with the interface, performing peer UX reviews, and gathering stakeholder feedback. These steps help identify potential issues early, enabling iterative improvements and minimizing the risk of costly rework later in the product lifecycle.
The UX designers collaborate closely with developers and other stakeholders to gain insights and feedback on the designs that have been created.
👨💻 Design Handoff & QA
UX works closely with development teams to ensure the design is implemented correctly with pixel-perfect precision and can be easily and quickly executed. This is achieved by ensuring all components align with standards guideline, covering all use cases, and providing complete information within the mockups. I also ensure the delivered solution meets the expected quality standards by actively participating in testing the features developed by the developers.
📃 Documentation
Documentation is carried out in parallel with the product development process. Design documentation is written within the UX domain, taking into account factors such as why a decision was made, the decision-making process, UI components, standards, user experience, and user journey.
Additionally, I also create go-to-market assets to be shared with customers via various channels, such as WhatsApp, LinkedIn, email, etc.
UX Design Documentation
Evaluation
📊 Analytics Data
After launch, UX designers collect user feedback and data to evaluate performance and find improvements. We analyze metrics, conduct surveys, and monitor feedback channels to understand user satisfaction. In collaboration with the Product Manager, we use Google Analytics to track the use of the feature.
🔍 Maintain and improve experience
The UX team at CATAPA conducts regular audits in terms of UI/UX, both comprehensively and on specific features and modules. This audit includes searching for areas of improvement, identifying inconsistencies, documenting standardization, seeking better user experiences, and updating to the latest trends.
All of this process is outlined in the SOP that I created to be followed by all design team members.
I initiated and assigned the UI inconsistency audit project in 2022, focusing on the payroll and employee modules, and successfully achieved a 67.5% reduction in UI and interaction inconsistencies, marking a significant improvement in product reliability and user experience.
💚 Good relationship with customer
Maintaining a good relationship with customers is the key. I want to show users that their experience matters, and consistently gather feedback to refine the products into what users really need. This not only benefits the product team but also builds trust and encourages loyalty, giving the business a competitive edge and ensuring lasting success. That's why, UX kept 94% of tenants satisfied, reducing customer churn due to UX-related issues.
Design System
📑 Organize and document the UI
CATAPA has a design system called Catalyst that encompasses the overall components, design tokens, variables, interactions, guidelines, rules, usage, anatomy, standardization, as well as the CSS styles of all UI/UX components in CATAPA. Catalyst plays a central and transformative role in the design and development process of the product. It is used across all interfaces within the CATAPA UI.
Catalyst simplified the internal team's workflow by building and maintaining a design system consisting of 60+ UI components and guides, that shortened design development cycles by approximately 75% compared from before using a standard design kit and variables in the design system.
Catalyst Design System: The foundation of components, styles, and guidelines.