UX Enhancements to React Application May 2024
Budget: $30 – $250 USD
UX.
Below are some of the requirements and will be broken down into milestones. Work items (subject to change before the project starts, may have minor changes after project starts):
Everything below shooul work on Chrome, Edge, Firefox and Safari of windows desktop, iphone and android. Please test on those browsers and let me know if you are not able to test on both mobile devices. We need too complete bugs first followed by enhancements. Some of the styling items may required a couple of back-and-forth requests to change things slightly.
Bugs:
a. When there are no results, we need to display a message at the top that of the no results page that says "No results found".
(you can test it with price, RAM and CPU Speed set to highest values)
b. When we click on Show details, it shows a border around it, we need to avoid that.
c. When we launch Show details and close the page behind it moves to the left and right. I can send a video if you are not able to reproduce this issue.
d. Compare table is not centered.
e. When you see the results in list view (one item per row) the logo for Walmart seems to go off the screen/item box, it should be within the item box and have some spacing around it.
f. React bug: Radio buttons are not getting selected sometimes when you click first time. Noticed on both dekstop and iphone, but on iphone, it is very consistent. Only the 2nd click selects the radio button.
g. mobile: on search results display, sort by, drop down and the two icons that allow to change layout seem to be pushed to the right and not full visible.
Enhancements:
1. Search filter improvements:
a. Scrollbar should not show but appear when mouse is in the left pane. Go to Bing shopping webite and enter search for "laptops", scroll down past the Ads (top two rows) and observe what happens when you scroll the down on results. The filters do not scroll but there is also no visible line or scrollbar. Now you move your cursor over the left pane (left pane scrollbar appears) This is exactly how we should implement for pricewired.com
b. Scroll bar should be a little thinner, maybe 10-13 pixes when it appears and light gray color - (on all browsers - Chrome, Firefox, Safari and Edge.) - please add comment on the scrollbar color so we can change if we want slight adjustment.
c. Provide a small toggle icon at the top (right aligned), same rows as Clear filters, to collapse all search filters on one click and expand all when clicked again. Mouse-over text should show: "Collapse all" "Expand all" depending on what the next click will do.
When a filter is selcted (and set to something other than default)
d) the heading of that filter needs to change to bold, example: if we selct RAM 8GB-16GB.
e) On desktop only: we need to see a button show up at the top of all search filters that says "RAM 8GB-16GB" with an x to remove it from search filters ( see Bing shopping)
2. Header improvements:
a) too crowded and needs bit more spacing around it and have a cleaner look and should match the height of the blog header.
a) search field should have a max-width of say 500px (please add a comment in the code so we can change if we need to)
3. Results card layout improvments:
a) Currently, for layout with multiple laptops per row, it shows specs only on mouse-over, lets remove that and show that in the card iteslf, between the laptop image and the hyperlink of the laptop title. Lower the font a little bit and add a special css class to control the style of the specs.
b) The cards need a bit more padding/margin so they dont look too crowded with information.
4. General styling
a. Entire screen should have background color e6e6e6 (should be set in a common css or scss file and reused as a variable in all pages). Search filter cards, header and results list should be white.
b. all headings need to use font Jura - eg. "Compare Specs" "Clear All"
Below are some of the requirements and will be broken down into milestones. Work items (subject to change before the project starts, may have minor changes after project starts):
Everything below shooul work on Chrome, Edge, Firefox and Safari of windows desktop, iphone and android. Please test on those browsers and let me know if you are not able to test on both mobile devices. We need too complete bugs first followed by enhancements. Some of the styling items may required a couple of back-and-forth requests to change things slightly.
Bugs:
a. When there are no results, we need to display a message at the top that of the no results page that says "No results found".
(you can test it with price, RAM and CPU Speed set to highest values)
b. When we click on Show details, it shows a border around it, we need to avoid that.
c. When we launch Show details and close the page behind it moves to the left and right. I can send a video if you are not able to reproduce this issue.
d. Compare table is not centered.
e. When you see the results in list view (one item per row) the logo for Walmart seems to go off the screen/item box, it should be within the item box and have some spacing around it.
f. React bug: Radio buttons are not getting selected sometimes when you click first time. Noticed on both dekstop and iphone, but on iphone, it is very consistent. Only the 2nd click selects the radio button.
g. mobile: on search results display, sort by, drop down and the two icons that allow to change layout seem to be pushed to the right and not full visible.
Enhancements:
1. Search filter improvements:
a. Scrollbar should not show but appear when mouse is in the left pane. Go to Bing shopping webite and enter search for "laptops", scroll down past the Ads (top two rows) and observe what happens when you scroll the down on results. The filters do not scroll but there is also no visible line or scrollbar. Now you move your cursor over the left pane (left pane scrollbar appears) This is exactly how we should implement for pricewired.com
b. Scroll bar should be a little thinner, maybe 10-13 pixes when it appears and light gray color - (on all browsers - Chrome, Firefox, Safari and Edge.) - please add comment on the scrollbar color so we can change if we want slight adjustment.
c. Provide a small toggle icon at the top (right aligned), same rows as Clear filters, to collapse all search filters on one click and expand all when clicked again. Mouse-over text should show: "Collapse all" "Expand all" depending on what the next click will do.
When a filter is selcted (and set to something other than default)
d) the heading of that filter needs to change to bold, example: if we selct RAM 8GB-16GB.
e) On desktop only: we need to see a button show up at the top of all search filters that says "RAM 8GB-16GB" with an x to remove it from search filters ( see Bing shopping)
2. Header improvements:
a) too crowded and needs bit more spacing around it and have a cleaner look and should match the height of the blog header.
a) search field should have a max-width of say 500px (please add a comment in the code so we can change if we need to)
3. Results card layout improvments:
a) Currently, for layout with multiple laptops per row, it shows specs only on mouse-over, lets remove that and show that in the card iteslf, between the laptop image and the hyperlink of the laptop title. Lower the font a little bit and add a special css class to control the style of the specs.
b) The cards need a bit more padding/margin so they dont look too crowded with information.
4. General styling
a. Entire screen should have background color e6e6e6 (should be set in a common css or scss file and reused as a variable in all pages). Search filter cards, header and results list should be white.
b. all headings need to use font Jura - eg. "Compare Specs" "Clear All"