Role: Front-end Development, Usability Testing
Timeline: 12-month collaborative effort across UX and Engineering teams
Tools: HTML, CSS, JavaScript
Fuze Design System: Creating Cohesion at Scale
Narrative: Creating a consistent experience across multiple applications with an improved design system.
The Challenge
The primary challenge was addressing critical issues that impacted the user experience for both internal and external users. Additionally, maintaining brand consistency and improving the efficiency of the product life cycle were key hurdles that needed to be overcome.
Before & After
Key insights
Consistency
Existing products each had a distinct look and feel. Inconsistencies were common across products, sometimes even within the same application causing confusion and a disruptive user experience.
Efficiency
The absence of standardized design/coding patterns, predefined components, or guidelines for developers to follow resulted in inefficiencies. From a product development life cycle, this led to redundant efforts for each new project, a lack of a common design direction, prolonged iterations, and delayed updates. Overall, this hampered the general agility in the product life cycle.
Brand identity and user trust
The lack of a cohesive look and feel across products contributed to diminishing our brand identity and hurting the connection users had with our product.
Scalability
The absence of a structured approach to the UX/UI increased the difficulties in scaling our products and adapting to the future needs of our users.
Approach
To address critical user experience challenges, a clear approach was outlined. This started with in-depth research, followed by stages of design, prototyping, and user testing. The goal was to deliver a comprehensive and user-centered solution that improved both internal and external experiences.
Research
The research phase involved a detailed review of all applications to identify recurring components shared across them. The focus was on standardizing these elements to create a more cohesive user experience. Heuristic evaluations were also conducted to ensure consistency in typography, iconography, and color patterns, establishing a unified visual language.
Design & Prototyping
Collaborating with designers, an extensive icon library and coding patterns were developed to ensure seamless implementation. Themes based on CSS color patterns were also crafted to enable future updates. Flexible layouts were introduced to accommodate different screen sizes, and reusable coding patterns were implemented to enhance efficiency. A working HTML prototype was developed to test, iterate, and refine designs without affecting the core application.
Usability Testing
Usability testing was conducted first internally, then with external users, to validate the design system's consistency and accessibility. These tests focused on ease of implementation and clarity of coding patterns and layouts, ensuring that the system addressed the needs of both developers and end users.
Outcome
The new UX design system significantly improved user experience and workflow efficiency. The creation of a layered CSS structure, standard fonts, icons, and behaviors contributed to consistency across products. Written and visual guidelines empowered developers, while a flexible testing environment streamlined the integration of new UI features. The improvements enhanced scalability, user confidence, and brand identity, earning positive feedback from both customers and developers. The prototype remains a valuable tool for training new developers and testing customizations.
( This example is a recreated version based on a layout I worked on while at an enterprise insurance software company. It reflects the structure and UX patterns I helped define. )