Research
At the beginning of this project, I acquired the following feedback from Fundamental NGX stakeholders:
The Problem
Using the insights provided, I indentified several problem areas:
- The Side Navigation
- Selecting an npm should the first step in the side navigation journey. However, because the button is placed outside the side navigation, users may explore the side navigation first, or miss the button completely.
- The side navigation has all elements open, and allows users to close as they see fit. This is not necessarily a problem, but rather an opportunity to explore.
- The Searchbar
- The current implementation of the searchbar only filters content from the selected npm. Therefore, if a user searches "button", they will not be able to locate buttons in any other package.
- The Workspace Controls (Right contents)
- The content density button shows how various components can be displayed. However, this button currently impacts both the workplace content as well as the side navigation, making the placement confusing.
- Likewise, the other buttons influence the side navigation and/or the working space. This gives an opportunity to better label or group controls.
Design Decisions
The Side Navigation
The final side navigation enables users to easily select their npm of choice. I explored several design options, such as including a back arrow for reselecting or using a dropdown menu within the component. Ultimately, we decided to keep all npms visible on screen, with vertical scrolling within the buttons. This approach provided two navigation paths: selecting a new npm while another remains open or closing the current npm and selecting a new one using the default variant.
In terms of visuals, I used the primary color sparingly, aligning with industry standards to reduce visual stimulation. I also implemented distinct case styles for npm selection, parent items, and child items, ensuring accessibility for users, including those with various forms of color blindness.
The Searchbar
In the problem section of this page, I presented an example where a user searching for a button would only see results within the current npm. To improve this, I adapted the component to include a filter option, allowing users to deselect any npm if they're looking for something more specific. Now, when a user performs a search, they’ll see all relevant results along with a badge identifying which npm package each item belongs to. If the user wants to filter out npms during their search, they can select the 'everything' button, which allows them to deselect npms as needed.
UI Design System
Material Design
The UI Design System for the Fundamental NGX rebrand uses Google's Material Design. I used this system to design an interface built on elevations, preventing accessibility issues.
Theming
The images below show the flexibility of my design across light and dark modes.
Final Notes
In this project, I learned to:
- Utilize industry standards
- "Good design is as little design as possible" - Dieter Rams
A key part of UI design is balancing creativity with widely recognized affordances. I focused on creating unique components that aligned with industry standards by gathering examples from different platforms and drawing natural connections.
As a naturally bright and bubbly designer, it has always been a challenge for me to limit the use of vibrant colors. In this project, I pushed myself to embrace neutral tones, allowing the affordances (via spacing, typefaces, and hierarchies) to guide the user.