Project plan
The "2-column module" has used to display product cards, although it was not designed for this purpose. As a result, it causes excessive scrolling when displaying multiple products and cannot accommodate longer text in non-English languages. We need a new module that is designed for this purpose.
My role
- Conduct research, create wireframes and prototypes, and identify the best solutions while following industry best practices.
- Design the UI and visual elements, using existing components to minimize developer input and reduce production time.
The issue
- The left column space for "Titles" is too narrow to accommodate non-English languages. Product names can be lengthy, and this can be even more pronounced when translated into certain non-English languages, such as German.
- Page scrolling becomes too long when multiple product cards are listed in the right column, which should be able to display several products without excessive scrolling.
- No developer support: Use existing modules with minimal development effort.
Sketches & wireframes
Low-fidelity wireframes
High-fidelity
I developed high-fidelity prototypes from the low-fidelity wireframes, focusing on how the product names would appear within the page layout.
Design Solutions
I restructured the layout by converting the two-column design into a single column, eliminating and better utilizing the previously unused space on the left, which reduced excessive scrolling. Also the "Product name tags" are flexible in length to accommodate longer non-English text.
