UX & UI Design

See a range of SAAS and digital design projects that demonstrate my UX and UI design and development skills and experience. Product sectors include Education, HR, Financial Services, Print Repro; Health & Leisure & Internet Of Things.

Project Examples

See a range of projects I have worked on that demonstrates my UX and UI design experience:

If you wish to see more marketing based web design project examples go here

Jan 2017 - Present day


Barclaycard Smartpay Hub

UX design for a new service portal for BPS merchant services. The project involves migrating thousands of existing SME, Mid and Corp customers to a new service portal to enable them to complete a wide range of tasks including reporting, managing chargebacks, reconciling transactions, downloading statements, accessing analytics data to improve business strategy and influence business planning. 

We started with a unique three month research and discovery phase with the CX department to detail the functional requirements of the portal resulting in outputs that included a research deck and a CX Matrix that recommended feature prioritisation and build phases. We developed a new lean ux process and added UXR to the ongoing integrated testing methodology within an agile two week sprint cycle. This resulted in a fully validated product from a usability and customer need perspective.

Barclaycard Smartpay Hub (epos)

As part of the CX team I developed new personas to understand the users for this new electronic point of sale product. This involved conducting interviews, capturing transcripts from recordings and mapping proto persona from the insights. I followed this up with developing an ‘As is’ journey/service map for the day one (MVP) proposition for this new product. This involved running workshops with stakeholders including the Barclaycard partner ePosNow to map the ownership of different parts of the customer servicing journeys. This was followed up with a Go to journey map to capture the ideal proposition (vision) across all delivery and support channels. CX vision journey map 

Barclaycard Smartpay (payment gateways)

Complete a CX “Go to” and “As is” review of Barclaycards position in the eCommerce Gateway market and develop a new digital strategy to sell the range of Barclaycard payment gateways on Present the strategy to Exco. Use the prototype journeys and roll out new digital channels in partnership with marketing in 4 phases.

Deliverables / Accomplishments

  • Identified all gaps in existing marketing strategy
  • Proposed a “Go to” solution to fix strategy to Exco that was approved and funded
  • Detailed design of new digital journey pages on to support new strategy
  • Supplied steering documentation to all stakeholders across the business for future eCom gateway strategy
  • Mentored stakeholder groups in relation to parallel digital channels
Feature ideation and card sort

The portfolio for this project work is under NDA so can't be displayed in a public forum.

To access the work please contact me for the login details to view the page?

Contact:     07775565777

2016 - 2017

oneTRANSPORT - Interdigital Europe


UX & UI designer within a team of 10 developing oneTRANSPORT. The project was at an early discovery phase with only some features of the platform built. I developed personas, a hypothesis backlog in Trello and supporting journey concepts for the data broker section of the platform. I also set in place the atomic design guidelines to apply a design structure the the new build of the platform user interface. I also supplied all design specification documentation to developers and supporting UI resources for the build.

Product description

Information about the service can be found at

A collaborative research and development initiative that extends the smart city concept to enable local authorities to enhance their transportation services using a combination of data sharing and an innovative business model, thereby unlocking new external financial resources and their own underutilised transport data. The £3.5 million project, co-funded by innovate UK, will span two years laying the foundations for smarter transport networks in the UK and internationally. I worked on areas of design that includes:


  • Define baseline platform user base personas
  • Persona needs analysis (mapping back to assumptions against each epic)
  • Using a lean UX methodology (in Trello) declare user and business assumptions
  • Prioritise assumptions
  • Convert assumptions to hypothesis statements
  • Break down in to secondary hypothesis and capture in a backlog
  • Prioritise the hypothesis backlog (risk of being wrong)
  • Run design hypothesis workshops
  • Write key user journeys (using base hypothesis)
  • Build prototypes (using user journey descriptions)
  • Capture and design of design standards documentation (styleguide, wireframes, visual design) within Jira and Confluence
  • Defining underlying design standards in an Atomic Styleguide (Grids, typographic rythm, layouts etc) using Craft plugin within Sketch. Styleguide pages uploaded to Invision to share with team.
  • Epic evaluation and mapping of scope
  • User experience mapping (swim lanes, journey rooms etc)
  • Content mapping against proposed Information Architecture
  • Final User Interface visual design layouts (pixel perfect for development teams) created in Sketch and coverted in Invision into prototypes
  • Development of detailed design documentation based on user stories and acceptance criteria defined by business analysts and owners


Images of the platform are not available currently as they are restricted and I am under NDA.

2014 - Present day

Racketware Ltd

