Jordan Gray

Full stack developer

Portfolio

Credit Expert

Responsibilities
Front-end development
Technologies used
JavaScript, SCSS, Angular.js, Node.js, Gulp, Swig
Website
creditexpert.co.uk

Experian is the UK’s leading credit reference agency, and Credit Expert is their flagship consumer product. It enables members of the public to explore their credit history and understand how they are seen by potential lenders. Experian wanted to refresh the existing site, both to provide a better experience to their customers and to better reflect modern web development practices.

Despite the site’s complexity, our team insisted on making adaptive design a cornerstone of our development, ensuring that users could access their credit history regardless of their circumstances.

The most complex part of the site is the credit report page, which downloads a JSON payload which is then rendered by Angular.js. Due to its complexity, performance was critical, and one of my roles was to find ways to improve this.

Specific achievements

ShP Portal

Responsibilities
UX, design, front-end and back-end development
Technologies used
CoffeeScript, SCSS, ASP.NET MVC, C#, Entity Framework, Web API
Website
portal.shplimited.co.uk
Two rows of order information, one with an expanded list of documents visible.
Customers have on-demand access to their transaction history and documents.

ShP Limited is an electronics recycling company based in Lancaster, UK. Their most significant business asset is an exceptional and dedicated team of account managers, much of whose time was taken up with common account-related enquiries.

A mobile view of the ShP Portal dashboard
Responsive dashboards provide up-to-date statistics.

ShP Portal provides clients with on-demand access to their account history, important documents and transaction status. It also offers a responsive dashboard with up-to-date statistics on their accounts and allowed clients to know and communicate with their account managers.

Three different input states: default, focused and invalid.
Exceptional user experience is the key to Portal’s success.

Exceptional user experience is the key to Portal’s success. Features were selected based on clients’ most common queries to their account managers, and the site was designed to provide obvious and immediate resolution to these user needs.

As well as adapting elegantly to mobile and tablet display sizes, the site degrades gracefully to meet the needs of our clients limited to older browsers—even those still using IE 6!—while rewarding users of modern browsers through progressive enhancement.

ShP Portal had a threefold impact:

UK Transport

Responsibilities
Design, front-end development
Technologies used
JavaScript, CSS
Website
uktransportapp.com
The header of the UK Transport website.
The website showcases the app in harmony with the existing brand identity.
A detail from the UK Transport site header.
Bold, energetic branding gives a sense of empowerment.

UK Transport is a journey planning app that covers nearly any form of public transport, from trains and trams to ferries and buses. The developer wanted a website which would showcase the app and fit in with its pre-existing brand identity.

A detail from the UK Transport site header.
Simple geometric elements invoke the language of transport maps.

The existing branding was bold and energetic. This was recruited into a metaphor for empowerment. Bright, sweeping headings cut fearlessly across the page, declaring that users need “never get lost again”. A lone commuter, gazing at his phone, glows with assurance amidst a dim train station. Simple geometric elements invoke the language of transport maps, such as the London Tube map, conveying a sense of reassuring clarity.

Naturally the site is fully responsive, elegantly adapting to the screen sizes of UK Transport’s target audience.

Whitelabel recycling services

Responsibilities
UX, design, front-end and back-end development
Technologies used
JavaScript, CoffeeScript, SCSS, ASP.NET MVC, C#, VB.NET, WCF, SQL Server

In addition to their corporate accounts team, ShP provides partners with the option of providing B2C whitelabel services to their clients. This could be done through a branded iframe embedded on the partner’s website or by building a complete, whitelabeled recycling site tailored to their brand and requirements. Partners included T-Mobile, Marks & Spencer, Avios, DSGi and Trinity Mirror.

When I started at ShP, branded iframes were built by a third party and took several days to produce. They can now be made live in under an hour with some basic branding information, and require no technical expertise.

In addition, the ShP Limited retail platform provides bricks-and-mortar retailers to offer over-the-counter recycling services to their customers. At its peak, the site operated in over two hundred outlets across the UK and several more internationally, which was also whitelabeled. Notable customisations include:

Open source

My most interesting project is WebApiContrib.Formatting.Xlsx (formerly XLSX for Web API), a highly-configurable XSLX (Excel) MediaTypeFormatter for the ASP.NET Web API written in C#. My current—but stalled—project is a CSS animation timeline, which will provide a visual representation of CSS animations on a page and controls to adjust, play, rewind and skip through them.

If you want some short and sweet examples of code I’ve written, here’s a few of my more interesting Gists: