James Reilly — Product designer

Aced-It helps designers get organised for interviews. Practise the questions, do whiteboard challenges, and keep the answers you would give. I built it for myself first. I wanted to speak an answer out loud and stick to the points, instead of waffling.

Why I built it

I spoke to designer friends. What everyone hates is trying to organise their experience into an answer, and the prep around that. The companies I looked at serve developers. Designers were missing the chance to practise the questions they actually get.

My role is everything. The design, the code, the architecture, and the logic.

What I started with

I started with questions, the ability to speak your answer, and a grade from the AI. The grade uses an answer bank. It looks for whether you hit the points it is looking for, and it scores you against that.

The research changed the plan. A design interview is not one conversation. It is a screen, then a meeting with product, an engineer, and a designer, then a whiteboard, then the CEO. I changed the roadmap so the product follows that, instead of a developer test with the word design swapped in.

I had also planned a portfolio review. Scanning a portfolio site is difficult to get right, so that is not the route. What is coming is a template. You fill in your answers, they stay on file, and later the questions can use them.

Phase 1

I had grand ideas of shipping three or four of those features together. Then I realised I was building it on my own. I needed to go feature by feature. Phase 1 is the questions and the grade. You upload your CV, the job description, and the company URL, and the platform writes questions you would actually face.

The one I will stand behind is “why do you want to work here?”. The URL is used to read the company site, and then you are tested on whether you have done that research. That is a realistic interview, not a generic bank of questions.

The whiteboard

I had a working version of the whiteboard. You can ask questions, the way you would in the room, and get some direction. There is a timer, and the outcome is graded.

It is not released. Drawing on a MacBook or a phone is tricky, and that is where it needs the work. The challenge should be easy to do. You should not be held back by a clunky build.

Where it is

What is live in phase 1 is the landing page, the subscription, and the job upload. It has had a soft launch with designer friends, to iron out bugs. Nobody is paying yet. I am preparing the marketing launch before the end of the year. It is at acedit.app.

Matrix is the system of record for technology assets in the firm. Setting up an application, a database, assigning people, software, that sort of thing. It also has Insights, and an AI assistant, so you can get ahead of a problem before it happens. Anyone in technology can use it. That is over 100,000 people: engineers, leaders, auditors, and the teams that run reports.

What it replaced

Before Matrix there was SEAL. It started life about twenty years ago, and it had been given sticky plaster treatment ever since. You could look up an application or create one. Nothing else. The scope never moved. Every two weeks the line-of-business admins who actually use the tool would go through what was wrong with it. There was a lot.

My role

I was the design lead. Any design went through me. I worked with a lead engineer for Matrix, one for AI, one for Insights, the architect, and the managing director.

A lot of the plan was already done by the MD and the architect. We then had to make those ideas work. I would ask the MD, who was the person who could actually decide: what is this for, what does it fix, and who should I speak to. I would design the feature and bring it back. The engineers would usually find the gaps, and we would work out how to solve them. Not much of this was written down. Engineering was already using AI, and I used it to test ideas. The Figma file stayed the source of truth.

One product, not three

My view was that these tools had to become one experience. When I started, the teams were in silos. Insights on its own, the application journey on its own, AI on its own. Nobody had said they would need to come together in one platform, or a person would not actually use it, and it would not make sense.

You are looking at an application. You want to know if it is resilient. You should be able to open Insights and see that application in real time. If that raises a question, you should be able to ask the AI to go further, without leaving.

Tiles, or a list

The MD and the architect had imagined viewing your applications in a modern way, as tiles. I was against it. There are 16 sections in an asset flow. The top task is viewing the application, and tiles would have people clicking around in different places for different information. I proposed we keep the side navigation from SEAL, with the sections listed. That is the quickest way to see the information, in order. People use this a lot. A pattern they already know might help.

Teams can talk and get nowhere until there is something to look at. So I designed both. I ran a few tests. People said it is easier to find what they need when the sections are in front of them. The tiles meant scrolling, and they looked a bit messy and disorganised.

The original idea also planned a lot of integrations, so manual entry would become obsolete. That has been a slow burner. Not all the services are integrated yet, which backed my version up. People still have to go through the asset themselves. The MD was hesitant. The results, and the way the work actually happens, were a strong argument. He made the call to keep the side navigation.

The sketch

Nobody had thought about how these pieces come together. I sketched an interface with a top navigation for the different areas, and search. The primary task is looking an asset up, so I treated search the way you would treat it in Google. I proposed the sketch at a stakeholder meeting, to get people aligned, because the product was not clearly defined. That sketch did it. Then we had a product.

I designed the logo, the colours, and a design system we could use. Six months later it functions. You can view and create applications, check Insights on them, and ask the AI about them. Those were my ideas. Everyone else was thinking in technical language, and in back-end tasks. My job was to look at the problems people have today, fix them in the new product, and give them a better experience than SEAL.

