I'm Fraser. I'm a designer and developer of web and mobile apps, specialising in training and elearning.

Thanks for visiting my portfolio

Sky Q

For the Sky Q project, I was tasked with building a visually arresting, easily controllable toolkit which would serve as a central hub for information. I was part of a team of two and solely responsible for the main framework and the ipad app, as well as some of the content.

Because the project hadn't launched, and was still under very strict NDA, we had to adhere to the brand more ridgedly than ever before, but still find a unique identity for the toolkit.

The content would also be accessed by the Sky Engineer workforce, an offline iPad app version had to also be produced.
I designed two unique user interfaces, depending on whether you were accessing via a touch screen device or regular computer.

Shortlisted for the

The user interface was designed to keep with the theme of 'fluid viewing'. Buttons ripple out from each other like drops of liquid, while icons animate between states.

As menus are opened or closed, the content of the page shifts in scale smoothly to accomodate them.

Even transitioning between pages was designed to be fluid. The background subtly fades between states as the content flows from one page to the next.


I wanted to demonstrate building a webpage which was highly interactive and conveyed a lot of information but was still easy to navigate and didn't leave the reader feeling overwhelmed or confused. This is a single page web-site I built about the Zeiltoren in Almere, which features

The navigation is designed to be as simple as possible...just keep scrolling!

Click above to view site
(Currently under development - May not display properly on certain screen sizes)

User Interface design

I had been aware for a while that, for every new project, I had to duplicate a lot of the same work, which didn't leave much time to try and design anything new. I decided to build a template which would take care of common tasks, such as handling navigation, and allow me to focus on designing an intuitive user experience.
Once I had a version I was happy to work with, I set about shaping it in such a way that colleagues who were not used to working with code would still be able to create and edit advanced interactive media.
This freed up more time so I could focus on the user interface design and make it unique for each project. The examples below, depsite all looking very different, were built using the framework.

Customer Essentials

This was an attempt to recreate the interface of the Sky Planner as a framework for navigating elearning or slides. It's an interface which every member of staff would be extremely familiar with,

Love Billing

The original of this module was the first project I worked on when I started the role with which I had never been entirely happy. I relished the opportunity to revisit it when it was updated a year later and rebuild from scratch.

Price and Packages

The brief for this project was to make the learning as attention-grabbing as possible, So I turned everything up to eleven and included full screen video backgrounds, parallax scrolling page navigation and other animated elements.
Every page was different from the previous page, but I was careful not to distract from the content by still utilising lots of white space.

Parallax Animation

I love the depth you can bring to a simple photograph by carefully slicing it into layers and then subtly moving the layers. It's a technique I find myself returning to quite a lot. Sometimes as part of a video or presentation, sometimes interactive. Click play below to see some examples.

LT2016 Microsite

Myself and a few colleagues visited the Learning Technologies conference in London at the start of 2016 and were asked to present back what we had found to the rest of the team. Rather than try to convey just in words, I had the idea that it would be better to write up my findings on a website and accompany it with videos and links to further reading, which they could then explore at their leisure.

Click above to take a look.

A bit about me

I'm a web developer, and user experience designer, specialising in elearning and training content. In the 20 years since I graduated from Dumfries School of Art, I have produced elearning and digital media content for Sky, Lloyds Plc, Halifax, Bank of Scotland Intelligent Finance and St James' Place Bank.

I am interested in combining many different forms of media to produce engaging interactive content. As such, I am also highly experienced in the production of video and animation. I'm always looking to develop my skills to keep work fresh for my customers but also exciting for me. I have recently started looking into the production of virtual reality content for the web and look forward to producing some results very soon.
Away from work, my passions are cycling, music, gadgets and all things Dutch. A few years ago, my wife and I fell in love with the Netherlands and we are currently learning the language

Still want to see more of my work?

I'll be uploading lots of my older work to this pinboard over the coming weeks. Check back soon for more.