Skip to main content

Central Bank of Ireland Returns Portal (Angular)

  • Central Bank of Ireland internal tax return portal home

Returns Portal

Client: The Central Bank of Ireland.

An internal portal to manage tax returns.

Research

  • Review the internal portal specs and balsamic mockups.
  • Evaluate the new External Portal’s functionality, accessibility, design, and technology stack.
  • Study the Central Bank of Ireland’s branding guidelines.
  • Audit the External Portal for accessibility compliance.
  • Familiarize with NGX-bootstrap documentation.
  • Analyze web traffic data for current services.

Design

  • Develop the Returns Portal using Angular and a UI component library.
  • Conduct design workshops with cross-functional teams for collaboration.
  • Create a comprehensive design library and guide for developer reference.
  • Design essential UI components including:
    • Navigation elements
    • Global Header and Search
    • Layouts
    • Input controls
    • Pickers
    • Content media
    • Shared components like CBI-grid
    • Accordion, Progress indicators, Dialogs, Modals
    • Tooltips, Popovers, Toasts, Notifications
    • Typehead, Drop-down Menu, Tabs, Tables, Breadcrumb
    • Pagination, Nesting, and Experimental components
  • Address non-functional requirements such as app loading, logging, and accessibility.
  • Enhance the External Portal with new sections for Fitness and Probity, delegate onboarding, and questionnaires.

Develop

  • Develop a ‘Design Guide’ as to how to use the UI Library for best User Experience and how to comply with accessibility guidelines (WCAG 2.1 AA)

Test

  • Test accessibility ARIA features using assistive technologies (NVDA and JAWS)

RSA Book a Service Portal (Angular)

  • Your Safe Journey Starts Here (Desktop)

RSA Book a Service Portal

Client: RSA – the Raod Safety Authority

Research

  • Collaborate with the Road Safety Authority and SGS project managers for requirements.
  • Adopt a ‘mobile first’ design approach, ensuring responsiveness across devices.
  • Implement the front-end using Angular and Material Design.
  • Create a multilingual interface with multi-level navigation suitable for all devices.
  • Utilize Microsoft Dynamics for back-end development.

Design

  • Login/Registration: Portal access, contact creation, and credential management.
  • Services/Eligibility: Manage journeys, display services, handle bookings, and check eligibility.
  • Scheduling: Set up and manage bookings, including test scheduling and rescheduling.
  • Payments: Handle product pricing, test payments, and refunds.
  • Confirmation: Manage communication templates, portal language, and view user interactions and profiles.
  • Workflow: Automate test cancellations, manage bulk operations, sync with Agresso, and communicate with customers.
  • BI/Reporting: Create reports, manage dashboards, oversee demand, and perform ad hoc reporting.
Develop
  • Code a template with global elements:
    • Multi-level responsive navigation.
    • Journey component for the Driver Learning Journey.
    • My Goals component for tracking user goals.
    • My Messages component for RSA communication.
    • Services and Eligibility component for available services and user eligibility.
    • Booking component for appointments.

Mixed Gallery


Gallery showing ‘Booking a Service’ (Mobile)


Auditing and Logging App (Angular)

AuditPro Infographic

Auditing and Logging App

Client: SGS

An advanced ultra-dynamic auditing and logging app designed for SGS agents to inspect petrol and gas stations in the EMEA region.

Managed and monitored by regional managers, it features a traffic light alert systemreporting tools, and Power BI dashboards.

The app is multilingual and adaptable for various audits, including environmental checks at fish farms in Asia (Seafood Watch).


Below is a selection of screens from the App interface. Design included brand design, logo development, info-graphic design, interface design, responsive design, and layout.


Gallery Random Design Screens

Gallery Seafood Watch Admin

SGS BeeAlert App (jQuey)

  • Bee Alert (Desktop)

BeeAlert Bee Safety System

Client: SGS

Quiet a nice idea here which involved a collaborative initiative between farmers and beekeepers aims to protect bees. Beekeepers receive alerts when farmers spray crops, allowing them to shield the bees from harmful exposure, thus contributing to bee conservation.

My contribution involved branding the user interface with SGS’s colour scheme and developing a proof of concept (POC) prototype. This prototype serves both as a demonstration for potential clients and as a marketing tool.

The development was carried out using jQuery, Kendo, and Bootstrap to create a Single Page Web Application (SPA).

The gallery below illustrates various aspects of this SPA, including brand and logo design, info-graphics, user interface design, and responsive layout.


Gallery

Audio / video Collaboration App (React)

Alert Make Video Permissions Screen

Audio / Video Collaboration App

Client: Whole World Band

Audio / video collaboration web app designed for desktop, android & apple devices. Built using with React (JSX) and bootstrap on the Front-end.

Ensuring a consistent user experience and improved branding and as a result improved user engagement.

Below are links to a low detail mock-up which can be previewed on mobile, tablet and desktop Views. ‘Clicking on any top navigation link from with the mock-Up to see the Reset Password Modal’.


Ian made some crucial changes which improved the user experience and interface design.

Re-factoring the code into a responsive design displaying well on mobile and tablet devices.

John HollandWholeWorldBand

Digital Design Update

Digital Design

A mixed-up selection of my digital design work and photos, sorted by colour.



© 2024 FeD. All rights reserved.