Insights

People come to Insights the way a CIO does. They look at a line of business and ask what is on fire, what is not resilient, how much we are spending on compute, and what vulnerabilities are showing up in software that has not been upgraded to the latest patch. The filtering is extensive. You can look at your own estate, or at one of your teams.

The assistant

There is an ask, everywhere, to bake AI into a product. I started from what it is actually for here. Insights leads to questions. The usual path is to export the data to Excel and send it to someone else to interpret. I wanted you to look the information up in Matrix, see the data, and ask. Can I trust it. Is it accurate. It says this is resilient, but where in the world is it running, and what is it costing.

You click AI assist and a drawer opens. The chat already knows what you are looking at, so you can start asking straight away. If you find a vulnerability, you can send it from the chat to someone else to action. It tracks the fix and tells you when it is done.

We hit a problem for a few weeks. To use AI in the firm you need security clearance first. There was a serious amount of red tape before we could put it live, and we had to add a modal when you land on the page, telling you about the AI. Not ideal. It is one of those trade-offs you make to get it live.

What is live

The product is live in the bank, with up to 20,000 unique visits a day. It is a more complete product than SEAL ever was. You can search and create any asset, not just applications. You can see your estate in Insights, and query it with AI, in one platform. A lot of what used to be a manual back-end step in SEAL now happens in the product.

The integrations are not all complete. When they are, they will fill fields from other services, so people type less in by hand, and less bad data gets entered.

I was brought in as a freelance designer to redesign NatWest online banking. People come on to check a balance, then do a task. The account table on the old interface was all right. The rest was not clear. Pay someone, or say you had lost a card, was not easy to find.

The old NatWest online banking account summary, with an account table and a lot of other links around it — The table was readable. Finding the task was not.

Why are they in the branch?

A branch visit is usually a pain. You spend twenty minutes getting through to the right person, and ten minutes later you are told to come in. I wanted to hear why they had to come in, and then ask the bank why we could not offer it online.

Paying in a cheque, and a change of address, were two of those. I designed them so they could be done with the camera on your device. Before you update your personal address, you use your online banking credentials. That was the extra security.

Cards, not a table

A table makes more sense in business banking, where someone might have a hundred accounts. In consumer banking the average is about three. Cards let you look at each balance on its own, instead of scanning a table from top to bottom and then left to right.

I also thought we could put extra information on the card, such as the last five transactions. Testing said no. Customers were happy to click through once and see all of the transactions, rather than only five.

We did that in sessions, one card at a time, until we had enough feedback to move on and build up the interface.

NatWest online banking on a laptop and a phone, with separate cards for each account — Each account on its own, on desktop and on the phone.

NatWest dashboard with account cards and a quick payment panel — The dashboard. The balance, and pay, on the same page.

Transactions

If the page kept two screens, one is this dashboard. It is the context of the banking journey. The other is transactions. I spent a lot of time with customers on the filtering, so you can refine the list and print a statement for a mortgage without a fight. You would be surprised how difficult banks had made that.

NatWest transaction view with filters open — Filters, so a statement for a mortgage is something you can actually get to.

The £1 check

Pay on the dashboard was part of making the task easy to find. The £1 check was my idea. I transferred my rent to an old landlord and never got it back. From that day I have always sent £1 first, to be sure the details are right.

I took it to fraud and compliance. It needed to be written clearly, so people understood why. Customers were positive about it. On the first payment you send £1. If they confirm it is correct, and they are a confirmed payee, you are free to send more.

NatWest view of payees, direct debits, and standing orders — Payees, direct debits, and standing orders, in one list.

The watch

The other feature that went with this was the Apple Watch. If you lose the card, or forget it, a code is sent to the watch and you can take money out at a cash machine.

NatWest Apple Watch app showing a balance and recent transactions — Balance and recent transactions on the watch.

NatWest Apple Watch app showing a code to withdraw cash — A code for the cash machine, if the card is not with you.

What went live

The project was beset by internal problems. Leadership changed more than once. The technology team downed tools mid-project to change the stack. The designers kept going.

In the end the account interface went live with the cards, quick payments, and the ability to add further products. I think the clearer interface worked. It was easier to follow and understand, especially for older customers, who felt it was more inclusive.

When you signed up, we kept that information on file, so you did not have to keep applying. If nothing in your circumstances had changed, and we do ask, you could get to other products without starting the paperwork again. That was a real friction. Why all the paper?

What I was asked to do

Payroc was fully remote and still felt like a startup. Several companies had merged. There was an appetite to grow, and no design capability. The business is card processing, in the same space as Stripe, Adyen, and J.P. Morgan.

I was hired as design manager when the design team was me. Polishing the marketing site and hiring later would have left every product with a different face. I hired, put a design system under the work, and then shipped the things that had to share it.

What I did

