The Portfolio Of
Matt Griffin
Digital
Design
Bold &
Bristolian

I Believe

In Beautiful Responsive Design

separator

I believe in responsive design that can flex and adapt to any platform, old or new, big or small. As the web and digital design has evolved it has become more and more clear that we have to take advantage of the natural beauty of the medium. I take that medium and make design beautiful and functional.

In Clean, Semantic Code

separator

Clean and semantic code is the foundation of digital design. Using the least amount of code as possible and using a consistent style and organisation, whether mine or my clients, is what makes my work stand out. Clean code makes my work easier to edit, quicker to load, more accesible, device independant and future-proof.

Knowledge Should Be Fresh

separator

On the web and in digital design the “half-life of knowledge” (the time in which half of the knowledge in a field is superseded) is easily no more than 2 years. That is why I ensure that my knowledge is always up to date by reading blogs, articles, podcasts, attending conferences and following the leaders in my field.

Knowledge Should Be Shared

separator

Digital design and the web is built on the sharing of knowledge and I believe in giving that knowledge back. By sharing through writing or speaking publicly I am able to share the unique experiences that have shaped my work and helped my employers to grow and flourish. I give talks on digital design, and believe that sharing helps me work better and deliver more for my employers.

background

Hi! I'm Matt

separator

Front end development and digital design are a passion for me. I love modern web design and the opportunities it creates. I am a talented and hungry self-starter in front end development and digital design. I’m terribly enthusiastic and an ardent advocate of web technologies and truly hope to be one of the best in the industry one day.
If you’re interested in working with me, check out my portfolio below:

About Me

My Expertise

separator

I am a front end developer with two and a half years freelance and three years agency experience. An artist can work on canvas or in stone but when it comes to digital design and the web the true medium is HTML, CSS and Javascript. This is the domain of the front end developer, although I would prefer to be called a digital designer as I have a deep appreciation of visual design and typography; Beautiful counters, good kerning and artful ligatures are an obsession for me in all of my front end work. I am a huge typography enthusiast and I collect fonts obsessively. When tackling user experience design I focus on establishing user identities and ensuring a truly understand my client’s brand identity before I approach any project. I love making visual designs, responsive and accesible and all of my work is created with W3C accessibility standards in mind and my code is created as semantic and as valid as possible to work with older browsers and screen readers.
I am also extremely technically capable in a myriad of front end technologies, tried and tested over 5 years of freelance and agency experience within the industry. I am an expert in Javascript, PHP, HTML and CSS and even though I do not personally believe that Javascript should be treated as the entire web stack I do have some experience with MVC based Javascript work. However, there is more to web and digital design than just languages and I have tried to sum up the general areas of my knowledge and expertise below:

separator
HTML & CSS
97% Complete
Javascript
95% Complete
PHP
93% Complete
Project Management
80% Complete
UX
75% Complete
Coffee Brewing
15% Complete
separator

Visual Design Tools

Photoshop CS6, Illustrator CS6, Sketch, Adobe inDesign, Gimp, Adobe Kuler, imagoptim, jpeg mini, Various Grid sytems including Gridset

Design Techniques

W3C Standards Compliance, Object Orientated Design, Molecular Design (Brad Frost), Object Orientated CSS, B.E.M. CSS.

Web Technologies

HTML5, CSS3 , SCSS, Java Script, backbone.js, ember.js, PHP, XML, JSON, API integration, Ruby, Flash Animation and banners.

Build Tools

Chrome Developer Tools, Sublime Text, GIT Version Control, Grunt (Whole build process is in grunt using various tools), Sass, Personalised biolerplate (Modernizr, selectivizr.js, respond.js, CSS3 Pie), Spotify.

Frameworks, Libs. & APIs

jQuery, NWMatcher, MooTools, jQuery Mobile, Ember.js, Backbone.js, Phonegap, Twitter Bootstrap, Gridset, Facebook Graph, Twitter API, Google Maps v3, MLS (US real Estate Listings API). As well as a myriad client specific APIs and APIs of my own creation for clients.

Back End Technologies

PHP, Node, Ruby(just enough to be dangerous). I am also very accomplished working on the unix command line, running chron jobs etc. As well as editing on the fly in Vim or Nano on a server.

Content Management Systems

Perch, Expression Engine, WordPress, Drupal. I can bend anything in PHP, as I am an extremely fast study and pride myself on my adaptability in resolving any backend resrictions.

Featured Work

Clients

Portfolio

Soap & Glory In Store Web App

Design / Front End

This project was the build of a clients mobile design. The mobile website was a part of an instore campaign in Boots. The user would scan a QR code on a Boots make up stand and be taken to a mobile website which would showcase particular collections of makeup as well as a demonstration video.

