Octopart

Octopart

Date: summer 2017
Categories: Product design, UI/UX design, information design, branding
Tools used: Adobe CS

View live site

Octopart is a popular search engine for electronic components. In summer 2017, Octopart approached me for help solving two branding and UX-related problems.

Octopart received feedback from their users, claiming that it was difficult to remember which website they were on while scrolling through search results. Octopart observed that there were few visual elements distinguishing their product from that of other tech companies. They asked me what I could do to make their product more visually distinctive, while staying in line with their branding guidelines.

I made several proposals. In the first one, I took advantage of the gear symbol that is used in their logo, and placed it as a watermark on the bottom of the page.

Ariel Cotton UI UX Design Octopart branding information design product design electronics components search engine

I then tried another watermark, using circuit traces this time.

Ariel Cotton UI UX Design Octopart branding information design product design electronics components search engine

In the next two proposals, I experimented with icon usage, delegating different engineering images as icons: a gear for Manufacturer Page, a wrench for Specs, a list for Descriptions, a resistor symbol for Reference Designs, and an IC for Companion Products.

Ariel Cotton UI UX Design Octopart branding information design product design electronics components search engine
Ariel Cotton UI UX Design Octopart branding information design product design electronics components search engine

I then produced proposals for solving the second problem. For some of Octopart’s users, the function of the website was not entirely clear. Many of them did not realize it was a search engine, and thought they were looking at one of the electronics manufacturers’ websites.

The first proposal entailed adding a sentence-long description to the index page summarizing Octopart’s product, and linking it to a more thorough description.

Ariel Cotton UI UX Design Octopart branding information design product design electronics components search engine

Then I experimented with adding a notice to the top of the search results page.

Ariel Cotton UI UX Design Octopart branding information design product design electronics components search engine
Ariel Cotton UI UX Design Octopart branding information design product design electronics components search engine

In the end, Octopart went with my last idea. For a while, they kept a white banner at the top of their page, linking to an explanation for the product.



Top