Mr. Beer Responsive design rebuild

Mr. Beer has introduced the hobby of home brewing to millions of people with its home brewing kits and recipes. The company runs Magento software for eCommerce. Through our UX services, the company was able reengineer its frontend for a more complete responsive build without wholesale redesign.

Key Objectives

  • Refine and improve Responsive Design behavior
  • Mitigate use case issues and problems with previous UX
  • Reorganize, streamline and improve navigation
  • Improve UX integration of complex third-party services
  • Utilize design components and style from previous UX

Technical Achievements

  • Better, more complete Responsive behavior
  • Foundation framework integration
  • Sass compilation
  • Javascript library consolidation

UX Highlights

Off-Canvas Navigation

  • Easy access and touch control on a mobile device
  • Dual menus for categories (left side) and account (right side)
  • Contributes to a streamlined header
  • Scalable, easy to add more menus and sub-menus
Drop-down search
  • Small UX footprint, yet convenient and prominent
  • Appropriately sizes when activated

Product Pages

Product page
Product page
  • Custom product image presentation
  • Custom product content presentation
  • Integrated reviews


  • Responsive re-engineering of standard Magento cart


  • Responsive re-engineering of standard Magento checkout