Bringing modern web design & no-code to life
Design System Integration: Pandle UI Redesign
Redesign of Pandle user interface — Pandle is an accounting software for small businesses, used to manage invoices, clients, and other tasks to keep the business up-to-date and organised. This project aimed to enhance the user interface, improve interactions, and establish a user-friendly and organised design system
Note: I can share full Figma working file for reference the during interview process.
Here was the challenge – The interface lacked clarity, with the mobile version equally confusing. A survey revealed that users struggled with links, stats, payments, and navigation. I addressed these issues by streamlining the web app and revamping the mobile version for a better user experience.
Solution: The new dashboard gives users a clear overview of their financial activities, making it easier to navigate tasks related to their accounts while tracking important dates and deadlines. It also provides a brief summary of sales, invoices, and expenses, allowing users to quickly gauge their financial health.
Design system - component properties
I've incorporated a set of reusable components into the Pandle's design system to create a consistent look across the platform. These range from atomic elements like buttons to complex components, forming the foundational building blocks of a unified design language.
I also implemented shared design patterns to address common challenges in accounting software, offering standardised solutions. These guidelines, carefully outlined, help design and development teams maintain coherence and consistency across Pandle's interface.
Pandle's DLS (Design Language System) contains primitives, components, and elements.
• Primitives: high-level system patterns, i.e. color, typography, shapes, etc.
• Components: containers of system patterns, i.e. cards, modules
• Elements: parts of the system that cannot be further broken down, i.e. control inputs, labels
Foundational values and accessibility
In developing Pandle's design system, I prioritised core values that aim for both visual unity and inclusivity, like icons dimensions, fonts, colours... For example, the carefully chosen primitive colours set the tone, providing a distinct and accessible palette. My commitment to accessibility extends to following strict A11y contrast guidelines, ensuring a seamless experience for users of all abilities.
