Hello I'm

Alan Oakden

Web & App Developer

About Me

Hello, I’m Alan, a person interested in creative digital work, based near York. I have experience developing websites and apps, but also managing products that have served thousands of people. In addition to this, I have a strong understanding of many Adobe Creative suite tools that I utilise for product wireframing and advertising.

  • React Native
  • HTML
  • CSS
  • PHP
  • Wordpress
  • Javascript
Download CV

What I do

UI Design and Wireframing

It's so important to fully wire frame and sketch out any product screen by screen before a line of code is written. Placing every element on a screen makes you consider the background logic and functionality required, how new information will be relayed to the user and if any navigation flows need to be reconsidered.

Web Development

I've created websites from scratch as well as enhanced websites that have been initially created by other digital agencies. I'm also well versed in developing tools for internal use by organisations, such as Intranets and CRMs. I am also experienced with specifying and configuring APIs so that services can interact with each other. The current technologies that I am most excited about are React, graphQL and Gatsby.js.

App Development

My most recent work experience has been app development. I am blown away by the pace at which apps can now be created with hybrid tools like React Native. It's now possible to create an app with one set of code that eventually builds into an iOS and Android product. Furthermore, the expo SDK allows for rapid development that enables easy implementation of previously complicated libraries like react-native-maps.

Technical Skills

I am not usually a fan of skill charts, but i will try to highlight my strengths here
React Native
85%
Javascript
80%
HTML
80%
CSS
80%
PHP
20%

Professional Skills

  • Communication
  • Team Work
  • Project Management
  • Creativity

Recent Portfolio

  • All Categories
  • Web Design
  • Branding & Promotion
  • App Development

Latus Training Website

In order to get the website live as quickly as possible we limited initial functionality so that users could simply book a gym class whether visiting the site as a signed in user or a guest.

The 'Amelia' booking plugin is aimed more toward 'appointment' services such as massages or one to one PT sessions. I worked around this by setting up each class as a seaparate 'service' and creating an associated 'staff member' named after the service. From there, I gave each 'staff member' working hours that would limit the days / times that users could book a class. This provided functionality similar to that of 'woocommerce booking' plugin, but for a fraction of the price.

  • PHP
  • HTML
  • CSS
  • Wordpress
Live Demo

Landing page.

Following section.

OK 2 HealthyLife App

Outokumpu is a global leader in stainless steel. They have 10,000 employees serving over 30 countries. As part of the Sheffield site's health and wellbeing campaign I created an app that would encourage employees to increase their activity levels, improve their diet, and engage in wellbeing events hosted by Latus.

To create the app, I utilised the Expo SDK. This enabled me to preview changes in realtime, while building down into an .ipa and .apk package for app store releases. Expo also enables over the air updates, so minor fixes and improvements can be published without the need for app store approval. For the backend I used firebase. This provides a foundation for user authentication, image storage and a no-SQL database. Furthermore, cloud functions enables a lot of logic to happen away from the client. Reducing the app size and improving screen load times.

App login provided on request

  • Firebase
  • React Native
  • React
  • Javascript
Playstore Link

App PSD used in app promotional materials

App Home Screen

Macallan React App

Macallan needed a bespoke checkout experience that would enable US customers to checkout via the Thirstie retailer network, while still preserving existing Shopify functionality for visitors from other countries.

The solution was a custom Drupal module that in turn loaded a few interconnected React micro apps. The functionality of these apps were; to check product availability and update existing product listing pages accordingly, display product availability on the product details page (and enable the user to update their location), maintain cart state so the user could add a mixture of products and different quantities while still limiting certain orders and to provide a checkout integrated with the Braintree payment gateway.

  • React
  • PHP
  • HTML
  • CSS
  • Javascript
Visit Website
Macallan product page

Product page

Macallan cart

Cart widget

Macallan popup

Modal popup

WaterAid Website

WaterAid are one of the main clients for Access digital agency. While working at Access I have worked on various projects for WaterAid as well as helping with their bi-weekly maintenance cycle.

Some of the main projects I have embarked on are the homepage redesign and the engagement tool, which is a custom interactive tool that site editors can embed on any existing page to provide rich quizzes and polls.

  • Twig
  • HTML
  • CSS
  • Javascript
