Lampbot | Josh Tregenza | Story Teller


Lampbot is the Premier code bot that is used by Codebots and WorkingMouse. It is built on the LAMP stack and using Backbone Marionette.

Working on Lampbot meant I would be doing the following tasks:

  • Improving Lampbot's design and development.
  • Codifying the existing elements of Lampbot and write up it's documentation
  • Improve and assist with new procedures

Updating Legacy

Lampbot is over 5 years old and did not have a specific team working on it for a few years. The time my team was aligned with Lampbot, there were many developers who had built additions to Lampbot but had not done the sufficient documentation. In order to better understand the bot I would revise and redefine many parts of Lampbot and in the vairous locations that WorkingMouse and Lampbot resided I had the LampWall, which was a wall dedicated to the pattern library of Lampbot.

This assisted in the process of building out the MetaModel shapes that would be used in the Diagram Editor.

With this research and documentation done (though I would continue this research and documentation until I left the company) I would be able to build out new ways in how Lampbot presented itself. Much like the codebase the administration portal for all Lampbot project was gather dust and needed to be redesigned in order to allow greater usage by the WorkingMouse clients.

This was given the code name LMUI (Lightning Muffin User Interface... I understand that this may create more questions than it answers.)

Within Lampbot you can give applications greater functionality with 'Behaviours', at the time we had behaviours (at the time called capabilities) for Documents and Questions, for workflows, timelines, etc.

UX Flow for the Documents Capability

UX FLow for Documents

I came up with a general color theme to base the designs but outside of that I would keep my screens and flows lofi, more wireframes than anything. I had decided this as development for this would not be for quiet some time (These designs would have been finished around Feb 2017 and are only now being developed)

Building out new Behaviours

When behaviours weren't being created within client projects, I would be the one who would design them out. For example, we needed a new way to create API calls, not just for developers but for anyone who was tech savvy enough to know what they were.

Early Sketches for The API Behaviours

We would use the scratch programming language in order to create API calls out of 'puzzle pieces'. So with this 'solution first' approach I went on to create the pieces using Google's Blockly. Proving that this could be done with the language I would then interview developers to greater understand API Calls and how they use them. This would then lead to exploring other programs like Postmate to identify what they do right and where tension lies.

With that I used the existing Lampbot admin style (Note: not the one that I had designed) to build out the ux flows for this behaviour.

UX Flow for API Capabilities

Implementing new ways to work

Outside of the UX/UI design work I successfully transferred the company from using LESS as their CSS extension to Sass and worked with all new designers (At the time of joining there were 4 designers (including myself), at the highest point, there were 11 designers) in how best to use Lampbot and implement their designs through it. The Lampbot team devised the Funnel Style Structure that we would use in order make designers better able to code.

This would then move towards the Style Implementation Guide and a Design System Language that would be built into the Codebots Library Section.

This built upon my desire to teach and mentor others and give me opportunity to build those skills.