The problem
Our client identified a need for users to conduct a detailed comparison of multiple products. The existing design allowed for comparing up to 4 products only on large screen sizes. The goal was to enable comparisons of up to 8 products, complete with detailed technical specifications, while ensuring seamless functionality across various screen sizes and devices.
Key notes
- User-Centered Design Approach: Addressed user needs by supporting up to 10 product comparisons, ensuring functionality across various devices, and grouping technical specifications for clarity.
- Iterative Prototyping: Developed two design options—horizontal scrolling for small screens and a minimized “book affordance” layout—to address usability challenges and user feedback.
- Future Potential: Although the project was shelved, further testing is essential to determine the best solution for enabling detailed, multi-product comparisons effectively.
The Process
- Understanding User Needs
Since we lacked direct access to users, we relied on help desk feedback and stakeholder discussions to understand limitations and requirements. Key requirements identified:- The design needed to support up to 10 products, though this was an extreme case.
- Users would select products on a separate page and be directed to a comparison page.
- The ability to remove products individually to narrow their search.
- An option to restore the original set of selected products.
- Grouping of technical specifications to avoid overwhelming users.
- Design Proposal
We developed a wireframe featuring products listed horizontally. Key features included:- Horizontal scrolling for smaller screens, enabling product comparison.
- Fixed section headings, product count, and auxiliary details during scrolling.
- Users could remove individual products to refine their search.
- A prototype of this design was created for stakeholder review.
- User Feedback
Informal surveys conducted by stakeholders revealed mixed feedback:- Users appreciated the simplicity and ease of use.
- Horizontal scrolling felt unfamiliar and unconventional to most users.
- Alternate Design Proposal:
We proposed a second design iteration to address user feedback. This version eliminated horizontal scrolling:- Users could compare 2 products at a time on narrow screens.
- The remaining 8 products were minimized and could be expanded upon user selection.
- A “book affordance” was introduced to make product interaction more intuitive.
- Project Shelved
Unfortunately, the project was shelved before the second design could undergo user testing.
In Conclusion
Further user testing is required to evaluate the strengths and weaknesses of both designs. This process will help identify the best approach for enabling detailed product comparisons across devices.