Responses by Pier-Luc Cossette, frontend developer, Thomas Lefebvre, backend/ frontend developer, Eric Dufresne, web designer and Martin Bussieres, project management, Stereo

Background: The project was designed to feature the complete portfolio of beers brewed by Microbrasserie À la Fût. In addition, we were asked to highlight the client’s two restaurants in St-Tite and Montréal, as well as their respective menus.

Highlights: The team developed a platform based on the redesign of the different product labels. We also conducted an on-site photo and video tour of the facilities, so our team could use those resources on the site. The entire approach was developed as “mobile first” for an enhanced mobile experience.

Challenges: Delivering a high-end product with a limited budget. We also faced the challenge of managing a site that included two branches with different contact information, social networks, beer inventory and restaurant menus, all under one URL.

Favorite details: The gallery and beer sheets that make up the entire portfolio, as well as the originality of the products’ descriptions and display.

Time constraints: The project had to be finished before the start of the Western Festival in St-Tite, a major event that draws 100k visitors over a two-week period.

Navigational structure: We put a “slider” in the menu where the main beers are displayed so that users can access them easily. It was important to design a structure that would allow users to navigate from one brewery to another without getting lost.

Technical features: For the back end, we used a WordPress boilerplate with Bedrock. We used Grunt for all the build tasks and code optimization, and JPEG Mini and Imageoptim for image compression. We used Smoothscroll for our custom animations that are scroll-triggered, and GSAP’s TweenMax. The site is built in AJAX, and we used BARBA.JS to make development easier. For the online store, we used Snipcart.

Alternative approach: We could have played a more supportive role in regards to the copywriting process to obtain the final contents from the client before starting the graphic work, which caused some decisions to be reconsidered in order to better reflect the final content that was provided.

Anything new: We learned that putting considerable emphasis on motion UX limits the client’s ability to create dynamic content in the CMS. This means that the graphic files must be optimized in order to integrate them according to Motion UX specification requirements to maintain a high quality performance.