The Cart UX/UI | 2. Ideate
Mid, high fidelity wireframes
& early usability test
Leveraging early usability test feedback for implementing changes between mid and high fidelity wireframes.
Mid fidelity wireframes
From log in screen to adding an item to the cart
-
The first screen was a bit overwhelming because there are 4 large buttons that look the same.
I have a hard time reading the thumbnails labels, (…). Overall the text is a bit too small for me
[Add to cart overlay screen] I can’t see the number of item added to the cart when I press the up and down arrows. My thumb is hiding the number.
-
The first section (your previous activity) seems tiny. (…) I can’t read the number of votes for the ratings inside these small thumbnails
The big titles are ok but the smaller text, like paragraphs and the text under images, are too small for me
Early usability test feedback
Early user test realised via video call on the mid fidelity version. Participants were asked to add an item to the cart, starting from the login screen. Here is an extract of their feedback.
High fidelity wireframes
Used secondary and tertiary buttons to help users see faster the option they are most likely to choose.
Modified text size to increase readability without sacrificing contrast and hierarchy.
Standardised thumbnail sizes across sections and got rid of the smaller ones.
Modified add-to-cart arrow position
Emphasis on filter button