UX/UI

I've been working in the digital space creating web experiences for a long while now. What started as a curiosity during the time of dial-up modems has continued to be an endlessly fascinating space to explore and create in.

I take a holistic view and lead digital projects from start to finish. Be it taking a hands-on role, or working with dedicated teams, I'm no stranger to any UX, UI or coding part of the process.

My main drive is to come up with a campaign concept that will work in digitial space. Or, as the case may frequently be, to find a way of translating a campaign concept into digital space.

While my beginnings have been in UI, and I'm completely au fait with front-end development, I find myself being drawn further into UX, focusing on crafting the best possible overall digital experience for users.

What I love about the whole world of digital design is the potential - all the things that a screen can become at the tap of a finger.

Here's a few examples where I crystallised potential into projects.

Ladbrokes careers

While I was at SMRS we were asked to refresh the careers website for Ladbrokes, a nationwide high street betting shop.

They had one already, but it wasn't quite there, wasn't alive, wasn't fun. With a few key improvements, we quickly changed all that.

Ladbrokes careers

mockup
mockup
mockup

There were two sets of improvements.

The first set was pixel-deep - I jazzed up the visuals, dialled them up to 11, and brought them in line with the exciting and playful spirit of the brand. So now an animated photo mosaic greets visitors to the website, generous helpings of confetti visuals were thrown in and a ticker tape showing current jobs was set up to echo their on in-store screens.

The second set of improvements was deeper - I wanted to bring the excitement of playing games into the website itself. Our proposal was a set of playful interactive easter eggs dotted throughout the website to gamify the job-hunting experience. So the intro photo mosaic would transform into a playable Breakout-like game, the list of jobs would be presented as a playable slot machine, and there would be a host of other playable challenges throughout the website.

mockup

Property apps

While I was at Endeavour London, a specialist property marketing agency, I expanded their offering with bespoke apps.

The Toolworks app

sketch
sketch
sketch

Cambridge Riverside app

sitemap
visual
visual
visual
visual
gif

The apps I created there had a number of features.

There was a robust back-end, which allowed agents to change contents of all the apps and websites on the go from a single secure online location.

The apps also displayed all sorts of contents including videos and interactive 3D models. They were also able to work with other physical devices in showrooms like interactive physical models, projections, sound systems, printers, etc.

The later apps even featured VR walkthroughs to fully experience the properties.

easyJet careers

‘Generation easyJet’ - It's more than just a slogan, it's a state of mind. It defines the attitude of the people who forge their own paths, and enjoy every single minute of it.

So it felt only natural to bring this to life when they asked us at SMRS to create their new careers site.

Here's the story in detail...

sketch

First we had to thoroughly understand the visitors: future candidates - research their motivations, attractors as well as pain points and create website content around the findings

sketch

Once we knew the personas and their motivations, I built user journeys around each of them and their considerations

sketch

The next step was to build a sitemap around those user journeys, and I phased the development to allow for ongoing testing and an organic evolution of contents

sketch

Once we knew and agreed on the direction of travel, I drew up the initial design concepts and features I wanted to use throughout the site

sketch

Each section of the site would cater to completely different people - flight crews, financeers, engineers etc. I really wanted this to be reflected at every touchpoint

sketch

To prevent things spinning out of control, I developed a set of visual blocks that would be used throughout the site to keep things unique, but consistent

sketch

As the project developed, the actual designs began to crystalise through conversations with the client

sketch

The designs were gaining fidelity and how the website would behave across different devices was high on the agenda

sketch

I was in close collaboration with the developers to work out the technicalities of how to tell the story without the technology getting in the way

sketch

I also wanted to infuse the site with little moments of joy and delight.

sketch

So as the launch day approached, I began to focus on the details of interaction...

sketch

... how buttons behaved, how transitions were animated and what elements had hidden reveals.

sketch

The summary of the design stage was a style guide which defined the visual blocks used throughout

sketch

Since at this stage the site had grown considerably and would be maintained by different people...

sketch

... setting a clear visual language was crucial for future-proofing the design of the site

design
design

Final site layouts

mockup
mockup
mockup

But that wasn't the end of the story.

It's not what you think it is

or 'How to completely change what a company means to a person (in one minute)?'

Even once all the designs were done, a key challenge remained: how to get visitors not to think about the company just as airplanes, but as a whole corporation?

They are a lot bigger than most people think, and employ far more people than just flight crews.

To tell the whole company story in a nutshell, I designed and coded a short animation to sit on the front page, which tells the company highlights in one minute.

The party trick? It was built in HTML5, was fully responsive and easily editable - that was a particular concern, since the site needed to work across 6 languages.

frame
frame
frame

Animation frame designs

The animation proved to be a success across the board - with the client, with the users and with the recruiting team.

When a follow-up IT microsite was built, we of course carried on with the animation format.

I created a series of additional HTML5 animation pieces for the IT microsite. This one is about some of the eye-watering numbers the IT department needs to support.

And the site is flying steady.

It received laudations at industry award ceremonies, it attracted two million new visitors, the visit duration has gone up by 25% and bounce rates have been reduced between 20% and up to 45%.

To wrap it up there, that have been some of the times I changed potential into pixels.

If you'd like to see more examples please do get in touch.