obive.net

Icon for Mr Muscle

Web

Mr Muscle

Details

Overview

I led a team of four to develop the frontend code for the internationalized Mr Muscle website. The website was broken into various modules. The code for each module was developed to be as independent of other modules as possible. The website was designed to be responsive so the same code would work on desktops, tablets, and mobile phones.

The website included a single-page application, the Cleaning Companion, written in JavaScript backed by JSON data that helped customers find solutions to cleaning problems. Back and forward navigation from the browser were integrated to maximize usability. Transitions from stages were animated using CSS transitions. Like the rest of the site, the application was fully responsive.

A few parts of the site included specialized animation and performance optimizations. This includes the robust transitions in the Cleaning Companion, staggered and performant homepage carousel, and ray-bursts in the Meet Mr Muscle comic.

Most art was delivered by an art team. I worked closely with the art team to remediate HTML/CSS/browser constraints. This included an unusual text-stroking technique.

The backend was developed by another team. I worked closely with the backend team to integrate backend and frontend code.

Technical summary

  • Took a few months during 2014
  • Javascript
  • HTML/CSS
  • Fully compatible with IE8, some graceful degradation
http://mrmuscleclean.com

Gallery