Digital Banking Modernisation

Context

Unisys Digital Banking needed a modern experience on web and mobile, without disrupting the customers who rely on it every day. The screens shown here use Unibank, the product’s demo brand.

My role

Lead User Experience Designer in a team of seven. I worked from kickoff with stakeholders, business analysts and architects through to developer handoff, and built custom React Native components myself.

Who we designed for

Three personas, each with an empathy map, covered both sides of the bank counter.

Sarah Lee is a new relationship manager. A walk-in customer wants a mortgage, and her slow, limited banking app keeps getting in the way.

John Malkovich knows the system well. He’s chasing a pending payment and a six-month statement, but the app makes even simple lookups hard.

Sharon Maben is a customer. She pays on time and still gets overdue notices. Support keeps asking for her identity documents, and she can’t see her transactions on her phone.

Sharon’s frustration became the brief. Customers needed to check accounts, statements and reminders on their phone, securely, without proving who they are again and again.

Mapping the service

A banking app is only the visible part. I drew a service blueprint linking each customer action to the app, the staff admin hub and the back office. Secure messages, for example, get routed to the right team and tracked from open to closed. Alerts and offers go out to chosen groups of customers. Mapping both sides early meant no feature launched without the support behind it.

What I did

I analysed more than 1,000 user interactions and checked every fix with usability testing. Personas, task flows and wireflows came before any visual design. I defined the navigation and interaction patterns, contributed to the design system, and tested against the Web Content Accessibility Guidelines, the Americans with Disabilities Act and Section 508.

To stop quality leaking between design and build, I wrote custom components in the Reusable UI Framework Library.

Selected features

Home screen. Accounts at a glance. Customers pick their own quick links, with a minimum of three. Alerts, bank-wide messages and offers sit on one screen without competing.

Customer data. Personal details, marketing and notification preferences, cookie consent, and changes to address, phone and name. The bank’s records system has the final say, so every change handles three outcomes: confirmed, rejected with next steps, or received and confirmed later.

App theme. Light or dark, remembered per device.

Account details. Open and closed accounts, full details, and payment limits. Changing a limit needs a personal identification number, Touch ID, Face ID or a one-time code.

Outcome

Engagement rose by about 40%. System errors fell by about 30%, and delivery got faster.

Personas, service blueprint and feature designs

Persona and empathy map for Sarah Lee: task scenario, tasks, think and feel, motivations, pain points and goals — Persona · Sarah Lee · Customer Relationship Manager, novice

Persona and empathy map for John Malkovich: task scenario, tasks, think and feel, motivations, pain points and goals — Persona · John Malkovich · Customer Relationship Manager, expert

Persona and empathy map for Sharon Maben: task scenario, tasks, think and feel, motivations, pain points and goals — Persona · Sharon Maben · Existing customer

Service blueprint for secure messaging, alerts, broadcasts and marketing across the customer journey, mobile and web app, admin hub and back-office actions — Service blueprint · Secure messaging, alerts and marketing

Wireframes for the home screen with personal details, account summary and the View all accounts modal — Home screen accounts · Wireframes

Detailed designs of the home screen and full account list — Home screen accounts · Detailed designs

Wireframes for managing home screen quick links, including the minimum of three — Home screen shortcuts · Wireframes

Detailed designs of the Shortcuts screen with toggles and the validation message for selecting at least three quick links — Home screen shortcuts · Detailed designs

Wireframes showing customer alerts, broadcast messages, both together, and rotating marketing banners on the home screen — Alerts, broadcasts and marketing · Wireframes

Personal details and marketing preferences · Wireframes

Personal details and preferences · Detailed designs

Wireframes for viewing and changing notification channels — Notifications · Wireframes

Detailed designs for notification preferences and cookie policy consent — Notifications and cookie consent · Detailed designs

Wireframes for viewing the cookie policy and giving consent — Cookie policy and consent · Wireframes

Wireframes for entering and submitting a new address, with authentication and three outcome scenarios — Change address · Wireframes

Detailed designs of the change address flow, from authentication to confirmation — Change address · Detailed designs

Wireframes for adding, changing or removing a home telephone number, with outcome scenarios — Home telephone number · Wireframes

Detailed designs of the home telephone number flow, including one-time code verification and outcome screens — Home telephone number · Detailed designs

Wireframes for providing a new name and evidence of the change — Change of name · Wireframes

Detailed designs of the change of name flow, including capturing evidence with the camera or photo library — Change of name · Detailed designs

Wireframes for choosing a light or dark app theme, from the home screen through the settings menu to Manage Themes — Theme maintenance · Wireframes

Detailed designs of the home screen, settings menu and Manage Themes screen in light and dark — Theme maintenance · Detailed designs

Wireframes for the home screen account summary and the View all accounts modal — View open and closed accounts · Wireframes

Detailed designs of the home screen and full account list, including closed and joint accounts — View open and closed accounts · Detailed designs

Wireframes for account transactions and account details, including a closed account — View account details · Wireframes

Detailed designs of the transactions and account details tabs, including a closed account — View account details · Detailed designs

Wireframes for viewing and changing daily payment limits, with multi-factor authentication before saving — View and change account limits · Wireframes

Detailed designs of the account limits screens, personal identification number entry, Touch ID and Face ID authentication — View and change account limits · Detailed designs

Select any image to open it full size.