UX Designer & Front-End Developer
An overview of some of my design and development work plus a look into my side projects.
One of my favourite projects at Evolution Funding has been the redesign of the EVOGO website.
I was involved at all stages of this project, from mapping out the initial journeys and sitemaps alongside stakeholders, to working closely with designers to translate these into effective, user centred designs.
Next, these designs were built as a single page application using Vue, Vuex and Webpack, which gave the website a fluidity and responsiveness that would lead to increased customer conversions.www.evogo.co.uk
I created a SASS framework called EvoCSS to serve as a solid architectural foundation to build project styles. This incorporates many popular methodologies such as OOCSS, BEM & ITCSS to make the CSS scalable and maintainable.
I also created EvoToolkit, which is a user interface library for developers who require ready-made, reusable UI components which they can easily drop into their projects.
These components can be viewed at the pattern library below, which is a data-driven static site generated by Gulp and Nunjucks.toolkit.evolutionfunding.com
My involvement with the Mike Brewer Motors website project ranged from being involved in early stakeholder meetings, where I helped to improve the user experience of the designs, to then developing all of its front-end codebase and Gulp-driven build system.
At the 2018 Autotrader Retailer Awards, the website won 'Best Online Experience' after 6,000 independent website reviews, which was a nice validation of all the hard work I've put into this project.www.mikebrewermotors.com
I redesigned one of Evolution Funding’s main car credit application forms from a mobile-first perspective, as nearly 70% of traffic was coming from smaller screens, and the existing form wasn’t nearly as optimised as it could have been.
An A/B Test was then ran to record how the new form performed against the old. Overall, the new form shaved just over a minute off the average completion time and conversion was increased by nearly 25%. A big win.
One of my responsibilties at Plusnet was to build A/B and multivariant tests using Adobe Target. These allowed me to test new sales page designs against existing ones by seeing how conversion is influenced.
This specific example shows a test where I compared the existing broadband packages page against a new streamlined full width variant over a 30 day period. Once this was over, metrics within Adobe Target and Google Analytics showed that the new variant succeeded in improving conversion. It was subsquently rolled out in a later sprint.
Brand Toolkit is an internal website built on Wordpress which gives Plusnet creatives and stakeholders easy access to brand assets.
It started out as a small side project of mine intended for use within the web dev team, but grew in scope and is now used by creatives and brand stakeholders in departments across Plusnet.
I created a screenshot automation tool using Ruby and Selenium WebDriver to help Plusnet developers easily generate large amounts of screenshots for use during stakeholder signoff.
Users can either select from common tasks, such as generating screenshots of all pages required for signoff of a broadband offer, or they can pass in a custom array for one-off jobs.
The Orion suite is a collection of tools to help you with front-end development. It includes:-
OrionCSS - a SASS framework which provides you with a solid OOCSS foundation for your project.
OrionJS - a simple collection of reusable functions to help streamline UI development.
OrionBP - a simple Gulp powered front-end boilerplate for projects using OrionCSS and OrionJS.View on Github
4x4overlander.com was an ecommerce project built on Wordpress and WooCommerce for a client who wanted to sell specialist parts and accessories for Land Rover Defender.www.4x4overlander.com
One of my first projects after joining Red HQ was to completely redesign their website. This took them from a single temporary webpage to a fully functional mobile responsive agency website which was search engine optimised.
This new website gave Red HQ a more professional showcase to promote it's services, and as a result it saw a large increase in organic web traffic and enquiries.
There’s 4 different variations to tackle. See how quickly you can solve them!Play Tile Puzzle Game
MPD Power was an international supplier of diesel generators with a website that was in dire need of a redesign.
I worked with them to develop a new website which was modern and professional and would suit their needs. This redesign gave them a more corporate image which increased their sales both at home and especially in developing countries.
Sandal Magna Community Academy was probably my favourite out of the six or so school websites I created whilst at Red HQ. I think it really serves as a brilliant showcase for the school and its surrounding community.
After each new school website was rolled live, I delivered training directly to the teachers themselves to educate them on how to use the CMS and what best practices were recommended.www.sandalmagna.co.uk