A browser extension for displaying vital ranking data to users managing items on Walmart.com
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.
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
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:
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.
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
Good for visualizing multiple scores across various axis. However, many users will likely be unfamiliar with this format.
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
Displays the ranking metrics of the item
Shows the business performance of the item
Details the artificial ranking boosts being applied to the item
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