Lee Sibbald Software Developer

An experienced software developer with a keen eye for detail who works well autonomously or as part of a team. Particularly interested in working on mobile applications and video games.

Nestlé® Kitkat “Live Your Break” Campaign
Principle architect and developer
Nestlé was implemented across multiple devices in website and App form
<stack>
  • Hosting - Microsoft Azure (LAMP, Blob Storage, Gateway & WAF)
  • iPad App - Xcode Objective-C
  • Websites - PHP
  • Libs - BabylonJS (interactive 3D scene), WebPurify API (UGC image moderation)
</stack>
Development Timeframe: 6 months.
Languages: English, with localised image assets.
The brief: To design, develop, deploy and support a kiosk tablet system, to be installed in several airport duty-free shops around the world, which would allow customers to "design" a label and then have this label printed and attached to a box while the customer waited.
An interactive 3D scene viewable in a web browser would be provided for the customer to upload photos to and share with friends or relatives.

The project was designed and delivered in three parts, covering two phases of the initiative. Phase one would account for the kiosk and image uploading website, while phase two would handle the 3D world website.

Phase one was delivered using iPads as the tablet device, a decision arrived at due to required processing power, screen quality, and remote deploying features. An ID & PIN protected website was created to allow customers to upload a photo from their device, have it processed on the server, and downloaded to the iPad app. The iPad app used this image in the label design, along with the text it had captured from the customer, and a QR code it had automatically generated, to create a PDF file using hi-res assets and send via AirPrint to a nearby wifi printer. The final step was to save the user's ID and PIN code to an external database so that it could be used in phase two.

Phase two was delivered with the creation of a website that, once a valid ID and PIN had been entered, either allowed up to four images to be uploaded if none had yet been accepted, or if photos had already been uploaded to show these images in an interactive 3D world within the web browser. For the photo upload part, moderation of this UGC was handled by WebPurify using their hybrid API robot/human moderation process. Only when all images were accepted would the website show the 3D scene. The 3D scene itself was built with Babylon.JS, using assets built partially in Cinema 4D and partially in Blender, then exported from Blender to the Babylon.JS native format.

The project was rolled out in stages from one airport to the next of several months, with each having up to two months to run. Following on from deployment, the status of each installations was monitored through Azure Portal using a combination of Analytics (websites) and live tracking data (iPad app).
Gillette® "myRazor" Razor Designer
Principle architect and developer
myRazor website was implemented across multiple devices
<stack>
  • Server code - ASP.Net
  • Libs - FabricJS (HTML canvas drawing), ABCpdf.NET (server-side PDF generation), Zxing (QR and Barcode generation), JSC3D.JS & Three.JS (real-time 3D razor rendering - alpha version only)
</stack>
Development Timeframe: 8 months.
Languages: English, German, Dutch
The brief: Create a client-side driven razor blade handle customisation interface, allowing designs to be created with clipart, background images, text and uploaded photos, that can be saved and edited via a members account, and that will communicate with a server-side purchase and production API for printing and posting.

Due to tight timescales and to avoid "reinventing the wheel" the Fabric.js JavaScript library was chosen as the basis of the dynamic drawing technology, with additional features built upon it as the project developed.
Of particular difficulty was ensuring the interface would work across mobile devices as well as desktop, with space limitations and the touch interface posing particular problems. This was especially challenging when it came to the "preview" design mode, where the user could see an interactive 3D representation of their design shown on a razor blade handle. Many if not most mobile devices struggled under the processing power required to render the 3D scene using the JSC3D or Three.JS JavaScript libraries. After much testing and discussion with the client it was decided that a custom 2D PNG preview would be more than sufficient for preview purposes, and would vastly reduce load times thus improving retention chances. The 3D code was replaced with 2D code and rolled out in the final interface.
User designs could be saved to their account and edited at a later date, and when ready purchased through a separately developed shopping process. The final hi-res design, along with the generated JSON code that represented it, would be saved to the server and used in the production of the print-ready PDF file.
At the server side, ASP.Net was used along with the ABCpdf.NET library to produce A3 sized PDFs of print-ready handle designs. Using information from the printers, and XML to represent the "template" details, the PDF was built using precise spacing values in order to ensure the print would appear in the correct place of the handle. A CMYK profile was embedded in to the PDF to ensure accurate colour reproduction. Additionally, a Deutsche Post - the chosen courier for the project - PDF label was also created for each design, complete with dynamically generated barcodes using the ZXing.Net library, ready to be affixed to the final package before dispatching to the customer.

As of March 2019 iterations of the customisation interface are still live and in use in various markets.
Puma® Fragrances "Dance Dictionary" Campaign
Principle developer
Dance Dictionary website was implemented across multiple devices
<stack>
  • Hosting - LAMP
  • Website - PHP
  • Videos - Custom encoding.com PHP batch stitch solution
</stack>
Development Timeframe: 4 months.
Languages: English, German, Dutch, Polish, Russian, Portuguese
The brief: To create a fun, interactive microsite for Puma Fragrances that engaged users and helped reinforce brand values. A design agency was invited to create the core concept of the site, from where the development team took the project forward with execution.

There were significant challenges with this project, from the core-logic of allowing multiple sentences to be created from multiple options, variable by language and locale logic (i.e. in some languages, certain combinations of words only make sense if used in a certain order), to displaying full screen videos that also displayed the chosen sentence of the user, to ensuring this all worked across mobile and desktop browsers.
Once the logic behind the sentence construction was established, which included using tokens to indicate where a string of words should or could logically wrap to a new line based on locale, the next task was to represent this sentence in a video that featured multiple dance artists performing the key words of the sentence in a single seamless video. With thousands of possible combinations the challenge was not only of how to combine multiple videos together but to ensure the processing strain on the user's device was not overly burdensome. After much discussion and testing it was decided the most logical approach would be to create pre-baked videos for every single video combination - including full sentence text - then serve up the appropriate video using some ID referencing logic.
The videos were created using the services of encoding.com, which provided cloud-server processing power with an API that could be leveraged through a substantial custom PHP script to create requests that would define not only the various videos required to be stitched (housed on Amazon S3), but also the wording to appear over the video, plus timings of the wording, a audio backing track for the video, and a final output location (also on S3). After much testing the script was finally complete and able to run automatically to produce multiple API requests. All in all, some 10,000+ videos were produced covering all languages and possible sentence combinations.
The site went live on time and ran for several months.
Johnson & Johnson® e-SIMS redesign
Team Lead
e-SIMS redesign took a complex data-driven website and presented them across a range of screen resolutions
<stack>
  • Libs - Kendo UI
</stack>
Development Timeframe: 2 months.
Languages: English
The brief: Redesign the existing B2B website, such that it would be usable across multiple devices instead of only desktop.
Due to the tight deadlines and small budget, it was not possible to discuss the existing system with current users to determine where the system was failing. Fortunately the client had already performed some of this work and so, with agreement of the client, the redesign of the site began using the client-user data as a guide.
The client's developers insisted on the continued use of the existing Kendo UI JavaScript library they had purchased and implemented, which while not optimal in every case did in the end make certain decisions easier (wide, data-filled tables on mobile devices for example).
After establishing a new design and creating several HTML pages that represented the most complicated or unique layouts, a further two dozen fully designed HTML pages were produced for the client with full SCSS/CSS and JavaScript, that implemented the Kendo UI where appropriate or required. A styleguide was also provided for the various design decisions taken, so that the client's development team could take this forward and apply to the remaining website pages.
Ensuring the off-site team adhered to the initial design work by quality controlling each page that was produced, as well as the accompanying CSS and JS, meant the project could be delivered on time and to the client's satisfaction.