Commercial work

I worked on these projects while being employed by various digital agencies. Therefore the intellectual property belongs to these employers, not me, and I cannot display the work in my public portfolio. My role in each project is clearly defined, whether I was the sole developer or worked as part of a team, whether I was involved in development only or development and design.

JavaScript/Front End work at Ocasta

capsule.ac.uk/

capsule.ac.uk live site is password protected so please view the Live demo:
capsule.dev.ocasta.co/
Test login: ‘ocasta melanie’ Password: ‘backbone101’

At Ocasta, I architectured and developed completely from scratch Capsule, an e-learning ‘light’ not SCORM compliant, using private statistics) webapp for BSMS (Brighton and Sussex Medical School) using backbone.js and marionette.js. Ocasta had never made a webapp before, and I was the only Web Developer in the company when the project started, therefore I did all the R&D and architecture on my own. I researched JS frameworks, made a presentation comparing Backbone, React and Angular, and recommended using either Backbone or React. The technical directors chose backbone because they preferred to use a more established technology for the company’s first attempt at a webapp. I learned backbone from scratch using the official documentation, blog posts and books. I decided to use Marionette.js as well to avoid having to write boilerplate code fixing known backbone issues (especially memory leaks caused by phantom events). I coded on my own all the base architecture: application, router, router controller, data manager interacting with REST API, top level views and how they manage subviews, error handler. I had never done architecture from scratch before, nor worked without the help of at least a Solutions Architect, so I had to investigate and fix every single problem on my own with blog posts and stack overflow. At the end of the project, I revisited the architecture and used the gained experience to fix problems, especially a complete refactor of the router, and how the application handles redirect between views. I also set up the SASS structure from scratch following SMACSS standard, figured out how to precompile handlebars templates with grunt and use them with backbone, and wrote the grunt file. Midway through the project, a junior developer joined, I trained him up in backbone and SASS, and we shared the UI work on the views while I remained responsible for the core controllers. I aimed to follow JS best practices all though the project but had to prioritise due to short timescale: the app could be improved by adding dependency injection and asynchronous module loading (require.js, webpack or browserify). Capsule is now live and used by students.

I then extended and improved Capsule into Oplift, a ‘Corporate Productivity’ webapp. Oplift is a flexible, modular product containing a e-learning module based on Capsule, but also other corporate productivity tools and static content (news, articles). Virgin Media is the first client to buy a license for it. I use grunt to make a custom production build with a client theme, concatenated and minified code

Please view a live demo on the dev site or the commercial demo site (neater but a bit empty):
oplift.dev.ocasta.co/
Test login: ‘ocasta melanie’ Password: ‘backbone101’
demo.oplift.io/
Test login: ‘Ocasta Melanie’ Password: ‘Backbone101!’

dash.ocasta.co/

Small Angular 1 Dashboard webapp for Ocasta.

Electricomics

I fixed bugs and added new functionalities to Electricomics, a desktop app made in JavaScript with node.js and nw.js that enables people to make and publish their own digital comics

Though I specialise in Object Oriented JavaScript, I know enough PHP for theming and formatting data from a CMS to feed it to templates. I made 2 responsive websites using SASS and Timber/Twig PHP templating engine to make Wordress more MVC-like.

ocasta.com

For Ocasta, I hand-coded a parallax header using requestAnimationFrame and other high-performance JavaScript animation techniques.

hairdressing.jisc.ac.uk/

For JISC, I also wrote PHP code to extend the native WordPress search to include custom content.

JavaScript/Front End work at LEO learning

Adaptative e-learning webapps hosted on the clients’ intranet. These URLs for demo purpose only.

Marriott_screenshot

Marriott, first ever commercial implementation in JavaScript of Tin Can (a new e-learning standard tracking learner’s progress in more detail).

Now live and used by thousands of users at: https://hotelexcellence.marriott.com/home.
I cannot provide a login to Marriott’s live site but I put a copy of all courses on my website, with a launcher that simulates the way a Tin Can-enabled Moodle would launch them:
Marriott tin Can Demo
You can view the resulting Tin Can statement on this third-party LRS (please be aware there may be a delay between them being received by the LRS and them being displayed in the activity stream):
https://melaniemenard.waxlrs.com/ (login: contact@melaniemenard.com Pass: TinCanTest)

This project went into webapp design territory, beyond webapp framework customisation. I rewrote from scratch the GoMo initialisation and tracking code (the code that makes the e-learning webapp communicate with the Learning Management System on which it is hosted) to follow the Tin Can specification instead of the default SCORM. This involved writing error handling code compatible with the sometimes quirky and inconsistent way the third party library tincanjs uses XHR requests to communicate with the LRS (Learning Record Store where the Tin Can data are is collected) and diagnosing undocumented problems in third-party LRS not yet able to handle the IE8-specific type of Tin Can XHR requests. I modified GoMo throughout to send Tin Can statements and bookmarking data: this involved identifying the most relevant events and user interactions to send the statements, and digging into 10 year old e-learning apps to figure out how to bind events to a legacy embedded flash player no longer publicly documented! The course was also localised in 10 languages, and I completely rewrote the GoMo language selector to make it compatible with the way Tin Can retrieves the language preference from the learner’s LRS profile. On top of Tin Can, the project had the advanced customisation typical of the most bespoke GoMo courses (learn apply model, that is, layering a reference topic on top of an assessment topic when the learner fails a question; custom scoring; custom menu) and works on smartphones. I was the first LEO developer to make learn apply work on mobile and had to deal with lots of pop up layering and scroller problems. Localised GoMo courses also had never use a glossary before: I heavily modified the GoMo glossary code to make it handle foreign special characters.

