Presto Sidebar

A browser extension for displaying vital ranking data to users managing items on Walmart.com

Task

Design a sidebar that will provide item managers insight into how their items are getting ranked on Walmart.com

This sidebar, present on search result pages, will be added as a new feature to an already existing tool currently used to manage data on item pages.

Original Ask

I was originally brought onto this project as a visual designer. I was asked to simply touch up the design in the above screen so that the feature could be shipped. However, I had some usability concerns with the above design:

  • Raw numeric values are difficult to interpret. What does "Rank Score = 0.48" mean?

  • Only 1 item's data is visible at a time, making it difficult to compare multiple items

  • The sidebar is covering a portion of the search results

Visualizing Scores

I needed to find a more visual way of presenting ranking signals and scores so that users could quickly understand how an item received its ranking. I tested multiple designs:

Pie Chart

Visually pleasing, but only offers numbers in proportion to each other for a

single item. Good for visualizing the strongest scores of an item, but difficult for comparing scores across other items.

Bar Graph

A bit bland looking but functional. Since scores are calculated differently and use different scales, effectively labeling the axis could be complicated and use up limited screen real estate

Radar Chart

Good for visualizing multiple scores across various axis. However, many users will likely be unfamiliar with this format.

Star Rating

Recognizable and easy to read. Facilitates a relative rating system allowing for easy comparison between items

This scoring system provided everything I was looking for.

Handling Long Data

The original mockups I was handed offered additional data hidden behind expansions. The problem I found with this approach is that expanding this data would take up the entire height of the screen, making it incredibly difficult to compare data across multiple items. 

My solution was to change the expansion to a tab format. This would allow the user to choose which segment of data they wish to view without sacrificing the rest of the screen to metrics they aren't currently interested in. Tabs also better facilitate cross-item comparisons

Ratings

Displays the ranking metrics of the item

Metrics

Shows the business performance of the item

Boosts

Details the artificial ranking boosts being applied to the item

Final Design

Collapsed View

(default)

Since many users with the Presto extension installed will not be interested in ranking information every time they view search results, my feature defaults to a collapsed state. Users interested in the sidebar can click the arrow in the top right

Item Info Tab

Upon expansion, the sidebar shows the rating information for all of the items on the page. Users may also search for items to see if a) their item appears in the results and b) rating information to infer why the sought item is not shown higher on the page

Query Info Tab

Beyond item data, users may also be interested in metrics and information pertaining to the overall search term (query). A tab is available at the top of the sidebar to quickly view such information