Hurdles

The biggest restriction was the nature of the design which was handed over. It was a graphic design which did not understand the pitfalls or advantages of digital design. As such it was a design which was extremely image heavy. In addition the client insisted that those images be of a very high weight, despite being advised against this.

How I Created Value

The website was crunched and encoded very heavily and as much of the design was turned into CSS as possible but unfortunately I do not honestly believe that we were able to guide the client to best outcome in this project. However the client was very happy and we were able to remedy all of these issues in their next project with us.

Tech.

  • HTML 5
  • CSS 3
  • Git Version Control
  • Base64 encoding of images
separator

Creditcall.com

API integration / Design / Front End / Pattern Library / Project Planning / Team Management / UX

Hurdles

This project required a complete redesign and UX overhaul. The information architecture of such a complex company with such varying and complex products was no small feet. By the end of the project our digital team was more adept in the nuances of the company than anyone outside of the companies executives.

How I Created Value

I ran the entire front end build as well as instigating the UX overhaul. Then, through in depth interviews with each team in the company, analysis of analytics and by applying industry best practices I re-built and overhauled all of Creditcall's content, conversion and UX goals. At the core of which, was a comprehensive Salesforce integration.

Tech.

  • Craft CMS
  • Javascript
  • SASS
  • Wireframing
  • UX
  • Information Architecture
  • Project Management
  • Salesforce
separator

SBD Website Re-Launch

Back End / Client API / Client Liason / Front End / Pattern Library / Project Planning / Team Management

This is a large website build which was pitched and managed by me on behalf of Xcetra Media. The structure and organisation of the project has been put together by myself and is an example of very modern mobile first design. The nature of the design in this project is also quiet unique in that it's structure is based upon Brad Frosts' Atomic Design principles. The entire website is focused on educating users about building securely.

Hurdles

This was Xcetra's first large scale website build, one in which I managed the entire project. My responsibilities included being the main contact for the client, educating both the client and the design team, liasing with contractors and ensuring the smooth running of the whole project. The website is a complex peice of project management as well as design and build. Technically the largest share of the complexity in this website is in the large product search facility and CRM API integration.

How I Created Value

I used a lot of things which I gleaned from work by Paul Boag as well as experience in my freelance work. Managing the project has proven to be a very fine art for which I am glad I had prepared so thoroughly. As without the depth of preperation and safeguarding which I built into the project it could have quiet easily gone off track due to a number of internal client issue throughout the project.

Tech.

  • SASS
  • Grunt
  • Wordpress
  • Project Management
  • Mocking Up
  • Information Architecture
  • Graphic Design
  • API
  • CRM
separator

Warminster School

Front End / Pattern Library

This build was for Warminster School, and was completed while I was employed at Mud. Warminster School required a brand re-design and new website, which integrated with the school's current IT systems. On this project I did front end development and built the website pattern library.

Hurdles

The biggest restriction in this project was the timescale.

How I Created Value

The brief required the use of "object orientated design", following the methods of Brad Frost. As Such I created a full pattern library for the build, which enabled the team and the client to be able to re-build designs and pages at a molecular level.

Tech.

  • HTML & CSS
  • Javascript
  • PHP
  • Expression Engine
  • Molecular Design
  • Advanced Image Compression
  • Backwards Compatable to ie8
separator

Creditcall Express Boarding

API integration / Design / Front End / Pattern Library / Project Planning / SOAP / Team Management / UX

Hurdles

Creditcall builds and maintains a lot of software. From software involved with our platform to integration based software such as our SDKs and e-commerce integrations, helping our customers connect and integrate their business into our payment gateway.
However we also have user-facing software in the form of WebMIS. WebMIS allows our customers to board new terminals onto our payment gateway. Which is essentially how they plug their business into the Creditcall payment gateway, and start performing transactions as a business.
Creditcall has been growing in Leaps and bounds and as such the scalability of WebMIS has become a problem. "Express Boarding" was the solution. A project which has allowed Creditcall to better scale their current boarding process.
By better understanding Creditcall's users, their user journeys and applying User Experience best practices; Express Boarding allows for an easier, quicker and more effortless boarding process for the vast majority of our customers.

How I Created Value

For this project I ran a comprehensive UX process. Including flying to the US to interview a number of our customers across the continent. This allowed us to better understand how our boarding software was being used and to better understand and design our software so as to better match what our users actually wanted and needed to do when boarding their business onto the Creditcall payment gateway. I also completed the entire front end design and responsive build.

Tech.

  • Laravel
  • Javascript
  • SASS
  • UX
  • Information Architecture
  • Project Management
  • SOAP
separator

To see the rest of my work, please contact me.