Jane Dalton

UX & Development Portfolio

About

Welcome to my new Portfolio site. This is in the early stages of being put together and I'm adding more as the weeks go by. My name is Jane Dalton and over the the past 10+ years I've worked for numerous companies both coding and designing. I'd class myself as mainly a Front End Developer but I'm now working towards being a Full Stack Developer. As well as a coder, I'm pretty handy with Photoshop and Adobe Creative Suite, which I love to use and delve into, though I wouldn't class myself as a Graphic Designer.

I code on my trusty Macbook Air which along with Mac OSX also runs Windows in Parallels - great for cross browser testing or working on a .NET project - and I have many years of UI/Front End Dev and UX experience. At the moment I'm loving creating projects using Codekit designing in the browser on multiple devices with instant browser refresh on save and its instant compilation of my Sass(y) stylings and Javascript. Responsive sites come together quickly and I'm very adept with Bootstrap, Zurb Foundation and other Front End Frameworks (or coding my own responsive CSS3) for rapidly putting together sites and User Interfaces.

When it comes to coding, as well as the usual HTML / CSS / Javascript / jQuery / Angular, I've server side experience with PHP/MySQL - such as Magento and Wordpress - and recently had 5 years working in a .NET environment as a Front End Dev. I'm currently getting into NodeJS and the MEAN stack with both Angular and now Angular2, and starting to delve into React (along with Redux and Flux) and I will have new example projects on here soon.

I enjoy various pastimes though I guess the main one has always been music. I've been a Guitar/Bass teacher for many years and taught in many schools and colleges in Lancs in my 20s before getting more into being a fulltime coder from 30s+. After many years playing gigs all over the UK I got more into DJing (far less drama and stress!) and I've been a semi-pro DJ for about 15 years now and ran a clubnight at Preston UCLAN SU's wonderful 53 Degrees venue, putting on many clubnights as well as gigs/festivals bringing over international artists and DJs, though I've taken a break from the promoting side for now. Currently I'm a Saturday night resident DJ on the infamous Canal Street in Manchester. I enjoy cycling and yoga (though I'm not exactly 'spectacular' at either, but still love them), and I live with my partner and 2 Sphynx cats in a little flat on Salford Quays.

Portfolio

Some recent examples of my Web Dev coding, UX & Design. More to be added soon.


Project: The Imperatrixx DJ/Producer Wordpress Site

Aim

To create a Wordpress site for a "Sci-Fi / Halloween-ish" Dance music DJ/Producer.

This will features various sections aiming to provide a range of information for this client's music project.

What I Did

  • Set up a Wordpress installation on a XAMPP local testing stack
  • Work out a Wireframe Layout for the site using Balsamiq
  • Hand code the Wordpress template incorporating Zurb Foundation
  • Configure Wordpress
  • Code a responsive Wordpress Theme layout for various devices using Codekit compiling Sass
  • Main background created in Photoshop
  • Designed the Logo based on a Serif Romanesque font ('Imperatrix' is an ancient Roman word meaning Empress) in Adobe Illustrator
  • Code a Home Page layout featuring Sections with various backgrounds
  • Upload and deploy the Wordpress install and Theme to a PHP hosting server
  • Icons for Various Social Media links
  • Put together a video using Adobe Premiere and Audition

UX Wireframing

Wireframe Layout

Summary

The site has now gone live and further additions such as the Featured Show section in the Wireframe will added.

The Design

Portfolio Design
View Site

Project: Magic Box Ltd

Aim

To create a colourful Magento eCommerce website for this City Centre Manchester wholesale fancy dress company.

The site was to be based on an original static Photoshop design put together by their inhouse Graphic Designer.

This site will feature over 7000+ products and with many categories and subcategories all generated via their already in place EPOS system.

What I Did

  • Set up a Test Server so the various Directors of the company can also monitor design and development and give feedback
  • Installed and configured Magento
  • Created and installed Magento Theme Template
  • Installed Zurb Foundation for it's responsive UI and Layout components
  • Created a menu system generated by the EPOS API. One for the Layout on larger monitors, and a duplicate using the Zurb Menu Bar for mobile devices
  • Installed a Carousel on the Home Page
  • Set up Mail Chimp for collecting email subscriptions
  • Set the Header to remain 'sticky' and always viewable as requested by the Product Owners
  • Styled the various pages and sections based on the the initial Photoshop design

Photoshop Layout by their own Designer

Initial Photoshop Design for Magic Box Ltd

Summary

The site's layout went through various changes based on feedback from the Product Owners as the project came together.

They hit a snag though with their 3rd Party EPOS API developers who were still to code up a Wholesaler extension to manage VAT complexities for their various stock, and so the site has been delayed in going live and will be completed once this is in place. The template and design is about 90% complete, with some further additions still to be decided on by the Project Owners.

