• Petit Bateau
  • Petit Bateau listing page
    Fig 1. Listing page
  • Petit Bateau listing page
    Fig 2. Listing page
  • Petit Bateau christmas promo
    Fig 3. Promo image

Petit Bateau

2014, Nov-

website specifications, cross-device testing, AJAX, CSS3

Context

altima° and Petit Bateau have worked together to design and develop a unique landing page for the 2014 festive season. The purpose of this page was for the brand to present exclusive deals and unique winter outfits for children. My role was to review the whole project and provide feedback to the development team.

My role

I worked closely with the project’s lead front-end developer to enhance the user interface and correct residual bugs. The project specifications had been written prior to my intervention and guided me throughout the whole review process.

Challenges

- Christmas is a crucial period for Petit Bateau, as it represents an important part of their annual sales. The stakes were high and our client expected our work to be stellar. We devoted the most part of our attention to ergonomics and UX and made sure that nothing was getting in the way of the user either on desktop, tablet or mobile. That brings me to my second point.

- Petit Bateau is a responsive website and the ‘Christmas page’ had to conform to this requirement. I only noticed minor bugs on desktop, so I decided to mainly focus on lower breakpoints to ensure an optimal viewing experience on smartphone and tablet. Cross-device testing represented a major part of my mission and pushed me to find solutions with regards to: varying pixel densities and viewport widths.

- The page featured CSS3 features such as animations and box shadow. Ensuring cross browser compatibility was hence a complex and lengthy process.

- We chose AJAX to dynamically display and render products on the page. Although it allowed us to improve user experience, it also added a layer of complexity to the page, and therefore implied a longer review process. What is more, the use of AJAX had SEO implications and required us to adjust its functioning in order for the content to be crawlable.