Login Enterprise Design System
2024-2025
For Login VSI product, Login Enterprise, I created their first-ever design system to modernize an outdated enterprise platform and improve consistency across the product. The goal was to replace a fragmented UI with a scalable, cohesive system that could support future growth. I introduced design tokens for light and dark themes, built reusable components, and documented everything in Figma and then Storybook. The result was a clearer, more efficient product experience and a smoother workflow between design and development.
The challenge
Before the redesign, Login Enterprise lacked a unified design language. The platform’s interface was built from inconsistent UI patterns and ad-hoc styles, leading to inefficiencies in development, visual inconsistency, and a fragmented user experience. With the product’s roadmap demanding faster iteration and a more polished, cohesive interface, the challenge was to create a scalable, reusable design system that could serve as a single source of truth for designers and developers.
The project required conducting user interviews, hosting workshops with the team, and translating technical workflows into clear, streamlined interfaces. It also involved creating a scalable design system to unify the platform’s look and feel, and working closely with stakeholders to ensure the new design aligned with both business goals and technical realities.
The process
Step 1
Discovery and UI/UX Audit
I audited the existing UI to map inconsistencies in color, spacing, typography, and components.
Step 2
Sessions with management
I met with product owners and stakeholders to understand business priorities, long-term product vision, and brand expectation. We defined goals for the system: visual consistency, better developer handoff, faster UI development, and support for light/dark themes.
Step 3
Brainstorm session with the Development team
I hosted a workshop about design systems to explain why it is necessary to introduce it and to discuss technical requirements (for example theming and tokens) and possibilities for the launching methods.
Step 3
Design
I started off with determining color palette compliant with WCAG 2.2, spacing and typography that would suit the enterprise character and data dense nature of the application. I proceeded with assembling the components.
Step 4
Testing
I presented some flows redesigned according to the new system to selected users of the platform in order to gather feedback and identify pain points. I used Maze for that.
Step 6
Handoff
I provided the documentation with descriptions, instructions and semantic components in Figma and collaborated with the developers for the Storybook development.
The result
The new system sped up the delivery from both front-end and design side and gave the platform modern and trustworthy look.