Andrew Downes, leading Tin Can expert in Europe, wrote in his LinkedIn recommendation: ‘I was extremely impressed at the effort Mel made in diving in to the detail of the Tin Can specification and ensuring that she not only followed my documentation to the letter, but understood and questioned too. When requirements shifted or problems arose, she was able to suggest and debate changes as she understood the implications of those changes not just for her code, but for interoperability. On this project Mel has proved herself to be keen to learn, conscientious and very able to pick up new and complex technologies.’ Ruth Haddon, the project leader and COO of LEO’s New York office wrote in her Linkedin recommendation: ‘[I recently worked with Mel on] a very large and complicated [e-learning project]. Mel was great throughout this – really taking ownership for it, and finding solutions to the numerous challenges that came our way. Her communication and thoroughness throughout really helped make the project a success. After Marriott, I became the preferred developer for LEO’s New York office, working remotely on most of their projects (JDC, PARCC – in progress).

Elian_screenshot

Elian, demo hosted on Scorm Cloud LMS to enable testing of assessment bookmarking.

Desktop, tablets. Learn apply model, custom scoring with question difficulty weighing, advanced question level user-response tracking following SCORM12 cmi.interactions. Assessment (scored) topic bookmarking so you can take the test over several sessions (never attempted in GoMo before).

JDC_screenshot

American Jewish Joint Distribution Committee

Desktop only (client request). Custom chapter access in navbar replacing menu screen. ‘My Notes’ note taking and printing custom functionality.

LandG_screenshot

Legal & General

Desktop, tablets. Custom ‘Panel Plus’ (access ‘Get the Facts’ supporting topic from the main topic).

Parallax_screenshot

Parallax menu

Hand-coded to use custom ‘press and hold’ UI button rather than the default scroller, which enables to calculate the movement animation in advance rather than continuously check the scroller position. Desktop only (client request).

DWP_screenshot

Accessible version for Department for Work and Pensions

Desktop and tablets. Tabbing order, focus shift between main content and popups, Dragon specific fixes.

JLP_screenshot

John Lewis

Desktop, tablets. I made the 2-level and tabbed custom menu JavaScript and CSS only.

Digital media work at Surface Impression

NHS_West-Sussex

http://www.coastalwestsussexccg.nhs.uk/

Most complex sections are in the internal part of the website:
http://www.coastalwestsussexccg.nhs.uk/whos-who
http://www.coastalwestsussexccg.nhs.uk/ischaemic-heart-disease
http://www.coastalwestsussexccg.nhs.uk/primary-care
username: usertest@surfaceimpression.com
pass: usertest

As a developer, I did the front end coding of the whole internal and public sites, and was also responsible for SQL database management, including managing user permissions. Surface Impression’s in house CMS Content Curator did not have all the functionalities required by the client’s wireframes, so I creatively used Javascript and Ajax loads to push the CMS beyond the layout and interaction complexity it was originally designed to handle.

As a producer, I managed task lists on Basecamp, assigning front-end tasks to myself and back-end tasks to a PHP developer, taking in account technical interdependency and tracked our progress against project deadline. The client Graham Johnston, Web Development Officer at NHS and a UX designer by trade, provided wireframes and we collaboratively adapted them in response to problems raised in user testing. I managed the client’s expectations against technical limitations and lead the discussion towards satisfying yet realistic compromise. Graham praised my awareness of user experience concerns and my client relations skills in his linkedin recommendation: ‘Thanks to her consistent hard work, good organisation, willingness to fully understand our complex requirements and ability to take a creative / flexible approach to all problems encountered along the way, the end result meets our requirements and we are delighted with it. Melanie took a constructive and critical approach to the project throughout and helped us shape our requirements into something which worked better for us and for our end users wherever she could. This was a key factor in the project’s success.’

Shakespeares_Globe_Game

HTML5 Children game for Shakespeare’s Globe Theatre

‘Choose your own adventure’ game presented as a digital comic, for desktop and tablets. I worked collaboratively with my manager on the conceptual design of the game (creative writing of the storyline, exhaustively defining all winning and losing paths). I worked on my own on the visual design (creating 75 illustrations in Adobe Illustrator), coding of the game engine using jQuery mobile (conditional scene transitions, tracking of player achievements, integrations of 2 mini games, CSS3 animations), debugging in various browsers and ipad, direct communication with the client and implementing their requests for changes.

Rycote_Bodleian

http://rycote.bodleian.ox.ac.uk/

Front end coding of JavaScript-heavy sections:
Timeline
Family tree
‘click-on’ reference boxes used throughout the site/ Link to example page.

Carnival-archive

http://www.carnivalarchive.org.uk

Front end coding of JavaScript-heavy sections:
Archive navigation
individual record displays, including the public tagging system: Link to example page
Add to the archive

Chertsey_Museum

http://chertseymuseum.org.uk/
UI design and front end coding (HTML, CSS, JavaScript) of the loan and resource boxes booking system for schools (please navigate to it through the ‘Schools’ tab as this site has no direct url to sections).

Sussex_Artist_Award

http://www.sussexartistsaward.co.uk/home
Graphic redesign of existing site, CSS reskin of new design on top of existing site.

Six_Point_Foundation

www.sixpointfoundation.org.uk
Graphic design, front end coding and client liaison.

Leave a Reply

Your email address will not be published. Required fields are marked *