My Work

Some cool things I've made at work over the last few years.

Ensighten

Material

I created and maintain Ensighten Material, a UI framework that is used across all Ensighten UIs. It provides numerous lightweight AngularJS components.

As part of this, I also maintain a reference that includes an API reference, list of best practices and a language guide.

Page Info

An AngularJS directive for adding a sliding card containing information about a page. The barrier for adoption is extremely low, it simply requires a small amount of HTML to be added to the page's h1 element, no other code required.

As a result of this, it's been adopted by every team at Ensighten as a consistent way for users to find more information about the current page, no matter where they are.

TagMan

Loading Indicator

I made this loading indicator, which is a swinging pendulum based on TagMan's logo , to add a bit of whimsy to the platform. After five seconds the text changes to Still Loading so that users know it hasn't frozen (not pictured here).

Cards

On the Added Tags page, I developed a card based interface where each tag is represented by a card. Hovering over a card reveals more information and some controls.

Invoicing Platform

At my previous job I created a system that allowed clients to invoice their customers. I designed and developed the whole thing - from the UI through to the database design.

Overview and Search

Provides an activity stream, search, and links to other parts of the platform. The small notices (for example '6 overdue') are links to the corresponding page.

'New' Page

Allows new transactions to be created. The options in the form change automatically when a different transaction type is selected, and the preview on the right hand side updates live as the form is filled in.

CIX Forums

Also at my previous job, I was tasked with updating the web interface of CIX, a forum system they acquired the previous year.

Where applicable, I've included 'before' and 'after' pictures to demonstrate the changes I made.

Home Page

I rethought the layout of this page with the goal of making the site easier to use for laymen. Red is used sparingly to get the user's attention when necessary. Additional features remain hidden but accessible when needed in popovers.

Before

After

A popover to hide functionality until needed.

Threads

The thread page was very cluttered and had a lot of extraneous elements. Unnecessary parts were removed and functionality was simplified.

Before

After

Notifications

I created an XMPP based notification system (WebSockets weren't well supported enough in 2012, sadly). A server process sent notifications either to the browser or via email, depending on if the user is online. This page is where they're collected after delivery.