The MotoSport.com storefront pages on desktop were a cluttered mess. Jarringly busy, difficult to update, the 'front doors' to the site lacked cohesion or restraint.
Button styles of every conceivable variety would show up there at one time or another.
By contrast, the mobile versions of the page consisted of a single carousel of promotion tiles, which were often neglected.
As a returning customer, I want to find the same sales and navigation on my phone as I saw on my laptop, because I don't have time to go back to my laptop to find that special SALE
Bringing the Merchandising and Creative teams together, we were quickly able to establish a baseline for the number of promotions, typical types of products to promote and the general flow that creative would work through to update the pages.
Wire frames from Sketch helped visualize which items needed to stretch & shrink, crop & swap, or flow as the page widened.
Product collections move from vertical lists on mobile to carousels on larger devices.
Promotional Tiles change orientation, size, and gain a hover state for the text as the screen expands.
The new storefront pages measured up well. The tests only included those customers visiting one of the new pages during their visit:
Testing responsive pages like this, with product carousels, expanding menus, etc., quickly becomes an endurance challenge. From maintaining support for older browsers to adding new mobile devices to the mix, the game of bug 'whack-a-mole' added about a week to the 5 weeks of development. Also required was a new management tool to support direct updates by the Merchandising & Creative teams.
Even though the loading filmstrip looks slightly better for the new page, than the old...
...putting the responsive layouts on a diet is now in order, since the navigation and content are happily coexisting. Js, css and html could all be trimmed significantly:
