Octopart makes tools for electrical engineers and supply chain professionals. It is the fastest, most comprehensive, and most reliable source of information for millions of electronic components. Electrical engineers and supply chain professionals rely on Octopart for complete information on parts’ technical specs, pricing, and availability, as well as use the BOM tool to organize and buy lists of parts.


I worked as a one-woman product team for about two years: product management, design, and user research. I developed, led, and executed all UX research efforts, speaking to engineers, hobbyists, and purchasing professionals, as well as designed search and search results, part detail pages, the BOM tool, and static pages to ensure a consistent, polished experience for all visitors. I also set project timelines and priorities, balanced business goals and user needs, and developed product strategy.

Major accomplishment: search redesign

When I joined Octopart in January 2016, the site looked like this:

In particular, the filters on the left side there were dense, hard to use, confusing, and no one used them (people were going to Digi-Key, finding a precise part number, and then coming to Octopart). The data backed it up; an incredibly small number of searches had a filter applied. In addition, we heard that people were sometimes confused about capital i (I) and the number 1, which looked very similar in this font (Roboto).

When I left Octopart in November 2017, the site looked like this:

The filters are now at the top, where they’re easily found. But, more importantly, the list is trimmed down to what we think is most important, so that you no longer have to wade through a lot of dropdowns to find relevant filters. All the other filters are hidden in the +Filters dropdown, so that they’re accessible, but don’t clutter the screen. (The list of filters wraps responsively). The data back it up too; as of November 2017, the number of searches with a filter applied was around 24%. For a full, in-depth account of the changes, check out Octopart’s blog post on the topic (written by yours truly).
Plus, we changed the font to Lato, where capital I’s and 1’s are much more distinct from one another. This was an important change because most part numbers are mixed letter and number combinations.

Core Personas

When I joined Octopart and throughout my time there, I did extensive domain research to fully understand the problem space. I formed a complete understanding of people’s workflows, problems, and processes. Using this information, I formed Octopart’s two main personas.

Electrical engineer

  • Use Digi-Key or lab parts lists to choose a part for a project, then come to Octopart with the part number to confirm availability.
  • “If I see 2 or 3 of the largest distributors have a high quantity in stock, I know I’m golden.”
  • Do not order parts for manufacturing, they create Bills of Material (or BOMs, essentially a list of parts for a particular project) and send these BOMs to supply chain professionals.

Supply chain professional

  • Have received a BOM and a batch size, and are in charge of purchasing
  • Focused on current availability and price
  • Need to balance part price (with discounts at bulk quantities), shipping time, and shipping cost
  • Aren’t concerned about the particular technical specs of any part

Case Study: Alternate Parts Recommendations


  • 27% of all search events display just 1 result
  • High risk of that part being too expensive, not enough quantity in stock, or no longer being manufactured
  • Opportunity to help engineers find parts to use instead of the search result
  • Opportunity to help engineers discover similar parts
  • Supply chain professionals need to go back to engineers if a part is unavailable, engineers are the one choosing an alternative. Focus on engineers

Competitive Analysis
I looked at 22 examples on other sites. Here are some of them:

Key observations:

  • Most retail sites have more than one “suggested products” section, and focus on high-quality images to differentiate products
  • Industry sites follow retail examples too closely, focusing too much on an image and not enough on technical specs. You necessarily tell the difference between two parts just by looking, you need the spec data.

Sketches and idea generation


  • Need to make sure the recommendations don’t look like more search results
  • Need to show how parts are different and why they may be worthy of consideration (price, similar specs, better availability)
  • Know that spec data is more important than pricing and availability information. How much price & availability information is enough, though?

Iteration 1: a few different ways to show alternates


Usability testing, round 1 key findings

  • The most important feature is to tell whether the part can really stand in for the original search result
  • The most basic price & availability information is fine

Iteration 2: refinements on ease of part comparison 


Usability testing, round 2 key findings

  • Spec values are more important to emphasize than the labels, which are often redundant
  • “I’ve been missing this but didn’t realize”
  • Table is “more traditional” and harder to read, harder to see groups. When you’re an engineer, you spend so long looking at technical tables that “you start to get table madness”. “Some people might prefer tables, just like some people might prefer versions of IE [internet explorer] that are 5 years old”.
  • Cards are definitely easier to read and compare, as long as the rows are still aligned

Iteration 3: further refinements into how data is displayed

Hunch: it’s better to attach the search result part’s technical specs to itself, rather than repeat the part in the recommendation section

Usability testing, round 3 key results
Key takeaway: my hunch is wrong, good to know! Now I know which direction to pursue instead.
Engineer #1:

  • I like this idea, similar parts are especially helpful for more complex parts
  • Ease of part comparison is most important, it’s hard to compare the recommendations with the search result in these
  • Tables make it easier to compare parts

Engineer #2:

  • “Such a good idea”
  • “This looks so good, really would be helpful”
  • Omitting the labels when possible is best for readability
  • Comparing recommendations with the search results was a little difficult, but “fine”

Iteration 4: little tweaks and visual design


Iteration 5
This was a fully functional prototype in collaboration with a software engineer. It used live data.

Live link

Measurement of success

  • Number of distributor clicks from our recommendations
  • Bounce rate on pages with only one result, before and after


  • Observe how people are interacting with the recommendations
  • Conversations with engineers


Future versions

  • On the part detail page (example)
  • On search results with 2 or 3 results
  • A version that would be helpful to supply chain professionals


Comments are closed.