I have been the main designer from a UX and UI perspective of this ground breaking sports motion sensor product for squash. The sensor fits on to the butt of a squash racket and captures a players movement 500 times per second plus the impact of the ball on the strings. I have worked closely (over 2 years) with Paul Mellor (Manging Director and Product Owner) developing the UX journeys and prototype designs for the initial web application and current app (IOS and Android). We developed a complete set of player/user personas to focus the design towards squash players and coaches. We ran player workshops to work out their needs resulting in a rich app that sits behind a user experience that is intuitive to a players playing behaviour and play patterns. I have developed the Racketware brand identity and supporting marketing materials such as packaging and suppor collateral. the apps look and feel has been designed to fit with fitness market segment. I am now a shareholder and this project has become a long term commitment. We made the first sale of a sensor in July and the product goes on general sale in Sept 2018. Watch this space!

Phase 2 of the porduct will involve the play data being uploaded to a website where it is processed against a series of rules resulting in information that a player can use to improve their play. We designed an analysis and training cycle that will allow players to review their performance and convert identified faults in their game and convert them to training goals. This is a ground breaking approach rather than just feeding back statistics to players. The product has been developed in partnership with Dunlop.

Visit the Racketware website to learn more about this first to market sensor product?

Squash player
Racketware squash sensor


2015 - 2016

FutureYou - Zurich UK Life

I worked from the inception of this new business project within a 4 man UX team. Designing the user experience for this new approach to selling pensions, investments and insurance. I worked on all areas of design that includes:

  • Persona development.
  • Persona needs analysis (mapping back to assumptions against each epic)
  • Mapping of the UX design process so that it integrated within the Kanban process instigated by Deloitte digital.
  • Capture and design of design standards documentation (styleguide, wireframes, visual design) within Jira and Confluence
  • Defining underlying design standards in an Atomic Styleguide (Grids, typographic rythm, layouts etc)
  • Epic evaluation and mapping of scope
  • User experience mapping (swim lanes, journey rooms etc)
  • Content mapping against proposed Information Architecture
  • Competition analysis and audits (ISA market)
  • Customer site visits with marketing to evaluate engagement tools
  • Creation of wireframes / prototypes (using Axure RP) for use in user testing and elaboration of epics
  • Epics elaborated include pension tracking, help and support, secure mailbox, external comms, document library, engagement tools (Penny pincher)
  • Collaboration within team to facilitate and take part in user testing workshops with external agencies and internal community
  • Guerilla testing of design concepts within the office environment and externally (coffee shops etc)
  • Final User Interface visual design layouts (pixel perfect for offshore development teams) based upon wireframes
  • Development of detailed design documentation based on user stories and acceptance criteria defined by business analysts and owners
  • Commissioning and management of external design agencies in the supply of media resources and tools
  • Close collaboration with delivery BA's at Deloitte
  • Supply of media and design to internal marketing team

Product description

The release 1 version of the service was designed to move existing corporate clients pensions across to FY. We design linking and transfer processes and subsequent consolidation functionality. We also designed a public wrapper that included useful financial information and tools that allowed users to visualise what they needed to contribute to their pension to enjoy a comfortable retirement.

Release 2 version added Life insurance and improved engagement content.

Release 3 includes a Magazine, more tools, webchat, stocks and shares ISA and document library to hold product documentation. The whole site has been built using Salesforce and other backend CMS systems to enable the business to track all user activity and edit content quickly based upon tracking and reporting.

 The service can be found at

2012 - 2014


I worked in the UX + UI designer role on this project for 2 years, from its initial design and build. It has been adopted widely in the leisure market place by most of Gladstones existing clients, particularly universities who refresh most of their membership every year. The service had to be designed so it could cater for a range of varying user journeys depending upon Gladstones varying customer requirements. All Gladstones customers were consulted widely so all their user requirements were captured during the UX design phase. UX prototypes were developed using Axure to facilitate this process and feedback was iteratively captured until clients signed them off. These design specifications resulted in a configuration module and range of templates that allowed technical services to configure bespoke solutions for each client installation. I designed the front end of the product so it can be easily customised using the Twitter Bootstrap CSS framework. I also acted as a customisation service to clients wishing to brand the service so it fitted with their online presence. I developed a range of documentation to support these activities that service teams used in client contact situations.

Learn more about this product on the Gladstone website or see some screenshot examples below.

Product description

Join@Home is designed to allow leisure club/centre customers to sign up for memberships. The flexibility of the product allows for a quick and easy way to manage the process for leisure customers to purchase either paid for or direct debit memberships, or to simply register there details for pay as you go. This flexibility ensures the product is ideal for budget gyms to multi-site installations. The functionality within the product revolutionises the member journey and brings the pressure away from customers signing up for memberships at club receptions.

Jonas Software

2012 - 2014


