Responsive Product Grid

  Client: adidas & Reebok |   Role: UI

Overview

PROBLEM

- Originally the adidas desktop product grid page was designed to a fixed 950px grid.

- The header image stopped short of 1200px, leaving empty spaces at the sides for larger screens.

- The grid only showed 3 products per row, which on larger screens felt underwhelming.

- We wanted to make the most of the empty space, and to give users a more visual experience

CONTRIBUTION

- Defining of break points

- Design and prototyping of responsive hero image and product grid

- Defined responsive imagery behaviours

- Fresh content templates for visual assets

- Update to global styleguide

DEFINING BREAKPOINTS

I defined our breakpoints based on our visitor stats.

We didn’t just focus on screen resolutions, but also looked into the most popular browser dimensions they were viewing them on. This helped us when defining the hero image height.

KEY AIMS

  • Full width hero image with responsive text
  • Show 4 products per row as soon as possible
  • Max 4 products per row to prevent over-stimulation, for larger screens grow the product image sizes so users can see more detail
  • Filters are cramped on smaller screens, so give them more room on wider screens.
  • Visual assets (imagery / icons) to be responsive and styleguides to be redefined with new dimensions and safe zones
  • Ensure all other configurable elements expand with the grid (many more not shown!)

RESPONSIVE HERO IMAGE

  • Image height based on 40% browser height so that all users would get the same visual proportions.
  • Minimum height of 390px so that the maxmium copy and CTAs would always fit
  • Image scales from top center so that we could identify a more accurate sage area
  • Font size and width of text area increases at 1280px

To test the responsive hero image at different dimentions, I worked with an existing prototype to change the background properties and font sizes at the different break points.

View hero image prototype

CONTENT TEMPLATES

I provided a content template for all of the visual assets that were affected by the responsive project. With these templates, I identified safe areas, and enabled the content creators to simply drop their imagery into a smart object and see how it would be reflected at the different break points.

OUTCOME

I provided a content template for all of the visual assets that were affected by the responsive project. With these templates, I identified safe areas, and enabled the content creators to simply drop their imagery into a smart object and see how it would be reflected at the different break points.