Background
KEMET, a global leader in Electronic Component Manufacturing, stands out with its advanced tools for component search. Its Gold Standard offerings are one of its core values, instilling confidence in its existing and potential customers.
Component Edge was born out of an idea to expose a search algorithm that had product-owner knowledge about the 30+ Million Part Numbers IntelliData had in its database. Most of the data was on our parent company, KEMET Electronics, but it has a myriad of other Manufacturers, too.
Objectives
The goal of Component Edge was to put easy-to-use tools into the hands of Engineers so KEMET can be designed into their projects. If the application is hard to use, doesn’t meet their needs, or lacks vital information, they may opt to use another manufacturer.
In order to do it right, we hired Axial, a (now defunct) UI/UX Design agency.
Challenges
We spent hours discussing the role of this digital product in KEMET’s portfolio and its business use, as well as creating personas for our users. They took inspiration from various sources. The Data Team at KEMET organized the data into a tree-like structure, and only the ends of the branches had leaves (or data), which, in this case, were part numbers. How do you display this in a way that makes sense?
What about KEMET’s advanced search tool? Users could put in a junky input, and the algorithm would tweak and adjust it, matching the tokens in the search and giving back valuable data.
There is also a need for inventory information, Datasheets, Series-level Datasheets, and many more challenges that need solutions.
Solutions
The Component Edge app starts in a neutral state, ready for the user to drill down, explore further details, or search. At the decision of key stakeholders, I made the search bar prominent and persistent so users could find what they were looking for at any time.
Users can filter using an amalgamation of parameters at each category level.
The data is dense. Axial provided some ways we could display some of this data. Still, our time together was limited, and shortly after we worked very late to launch the first version, I was put in charge of brainstorming further improvements and features.
I took inspiration from how popular US Retailer Kohl’s implemented filter tokens on their Website. Users needed a way to understand what filters were active, and when searching, the tool would pull out parameters to filter the data. So, we needed a way to highlight that in action.
Another feature was comparison, but not just comparison of Part Number Parameters; you could also compare your search parameters. For inspiration, I visited tech retailers to find out how they compared products. The styling was completely dynamic; the application would check each row of data for variations and add color to that row if things were different. The color difference dramatically improves the usability of the comparison feature.
Results
This application was so popular among engineers who wanted to design KEMET into their projects that we added many more features, improvements, and performance enhancements during my time at KEMET.
Lessons Learned
- Axial provided a design language that was clean, crisp, and communicative. I benefitted greatly from seeing that process and doing the same thing with every project.
- Intelligently labeling parts of the UI can significantly improve User Experience. No amount of getting cute with animations and other flashy things can replace the effectiveness of clear labeling.
- High-quality pictures make a digital product look polished. Initially, in Component Edge, we had Photographs of components, which were good, but next to CAD renderings of components, it cheapened the overall aesthetic. The business made an investment to do CAD renderings for all the categories—which there were many.