Fundamental NGX is a component library built on SAP’s Fundamental Styles, used by designers and developers to build consistent, accessible applications. This project focused on redesigning the side navigation, search, and workspace components to improve usability, reduce friction, and create a cohesive, intuitive user experience.
I led the component redesign by conducting research on industry best practices and SAP guidelines to inform design decisions. I explored layout and color hierarchies to improve visual hierarchy, legibility, and user focus, while designing multiple component variants to cover different states, sizes, and contexts.
Individual
3 weeks
Users were selecting npm packages outside the navigation flow, leading to confusion and inefficiency.
The search functionality was limited to the selected npm, restricting users from finding components across different packages.
Controls affected both the workspace and side navigation, causing confusion regarding their functionality.
Initial stakeholder feedback highlighted the need for a more intuitive navigation system, a unified search experience, and clearer control placements. I conducted a competitive analysis of industry-leading component libraries to identify best practices and inform design decisions.
I explored various design options, including dropdown menus and back arrows, to facilitate npm selection. Ultimately, I opted for a design that kept all npm packages visible on screen with vertical scrolling, a llowing users to select a new npm while keeping another open or closing the current one for a fresh selection. Visual distinctions were made between npm selections, parent items, and child items to enhance accessibility.
To address the search limitations, I introduced a filter option that allowed users to deselect any npm, enabling a broader search scope. Each search result was tagged with its respective npm package, providing clear context to users.
I restructured the control placements to ensure they only affected the workspace content, eliminating any confusion with the side navigation. This change clarified the controls' functionalities and improved the overall user experience.
The redesign adhered to Google's Material Design principles, focusing on elevation and spacing to create a balanced and accessible interface.
I implemented theming to support both light and dark modes, ensuring visual consistency across different user preferences.
The redesigned components improved usability and consistency, providing a more intuitive and accessible experience. The scalable design system facilitated easier maintenance and future enhancements, aligning with the project’s goals and supporting rapid iteration.
The redesigned components improved usability, accessibility, and consistency across the platform. Users could navigate packages more efficiently, find components faster, and interact with workspace controls with confidence. Introducing component variants allowed multiple states, sizes, and use cases to be handled efficiently, reducing friction for both designers and developers. The redesign created a scalable system that could support future growth without compromising visual or functional consistency.
This project reinforced the importance of balancing usability, accessibility, and scalability in component system design. I refined my skills in variant-driven Figma design, accessibility compliance, and cross-functional collaboration. By focusing on clear hierarchies and intuitive interactions, the project delivered measurable improvements to the overall user experience and provided a foundation for future enhancements to the library.