The Central Bank of Ireland Returns Portal

Client: The Central Bank of Ireland.

The ‘Returns Portal’ – A corporate yet slick internal portal to manage end of year 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)

UI Gallery showing UI components

The Road Safety Authority (RSA) ‘Book a Service’ Portal

Client: RSA – the Raod Safety Authority

A vibrant interface (UI) with with a ‘Journeys and Goals’ approach taken to the User Experience (UX)

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.

UI Gallery showing mixed interface components

UX Gallery showing start to finish ‘Booking a Service’ on mobile

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.

• mixer screen – centring video
• mixer screen – removing breadcrumb navigation and replace with ‘start over’ and ‘create mix’ buttons either side of user cantered video
• mixer screen – Made tn’s fully responsive
• mixer screen – Made tn’s full width and fixed to bottom (i was intending on doing this)
• General – fixing navigation to top of screen
• General (mobile) – centring logo and replacing navigation with dropdowns for navigation and search
• General – Spotting newsletter signup not working and fixing

John HollandWholeWorldBand