Back
DESIGN SYSTEM
Bringing order to the chaos:
A pattern-based approach to UX consistency
Mewurk, an HRMS software, faced challenges in maintaining design consistency across its growing platform. This inconsistency led to a fragmented user experience, increased development time, and potential difficulties in future scalability. I led an initiative to address these issues by identifying and standardizing recurring design patterns and formalizing them into reusable patterns within our design system. By establishing clear guidelines and components, we sought to streamline the design process, improve development efficiency, and ultimately enhance user satisfaction.
My Role
As the UX Designer, I was responsible for analyzing the entire application, identifying design patterns, and creating standardized patterns that could be componentized and reused.
Goals
Consistency
Efficiency
Usability
Sustainability
Understanding the Challenges
The Mewurk application had evolved over time, with different designers and product managers contributing to its various modules. This resulted in:
Design Inconsistency
The involvement of different designers led to inconsistent UI elements across the application, including varying table styles and form layouts. This lack of visual cohesion disrupted the user experience and diminished the professional feel of the product.
Development Inefficiency
The absence of a standardized component library forced developers to repeatedly create similar components from scratch. This redundant work significantly increased development time and introduced opportunities for inconsistencies and bugs.
Fragmented User Experience
Without a unified design language, users encountered different interaction patterns and visual cues across modules. This fragmentation created a disjointed experience that felt less professional and required users to relearn interface patterns as they navigated through the application.
Scaling Limitations
As the application continued to grow, the lack of a systematic approach to design and development created increasingly complex maintenance challenges. This made scaling the application more difficult, time-consuming, and error-prone.
Design Process
The HRMS redesign process involved user research to identify pain points, evaluation of existing architecture, development of improved navigation and organization structures, creation of wireframes for visualization, usability testing with actual users, and iterative refinement based on feedback. This systematic approach delivered an intuitive and scalable information architecture that resolved usability issues while supporting future expansion.
Assessment
Classification
Standardization
Documentation
Collaboration
Evolution
Key Deliverables
Design Library
A categorized library of standardized design patterns and components in Figma.
Documentation
A comprehensive pattern guide in Confluence detailing usage rules, variations, and implementation specifications.
Components
A reusable component library developed in collaboration with the engineering team.
Outcome
Initial usability testing showed a 25% improvement in task completion time and a 20% reduction in user errors.
Enhanced User Experience
A unified and consistent user experience across the Mewurk application.
Quick delivery
Significant reduction in design and development time due to pattern reuse.
Improved Collaboration
Enhanced collaboration between designers and developers through clear documentation.
Design Legacy
A well-documented pattern library that serves as a valuable resource for future projects.
Conclusion
This project successfully established a foundation for design consistency within the Mewurk HRMS. By creating a reusable pattern library and guidelines, we empowered the team to deliver a more cohesive, efficient, and user-friendly experience. This initiative not only improved the current state of the application but also provided a valuable framework for future design and development efforts.