In this project I worked as the lead UX + UI designer within a team of 7 using an agile UX methodology. I worked closely with the Product Owner and customers and supplied the team with all scoping and product specification documentation such as wireframes and prototypes using Axure and Balsamiq. I also hand coded some of the (htm, css using the Twitter Bootstrap framework and jquery library elements) the base templates. I implemented a base front end resource library that controlled the theme structure (common to all other software product modules). This was managed using Nuget packages for each release and an underlying styleguide at the shared library level of the code base.

Visit the Gladstone website to learn more or view screenshots below.

Product Description

eyeQ is a powerful analysis and Business Intelligence module that allows you to quickly interrogate your database and create interactive reports and charts. The complex data structure behind a Gladstone system is simplified through a data layer and cubes built specifically to accelerate the speed and ease of data analysis. With all the dimensions and measures needed to explore data presented in one place, deep product knowledge for reporting is a thing of the past. This intuitive tool makes it easy for you to pivot, slice, dice, filter and present your data in numerous ways including tables and charts.

When linked to the Business Process Manager and Communicate you will be able to automate your reports and analysis, schedule automated communications and report distribution. And, if you want to use your favourite queries with another reporting or communication system simply attach to it using an ODBC connector. eyeQ can help you meet many of your most pressing business needs. Whether you’re building KPIs, presenting performance information to key  stakeholders or interrogating your business to identify trends that are driving your success, eyeQ is the Business Intelligence tool that you need.

2009 - 2010

Contact Manager

Gladstone Contact Manager is designed to help leisure management companies make the most of sales and marketing prospects, contacts and existing members. The software allows users to easily look up names, addresses, and phone numbers in seconds. Each record includes an unlimited contact notepad so you can keep notes from each conversation and meeting. A unique history log allows you to schedule new communications and recall all completed activities for every contact.

Jonas Software
01/2007 - 09/2008

Ceridian HrEvolution

Worked in the Product Management team during the development of a new product suite called HRevolution that provided hosted HR services.


  • Create UI brand guidelines to give direction to the new brand.
  • Create new skins for the 6 existing software modules that will be brought under the same product offering.
  • Create high fidelity concept visuals for sales staff to use a future concept materials for client presentations.
  • Mentor and aid Product Managers in implementing new design.
  • Facilitate design workshops to create new product concepts and capture resulting wireframes and specification documentation.
  • Help sales in white labelling the service for new business pitches.


  • Created brand guidelines for the new product suite including identity resources and documentation.
  • Re skinned all existing product modules (internal and 3rd party) so they had a common look and feel.
  • Substantial business wins due to product customisation/white labelling work so Hrevolutions user journey looked and felt seamless with customers systems.

Technical contribution:

  • Created a single set of UI collateral ( CSS skin files).
  • Style usage guidelines (used by internal and 3rd party developers/suppliers).

2005 - 07

Fujifilm XMF Workflow

I worked as the lead UI designer on the first version of this product. It was a collaboration between FFEI (Hemel Hempstead) and Fujifilm in Japan. The first iteration was released as Fujifilm XMF Workflow. I worked directly with the product owner within the development team creating UX and UI prototype collateral, use stories and user journey protoypes. I also created all the UI collateral including 3d animated button interfaces for the main home screens. I also built the help documentation within the product using Madcap Flare.

Learn more about RealPro Workflow 

Product description

RealPro Workflow System is a unique PDF based print production workflow combing the very latest in workflow technology with powerful production tools which allow multiple users to control all aspects of job management from an automated central production solution.

The unique clean architecture uses industry standard JDF and PDF technology combined with the latest Adobe PDF Print Engine (APPE) to offer fast, efficient and accurate processing of the most complex design content, including PDF transparency, ensuring complete job integrity and client satisfaction. Industry standard Enfocus Preflighting is also incorporated offering automated file checking and correction.


Caslon & FA GUI

This print device required a UI look and feel and set of icons to be used on the low resolution touch screen displays used to control print output. The underlying control unit used a Xaml based set of code that defined the layout and styling of the controls. I used the Xaml editor to create the extra styling for the new functionality. The graphics had to be in 8bit greyscale vector format. I created the icons in Adobe fireworks and exported the resources at the required specification. The icons design needed to work on all interactive states which were controlled within the code.

Product description

Caslon & FA is a print device manufactured by FFEI.

FFEI Caslon & FA GUI Design Examples
2000 - 2002

Maths ALive

Maths Alive was designed as a whole class teaching service. The use of electronic whiteboards had just come in to mainstream use in UK schools and RM wished to dominate the market with software services that could be used on them. The system allowed teachers to plan lessons offline (planning lessons at home away from a wifi or LAN) using a local client. Then when connected back to the hosted server in school upload their settings so they could deliver maths lessons.

I worked with the product owner to provide all the wireframes and specification documentation such us look and feel guidelines required by development. At this time RM used a waterfall methodology so it was all upfront design then build.

Related Projects

If you wish to see more marketing based web design project examples go here