The public site had to read as one company, on a laptop, a tablet, and a phone. The old site did a job, and it looked like a smaller firm next to the products we were about to build. A reskin would have been faster. It would also have kept an information architecture that could not take more products. The new site has a clearer product story and room to add to it, so sales could send the link without apologising for it.

Partner Engage was the largest product: partners and merchants managing a portfolio, with reporting and onboarding. The existing platform worked, and it felt like a merger. Dense navigation, and reporting you had to decode. I did not start in Figma. I ran discovery with sales, product, and leadership: what they were trying to do, where the current tool failed, and what we could measure. The redesign is that list. A partner can see the book of merchants and move through it. Navigation, reporting, and onboarding follow how they work, not how the old menus were filed.

Support was becoming a queue of how-to calls. I designed a support hub in the same direction as Partner Engage, so a customer does not feel they have left the company to find an answer. Integrators were a different audience. The marketing site was never going to serve them. The developer portal holds the APIs, onboarding, and reference.

Those four surfaces only stay related if the components, patterns, and brand rules are shared. The design system was not a file I made at the end. It is what let a new team ship a year of product without four visual languages.

Payroc overview showing the redesigned website across laptop, tablet and mobile — The public site as one system, on laptop, tablet, and mobile.

The original Payroc marketing website before the redesign — The marketing site I replaced.

The redesigned Payroc marketing website — The new site: a product story, and room to add more.

Partner Engage discovery workshop board showing goals, gaps, and success measures — Partner Engage discovery: goals, gaps, and what we could measure.

Partner Engage research board capturing stakeholder goals and requirements — Stakeholder sessions, before any dashboard was drawn.

The original Payroc Partner Engage merchant dashboard — The Partner Engage dashboard we were replacing.

The redesigned Payroc Partner Engage platform — Portfolio, reporting, and onboarding after discovery.

Payroc Support Hub platform — Support hub, in the same design direction as the rest of the suite.

Payroc developer documentation portal — Developer portal: APIs, onboarding, and reference.

Payroc design system components and documentation — The design system shared by the site, the hub, the portal, and Partner Engage.

How I worked

Leadership would list the problems. I came back with a scoped proposal, researched and prototyped it, took it back, and then it went to engineering. The teams were small, so I could talk to the people who could say yes. At that table the useful sentence was about the operation, not about the craft. Fewer calls, a partner who can read their own book, an integrator who can find the API.

What you see is my direction, carried by very good designers. I left because I was not designing enough myself. I went back to doing the work.

What came of it

In twelve months: a design team, a design system, the enterprise website, developer documentation, a support hub, and Partner Engage.

Virgin Money was moving onto digital, and a lot of business banking was still manual. You visited a branch. Opening a business account took six weeks. Payments were authorised on a physical device. The service barely functioned, and it did not serve customers well.

I was the lead designer on the business banking journey.

After login

In the first minute, a business owner needs to see the accounts. They also need access for the people who run the company: employees and accountants. And they need payment limits. A payroll officer should be able to pay up to £20,000 without the MD having to authorise it. They need an easier way to see what is coming in and what is going out.

Virgin Money business banking dashboard showing the accounts — The accounts after login, and what has moved.

Adding people

Managing users was the tricky problem. The rules decide who can be added, how long they get access, and how you remove them when they leave. They also decide the payment limit, and how you send an account-opening journey to a team member so they can register to use the account.

I would not drop that. A business cannot run the account if only one person can get in, and it cannot be safe if anyone can pay anything.

Payments and statements

You could not pay properly without the branch, or without that physical device. The app had to change that. Payments online, company cards you can manage, and statements with enough depth to see where the business stands.

Virgin Money business banking payments — Payments in the app, instead of a device in the branch.

Virgin Money screen for adding someone to business banking payments — Adding someone, with the bank's checks still in the path.

Virgin Money business account statement — A statement you can actually read.

Virgin Money company cards for business banking — Company cards, managed in the same place.

The analytics screen

This is the screen I will stand behind. You can see what is coming in and what is going out. There is a VAT and tax estimate, so the business can see that it is earning money and still needs to keep some of it aside.

It was not straightforward. The tax bands are different across the UK and Ireland, and the estimate still had to be accurate enough to be useful.

Virgin Money business banking view of money in, money out, and tax — Money in, money out, and the tax to set aside.

What shipped

You could open an account in minutes, with the fraud checks in place. You could pay online, get to banking services quickly if you needed them, manage the company cards, and read a proper statement. The six weeks, the branch, and the lack of staff access were the things the app changed.

The Capability and Innovation Fund was there to bring money and a lot of business customers into the bank. This app is what made that possible. It was part of a £35 million win.

Virgin Money screen for further business banking services — Other banking services, without starting again in a branch.

Selected work

Lead product designer, Application Management at J.P. Morgan

Founder at Aced-It

Design manager at Payroc

Product design consultant at NatWest

Product design consultant at Virgin Money