PipeCandy
5 days
UX Designer / UI Designer

Overview

PipeCandy curates eCommerce website datasets. One of the key features of the flagship product is to provide intels for eCommerce websites. There was a need for a way to show these intels to users without having them open the product every time.

Solution

The chrome extension provides intels such as financials, traffic, tech stack, Twitter engagement, and more on eCommerce company websites. The tool can be used for market research and demand generation.

Key Features

Active and Inactive state

The code required some time to fetch information from the server once the user opens the website. The colored logo indicates that the data is available to view and the monocolored logo indicates the loading state.

Intels

The side tab provides easy navigation to switch between different categories. The user interface is minimal and provides key information such as revenue, traffic ranking, etc. There is also a feature to add notes on each new eCommerce website that is visited.

Design Process

Challenge

Chrome extension had its own limitations. In the app, there was plenty of space to layout things. However, the extension had to be smaller and also fit the contents of the app. To put together all the features in the app could compromise usability.

When I started thinking about overcoming the problem, one option that struck me was to use scrolls. However, I felt scroll may hide the contents, and the actual motive of building an extension - to ease the use and make the feature quickly available, would fail.

We decided to compromise some data to provide better usability by prioritizing and displaying only the key information.

Ideation

Taking the different types of data into account (numbers, characters), I ideated different layouts. I even took a step further ahead and designed an interactive chatbot and a natural language search engine. Due to time limitations and development constraints, I had to design a layout that was easy to develop. I settled with clickable tabs for insights on the left and their corresponding data on the right.

High Fidelity Screens

Reflection

Designing a chrome extension gave me exposure to design thinking under constrained environments. Jotting down the various types of data formats helped me foresee the complexities involved and helped in deciding the layout. Product data such as scroll depths, mouse clicks helped in removing the less important data, thus keeping the product scalable. I realized no feedback is more feedback and they are very essential in every step of the design process.

The PipeCandy Chrome plugin is special to me as it was my first ever Product Hunt launch and it was received among our customers.