PayzoBooks

A smart accounting & financial management dashboard for small businesses.

PayzoBooks is a SaaS-based accounting and finance management platform that helps small and medium-sized businesses manage invoices, bills, expenses, taxes, and subscriptions through a modern and easy-to-use interface.

I worked as a UI/UX Designer + Frontend Developer (Angular).
My responsibility was to design the entire product in Figma and Photoshop, and convert those designs into Angular UI components using HTML, SCSS, and TypeScript (without API integration).

Project Overview

My Role & Responsibilities

UI/UX Design

• Designed full product UI in Figma

• Created dashboard, login, onboarding, subscription pages

• Built invoice, bill, VAT, import flow, and settings screens

• Designed color themes, light/dark mode, typography, spacing, icons

Frontend Development (Angular)

• Converted all designs into pixel-perfect Angular components

• Developed responsive layouts using SCSS

• Created reusable UI components (cards, tables, forms, menus)

• Implemented TypeScript logic for:

  • Conditional UI rendering

  • Dynamic sidebar menu toggle

  • Dark/light theme switching

  • Form validations & interactive form fields

  • Multi-step processes (e.g., import workflow)

  • Routing & component structure

• Added animations, hover states & micro-interactions

• Implemented custom color accent selection

• Designed and coded entire navigation architecture (sidebar + navbar)

Problem Statement

Small businesses often struggle with accounting software due to:

• Cluttered layouts

• Complicated workflows

• Outdated UI

• Lack of personalization

• Unclear navigation for many accounting modules

PayzoBooks needed a modern, clean, organized interface that keeps financial data readable and easy to manage.

The Solution

I created a visually clear and structured interface focused on simplicity and usability.

UX Improvements

• Organized sidebar with clean categorization

• Card-based dashboard for quick insights

• Compact invoice/bill forms with structured fields

• Modern charts for cash flow and expenses

• Simplified onboarding flow

• 3-step import process (Configure → Map → Preview)

• Exclusive theme and color customization

Frontend Solutions

• Modular Angular components

• TypeScript-driven dynamic behaviors

• Reusable SCSS components

• Fully responsive layouts

• Smooth transitions and hover effects

Core Interfaces & Modules

Visual overview of the primary screens, covering dashboard, billing, invoices, imports, and theme customization.