UI/UX Analysis: Product Comparison
Preface:
The following are adaptations/improvements of my work. The layouts, colors, and logos have all been changed. However the background user problems remain the same.
Main Dashboard
Introduction:
This project was actually a UI/UX test done for a company. The brief :
Acme Company is developing a web app which will recommend their users the best price point for selling their FMCG products.
Users will be asked to input specific data about their product and their selected competitors' products. This information can be retrieved from a link to an e-commerce storefront.
Upon submission, a machine learning model will calculate the results. The recommendation results will be displayed on a page in the form of interactive graphs and metrics.
As the UI/UX Designer, you have received this list of data visualization feature requirements from the Innovation team:
Insight Charts
1. Price comparison (competitors): You are priced $X higher/lower than competitors:
Filter 1: Overall price: When it comes to overall pricing, you price your product $X more/less than competitors.
Filter 2: Weight: When it comes to weight, your product is X% heavier or lighter than competitors.
Filter 3: Size: When it comes to size, your product is X% bigger/smaller than competitor
Who is the audience?
Researchers who are helping companies to do market research by comparing products.
What follows is my thought process and design mockups in the creation of the flow.
The Process:
Creating the flow shown below, and then the wireframes before the hi-fi designs.
User flow
The hi-fi designs were created using Monday.com's design system.
Conclusion/Reflection:
The screens were well received. Their feedback was that the flow was very logical and was quite close to their actual product. It was a new experience for me to create the metrics, with visualizations that aren't the usual bar/line charts.
