Products & Services

Ux & UI Design

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

Introduction - Software Project Examples

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

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

Jan 2017 - Present day

Barclaycard

I am currently at Barclaycard working on the discovery phase for a large customer facing portal.

2016 - 2017

oneTRANSPORT - Interdigital Europe

UX & UI designer within a team of 10 developing oneTRANSPORT. 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

Product description

The project is at an early discovery phase with only some sections of the platform built. I have developed journey concepts for the data broker section of the platform. I have also set in place atomic design guidelines to apply a design structure the the new build of the platform. This all within a 3 month timeframe.

 Information about the service can be found at http://www.interdigital.com/data_sheets/oneTRANSPORT

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

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 www.zurich.co.uk/futureyou

2014 - 2015

Dunlop Motion - Racketware Ltd

I created new prototype designs for a squash player centric web application using a complete Lean UX development cycle. We developed a complete set of player/user personas to refocus the design against players coaching and performance tracking needs. We ran customer workshops to work out players needs and user Interface front end layouts. Developed branded look and feel to fit with fitness market segment. I captured a complete view of the racquet sensor market by using competitor products. I captured process schematics and diagrams to understand user scenarios, data flows and device usage. The technical back end used Node.js, Couchbase and a complex data processing engine to convert the sensor data in to user appropriate information for display back to players.

Product description

I designed a set of revised user experience journeys and front end design for this cutting edge motion sensor product. The sensor fits into a squash racket and captures a players movement 500 times per second. The data is 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.

Learn more

2012 - 2014

Join@home

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

eyeQ

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.

Duties:

  • 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.

Accomplishments:

  • 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.

2006

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
FFEI
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