Customer portal

UX and UI design

The problem

A new legislation is being introduced on 1 Jan 2025 and a new portal needs to be created for customers to register and pay their taxes through.

However, the legislation has not passed yet and the requirements are being drip fed to the team along with the timeline for the project being very short.

As this is a new legislation it is also unknown what the volume of customers and customer types will be.

My role

  • Service blueprint
  • User journeys
  • Problem solving
  • UX/UI Design
  • Lo-fi wire framing
  • Creating a design system for the SRO
  • User testing
  • Hi-fi prototyping

Research

We knew of 2 types of user; owner and booking platform. However we did not have the data on how many of each user type we expected to register or how many of these users were owners, joint owners, companies or trusts.

I looked into an existing revenue line with similar customer types to give us some data on each user type and what user journeys to prioritise in the short timeline.
I worked with the product owner and based on the number of users in the other revenue line we decided to prioritise the following user types:

  • Owner individual and company
  • Booking platform individual and company

I then created user personas to further understand and convey the goals, motivations and frustrations of the customers.

I collaborated with an external research company to conduct some initial research to understand customers pain points.
I found out that:

  • Customers had little to no knowledge with it being a new legislation.
  • Customers found other government websites not user friendly and using language that was not everyday person friendly.
  • Customers were worried that they would not have enough resources to provide all of the required data to comply with the levy.

As I knew the business requirements for the portal would not be given all at once due to the legislation not being passed yet, I wanted to get an understanding of the whole portal and how customers would use each area of the portal. To do this I created a service blueprint, I collaborated with the product owner and then with developers to understand what functionality the systems would have in this portal.

This allowed me to keep in mind the functionality of other areas whilst designing one area at a time which helped to create a cohesive portal design for the customers.

UX design

I started by creating lo-fi wireframe to quickly turn business requirements into a customers journey. I collaborated closely with the team to ensure my designs met both business and technical requirements. Through continuous feedback I iterated the designs until they met the needs of the user, business and the systems.
Lofi wireframes also allowed me to easily identify where the main customer pain points were and work with the team to resolve these.

This was a challenge because the main system used is a legacy software and this determined a lot of the user experience. I worked with the developers to ensure the most user friendly solution was designed whilst keeping to the constraints of the system. This meant regular check ins with the developers to get their feedback and iterate my designs.

Design system

When it came to designing the high fidelity UI, I noticed that there was no design system which would reduce my efficiency and consistency when designing.
I began working with other HCD team members to build out the design system at the SRO so that we would all be using the same components when designing and making the next stage, hi-fi designs, a lot more time efficient.

You can read more about my design system process here.

Usability testing

I created user personas as there was a lot of feedback during sessions and I needed to focus and clearly understand the users goals and frustrations.

Due to there being many areas to the business model, I created user journeys for each area. This allowed me to begin to think about the wireframes I was going to create and what screens would be needed.

“It’s very usable, very user friendly. I wish I could just sit with the system already.” – Onboarding team member

UI design & prototyping

Whilst creating the design system and UI of this product I kept the WCAG compliance levels in mind, using a Figma plugin to grade the accessibility on each page.

I incorporated various accessibility considerations such as accompanying coloured icons with text, adding placeholders and labels that are accessible by screen readers, and adding alt text to any imagery used.
I also ensured that when being developed the interface could be navigated by keyboard and mouse.

Outcomes

  1. Reduced the time it takes for an admin user to set an artist’s terms of agreement from a range of 30 minutes to 3 weeks down to a range of 2.5 mins to 7 mins.
  2. Automated the process of filling out a mandate, power of attorney and 19 membership forms, saving the admin user 30 minutes per artist.
  3. Submitting membership forms to societies previously took an admin user 2 hours per artist.
    Now, 19 membership forms are submitted automatically and 4 have to be posted, reducing the manual input to 20 minutes.
  4. An admin user previously had to mark each artist registered at 23 societies in a spreadsheet taking her 23 mins per artist.
    This is now done automatically when the artist membership ID is entered reducing admin time spent on onboarding an artist.


The admin portal has launched and due to clients changes the artist portal is currently going through some iterations.