Visit Website
WaterAid banner

WaterAid hero banner

WaterAid Banner

Another WaterAid hero banner

WaterAid Listing Component

WaterAid 'listing' component

Law Wales Website

The Welsh Government run a website that provides a break down of the welsh law so citizens can better understand the laws that apply to them through the devolved government.

The client briefed that they wanted a simpler CMS for content population, and for a front end redesign. The Access design team re-designed all site pages as based on the Welsh Government's 'GEL' style guide document, while development for the whole site was completed from start to finish within 6 weeks. I built the site on Drupal due to the agency's familiarity with it as a CMS as well as its ease of use when setting up multi-lingual sites. The front end theme used Barrio Bootstrap as a base, with a custom theme layered over the top that utilised SASS mixins and variables for faster front end design and development.

  • Twig
  • HTML
  • CSS
  • Javascript
  • Drupal
  • Gulp
  • PHP
Website due to launch
Law Wales Homepage

Law Wales homepage (red version)

Law Wales Topics

Law Wales topics page

Law Wales Subjects

Law Wales subjects page

Emily's Journal Website

Emily was due to announce an ebook and wanted to create a shop area on her website that would take customer payments and automatically email a download link through to customers so they could download the eBook.

Later on she added a jumper to her shop - they all sold out!

  • PHP
  • HTML
  • CSS
  • Wordpress
Visit Website

Shop Page

Animated Videos

The app promotional video can be repurposed with different colours and screenshots to appeal to the target company in question. The app was originally going to be a single app that would re-brand depending on the user that was signed in. However, later contracts led to separate apps being developed for individual companies.

The wellbeing video was generated to loop on a large screen in a hall at Outokumpu. Concurrently, the hall was hosting a variety of health / fitness initiatives such as a 'hang tough' challenge, a watt bike distance challenge and a nutrition information stand. The video really helped add a brand and some polish to the event.

  • Adobe After Effects
Animated Videos

Wellbeing Video Still

Promotional Video

Note - The original music is removed for copyright reasons, YouTube stock music has replaced it. This example was based on the idea that the video would be for a social media ad / eventbrite page / promotional website for an Art Exhibition or Artists's website.

The video was made over two days at what is now the National STEM Centre. The paintings were suspended by string from the 1st floor balcony down to the atrium area. We used DSLR camera's on a tripod (in turn attached to "dolly wheels") to give smooth panning shots.

  • Adobe Premiere
Watch Video

Video Still

STEM Learning Intranet

The STEM Learning intranet had become old and lacked wordpress updates. Some plugins had also expired and lacked support. I was tasked with moving the hosting from internal servers to third party hosting, and to liaise with a user group of staff from each department to build an intranet that suited the needs of all staff.

It was decided the existing intranet had a lack of chronological order, and unless posts were "featured" and appeared in the top left section of the site (it used magazine layout) then posts would be missed. I went with a forum style theme that listed posts by creation date and added a twitter feed plugin to list each STEM learning account. Beyond that, I added separate pages for a phone directory listing, and a tools page that listed all internal STEM Learning web services used by staff.

  • Wordpress

Home Screen

User Post

Tools Page

Have a job that needs doing?

Whether it's print media, web design or app development. I'd love to hear what projects you're working on and how I can help. Whether that's full time or as an allotted amount of work.

Contact

Testimonials

Emily Young Picture

Alan helped me launch the first ebook on my website shop, and created a photgraphy portfolio website for my latest business venture. Both times, Alan maintained communication and created a product I was really happy with.

Emily Young

Photographer, Blogger, Iron Man World Championship Competitor
David Thorpe Picture

Alan Oakden originally joined STEM in 2010 as an IT apprentice and, in a later role as Online Services Liaison, was able to bridge the gap between the culture of system users and providers during the successful roll-out of our new booking system.

David Thorpe

COO, STEM Learning
Sang Lostrie Picture

Alan is a pleasure to work with! Not only did he take the intiative to revamp the gulp files on the WaterAid project to ensure the front end development experience was easier, he also dedicates a lot of time to helping his peers and answering any questions. In particular, he's received high praise from younger colleagues for his training sessions that's enabled them to become key players in their own right.

Sang Lostrie

Senior Developer at Access