Web APP
Design System
UX/UI
B2B
Overview
As a product designer, I collaborated with a senior product designer on the Kato Design System, a project that merged creativity and precision to enhance the experience for commercial property professionals. Together, we developed a high-fidelity design system, standardizing UI components, typography, and interaction patterns across the platform, ensuring consistency.
My role focused on translating complex workflows into an intuitive, scalable framework, while benefiting from senior expertise to refine the balance of aesthetics and functionality. This teamwork resulted in a visually cohesive, user-centric PropTech solution that boosts efficiency and engagement in a competitive market.
Role
Product design
Timeline
2 Weeks
Context
At the beginning of 2023, we underwent a rebranding due to the merger and reorganisation of two companies. In line with the rebranding guidelines, the entire design team needed to completely iterate the existing product's thematic content and design system in preparation for the launch in a short period of time.
With a team of only two designers, not only did we need to get all the components of our small design system up to date and released as quickly as possible, but we also needed to be involved in the development and design of new projects and features. Jumping back and forth between overlapping projects seemed to become a routine, and new components could be tested in practice.
Principle
Top Rules
Simplicity
Easily navigate through the data-heavy, task-heavy environment.
Consistency
Stay within the same KATO branding language.
Usability
Intuitive, clear, straight forward, accessible and efficient.
Build with variants
Easier to find the component
Designers could find the components just in the variants and switch the same component faster and easier.
Efficient to manage the component
It will automatically revise components in all screens, if designers are using the components master piece.
Adaptive component
Adjustable and responsive
The WebApp components should responsive on any size of device. Designer don't need to change the entire component.
Process
Due to time constraints, another designer and I completed the design of the main components of the Web app within 1 month, including the colour palaces, main navigation bar and interactive buttons, etc. and updated them into the design system.
Tests
Testing components back to design file
· Less time spent on coding new components
· Handoff is a lot more efficient (less explanation needed to describe elements)
· Less back and forth during QA
· Coded design is a lot more consistent
