Tom Mortimer - Legacy Portfolio

This tool was designed for Maxinutrition customers to see how their actual protein intake compares with their goal-specific protein requirements, and be recommended relevant diet plans & products to help them reach their target.

My contribution to the project was the second stage - a fully-responsive jQuery UI interface, where customers could drag food items they currently eat across to a "basket". When an item was added to the basket, JavaScript would calculate the total of the selected items.

This project, although completed, was never released due to a change in business direction. Please get in touch for more detail about this project.

MaxiRAW.com offers mobile users the ability to display the desktop version on their mobile, if they aren't keen on the responsive layout.

This jQuery-based functionality removes the responsive stylesheet, loads a desktop stylesheet, edits the viewport meta tag so the entire page is displayed on screen and re-enables pinch zoom. It then removes the "View Full Site" link, sets a cookie to remember the user's preference and adds a "View Mobile Site" link which reverses the process.

Analysis of user behaviour suggests the responsive site is preferred, as only 118 users clicked the "View Full Site" link in the week following release.

This web app allows the user to view live arrivals at selected bus stops in London.

This demo displays the first 5 stops in the TFL feed, but in a production app the user would be shown the closest stops to their location.

It also allows the user to locate bus stops in the capital.

Start TFL Web App Demo

On a mobile or tablet user's third visit to MaxiShop.com, this functionality displays a popup asking them to add a shortcut to the site to their home screen (Android) or Start screen (Windows Phone).

The script detects the user's resolution and user agent to ensure the correct message & styling for the device is loaded, and counts the user's visits through cookies - enabling it to display the message on visit #3. On Apple devices, this functionality is provided by a plugin and loads on a user's second visit.

Once MaxiShop.com became responsive, the decision was made to retire the MaxiShop iOS app. However, it was important to drive existing app users to the new site - so the transactional MaxiApp was replaced with a basic app which featured a link to MaxiShop.com. This update was built with HTML/CSS/JavaScript and compiled using PhoneGap Build.

The app presents an image and button which, when clicked, checks if the user has an internet connection. If a connection exists, the app displays a "loading site" image (which was preloaded into RAM when the app starts, as the iPhone cannot load an image and open a browser at the same time) and opens a frameless browser containing MaxiShop.com. The URL sent to the browser is encoded so the site can securely detect that the user has come from the app, and therefore NOT display an "Add to Home" popup (as the app is already on the user's Home Screen). If no internet connection exists, the user is prompted to check their connection and restart the app.

Over 15,000 users accessed MaxiShop through this app in the weeks following release.

An implementation of the Kemar Countdown plugin, styled to suit MaxiShop.com (old and new) and adapted to fetch an end time & date from the CMS.