The Design

Portfolio Design
View Site So Far

Project: Own Portfolio

Aim

To quickly put together an MVP (Minimum Viable Product) Portfolio Website showcasing some of my UX, Design and Development skills and experience. Emphasis on the website looking clean and minimal, responsive and have a "UX" look - and to be coded to a very tight timescale (as an example of 'rapid prototyping').

This site will then be the basis of further iterations and improvements for my online Portfolio, with a view to migrating the layout and content from the static HTML5 single page site to either a Wordpress or MEAN Stack (MongoDB, ExpressJS, AngularJS, NodeJS) based website which is still to be determined.

What I Did

  • Used Balsamiq Mockups to create a quick Wireframe layout
  • Hand coded a HTML5 site with CSS generated via Sass with a Mobile First Approach
  • Used the Bootstrap framework for speed of putting the site together with it's prebuilt classes and components
  • Used Codekit to compile Sass and auto refresh the browsers on 3 different devices at the same time (Large Monitor, Tablet and Smart Phone)
  • Gathered content and created quick descriptions
  • Presented the UX working
  • Created a display of the site in Photoshop to show The Design on various devices

UX Wireframing

Portfolio UX Wireframe

Summary

This site's layout was put together within about 1 hour and 30 minutes focussing on creating one example case study - this site - to code the layout, and the content then added. Once this first study had been created in HTML and tested, the Case Study section was then repeated with further examples.

NB. Although the aim of this project was to create a layout and MVP single page website together within a very short target time (as an example of Rapid Prototyping), adding the extra Case Studies brought this nearer to 3 hours. More case study examples will continue to be added to this Porfolio website.

The Design

Portfolio Design

Project: DJ Portfolio (in progress)

Aim

To revamp an old DJ porfolio site and rework with Angular and use Routes for the various pages and sections.

What I Did

  • Put together various wireframes for the layout
  • Installed Angular and its various routing
  • Work in progress...
View Site So Far

Project: Angular secure Admin Portal for WorkMobile

Aim

To revamp an old .NET based Secure Admin Portal for the Mobile/WebApp WorkMobile by the Manchester based company eSAY Solutions. They wanted to put this functionality into an Angular App with realtime updates on the various Severs it controls via a RESTful API.

I was to work closely with their Senior C# Developer who coded the API and for me to put together wireframe layouts using LEAN UX Methodolgy in an Agile environment, and turn those wireframes into a HTML5/Bootstrap Angular application.

NB. As this is a secure portal, it is not possible to post a link to view the App site, but I have included some of the UX Wireframes.

For this example, just a few of the Wireframes are shown.

What I Did

  • Put together various wireframes for each of the various Portal UIs based on requirements and feedback from the various Stake Holders on the project
  • Coded Bootstrap HTML5 page layouts based on those wireframes
  • Wired in Angular with the RESTful API for those various interfaces
  • Fixed bugs based on feedback from lead Tester
  • Incorporated the DataTables jQuery library to present tabular data

UX Wireframing

Secure Login
Login UX Wireframe

Dashboard
Dashboard UX Wireframe
Form "Teleport"
Form Teleport UX Wireframe

Mobile Users UI
Mobile Users UX Wireframe
New Mobile User Form
New Mobile User UX Wireframe

Summary

This Angular Admin Portal was put together working very closely with multiple stakeholders to create a fast and more effecient way for the Support Team to provide a range of admin tasks across the variety of servers and applications that go towards the WorkMobile App.

One unusual aspect of the layout design brought over from the old .NET application this replaced that they insisted upon was to have two "User Search" fields, as there was the concept of "Users" and "Mobile Users" that accessed various different databases and they wanted to keep that seperation for the Support Team to be able to know which "User" type they were refering to and details they were working on (as confusingly how the app evolved for the company over the years, Users and Mobile Users could have the same exact name!), hence why this has two search fields.

Although not the most elegant UX scenario, as this was a MVP project along Lean UX/Agile principles they didn't want to to have to do extensive reworking of their main apps and APIs to help make this more User Friendly and just have the one search field.

The new Admin Portal went into use end of 2015 for the Support Team and they much prefered the improved layout and functionality.

Example Angular code

    var app = angular.module('dashboard_app');
    
    app.controller('PortalUsersController', ['$scope', '$http', 'DataService', 'ErrorService', function ($scope, $http, WMDataService, ErrorService) {
    
        //... code not shown, but happy to talk through this project on request 
        // I'm working on new Angular example projects for this new portfolio 
        // to be added soon
    
    }]);

Contact

Feel free to message me anytime jane@9thd.co.uk