Consumer Portal
A digital touchpoint for customers to manage their water account online
Consumer Portal
A digital touchpoint for customers to manage their water account online
Consumer Portal
A digital touchpoint for customers to manage their water account online
Consumer Portal
A digital touchpoint for customers to manage their water account online
The goal of this project was to create a user-centric water account management portal to reduce costs and improve customer relations for water providers. As lead designer in a small team, I was responsible for strategy, research, design & testing throughout the project.
Company
Kraken Tech
Duration
6 months
Role
Design Lead
The goal of this project was to create a user-centric water account management portal to reduce costs and improve customer relations for water providers. As lead designer in a small team, I was responsible for strategy, research, design & testing throughout the project.
Company
Kraken Tech
Duration
6 months
Role
Design Lead
The goal of this project was to create a user-centric water account management portal to reduce costs and improve customer relations for water providers. As lead designer in a small team, I was responsible for strategy, research, design & testing throughout the project.
Company
Kraken Tech
Duration
6 months
Role
Design Lead
The goal of this project was to create a user-centric water account management portal to reduce costs and improve customer relations for water providers. As lead designer in a small team, I was responsible for strategy, research, design & testing throughout the project.
Company
Kraken Tech
Duration
6 months
Role
Design Lead
The problem
💰 Customers expensive to manage
Customers relied on our client's operation teams to manage their account - this was time consuming and expensive
🛜 Poor online experience
There was a lack of a digital touchpoint that our clients could offer to customers to help reduce the pressure on operation teams. This also create a dissatisfied customer who may lose trust in their water provider.
💬 Lack of engagement
Without any consumer portal, it was difficult for clients to interact with the customers easily to market their business goals, such as increasing direct debit, to their customers.
The problem
💰 Customers expensive to manage
Customers relied on our client's operation teams to manage their account - this was time consuming and expensive
🛜 Poor online experience
There was a lack of a digital touchpoint that our clients could offer to customers to help reduce the pressure on operation teams. This also create a dissatisfied customer who may lose trust in their water provider.
💬 Lack of engagement
Without any consumer portal, it was difficult for clients to interact with the customers easily to market their business goals, such as increasing direct debit, to their customers.
Competitor Analysis
I started by carrying out a competitor analysis to understand the standard of the industry and give us an insight into what features we should focus on and how have they been implemented. This gave us a list of features that we could prioritise and place into a roadmap.
Competitor Analysis
I started by carrying out a competitor analysis to understand the standard of the industry and give us an insight into what features we should focus on and how have they been implemented. This gave us a list of features that we could prioritise and place into a roadmap.
Competitor Analysis
I started by carrying out a competitor analysis to understand the standard of the industry and give us an insight into what features we should focus on and how have they been implemented. This gave us a list of features that we could prioritise and place into a roadmap.
Competitor Analysis
I started by carrying out a competitor analysis to understand the standard of the industry and give us an insight into what features we should focus on and how have they been implemented. This gave us a list of features that we could prioritise and place into a roadmap.
Qualitative research
To understand different types of user needs, I interviewed a number of participants whilst observing them interact with their own water account, understanding their challenges and pain points.
“I have a housemate and we settle bills every month. So having a six monthly water bill is a terrible.”
Amy, Product Manager
"I use my phone or laptop & spend no more than 2 mins online. I go straight to the latest bill to see more information"
James, Business Finance Partner
Qualitative research
To understand different types of user needs, I interviewed a number of participants whilst observing them interact with their own water account, understanding their challenges and pain points.
“I have a housemate and we settle bills every month. So having a six monthly water bill is a terrible.”
Amy, Product Manager
"I use my phone or laptop & spend no more than 2 mins online. I go straight to the latest bill to see more information"
James, Business Finance Partner
Qualitative research
To understand different types of user needs, I interviewed a number of participants whilst observing them interact with their own water account, understanding their challenges and pain points.
“I have a housemate and we settle bills every month. So having a six monthly water bill is a terrible.”
Amy, Product Manager
"I use my phone or laptop & spend no more than 2 mins online. I go straight to the latest bill to see more information"
James, Business Finance Partner
Qualitative research
To understand different types of user needs, I interviewed a number of participants whilst observing them interact with their own water account, understanding their challenges and pain points.
“I have a housemate and we settle bills every month. So having a six monthly water bill is a terrible.”
Amy, Product Manager
"I use my phone or laptop & spend no more than 2 mins online. I go straight to the latest bill to see more information"
James, Business Finance Partner
Gathering insights
Patterns & data gathered from my research lead to a range of insights which I grouped into themes - these would be used when designing the product.
Gathering insights
Patterns & data gathered from my research lead to a range of insights which I grouped into themes - these would be used when designing the product.
Gathering insights
Patterns & data gathered from my research lead to a range of insights which I grouped into themes - these would be used when designing the product.
Gathering insights
Patterns & data gathered from my research lead to a range of insights which I grouped into themes - these would be used when designing the product.
Card Sorting
I ran a remote open card sorting exercise with participants to see how they would group information or certain tasks together which helped me develop the site’s IA. I shared this with stakeholders to get feedback and align the team on how the product would be structured
Card Sorting
I ran a remote open card sorting exercise with participants to see how they would group information or certain tasks together which helped me develop the site’s IA. I shared this with stakeholders to get feedback and align the team on how the product would be structured
Card Sorting
I ran a remote open card sorting exercise with participants to see how they would group information or certain tasks together which helped me develop the site’s IA. I shared this with stakeholders to get feedback and align the team on how the product would be structured
Card Sorting
I ran a remote open card sorting exercise with participants to see how they would group information or certain tasks together which helped me develop the site’s IA. I shared this with stakeholders to get feedback and align the team on how the product would be structured
Creating a design system
To ensure consistency and stability across our products internally, we used an existing design system within our company. I created a system which essentially acted as our theme for our app. We could then share this with our clients who could then update based on their own brand guidelines.
Creating a design system
To ensure consistency and stability across our products internally, we used an existing design system within our company. I created a system which essentially acted as our theme for our app. We could then share this with our clients who could then update based on their own brand guidelines.
Creating a design system
To ensure consistency and stability across our products internally, we used an existing design system within our company. I created a system which essentially acted as our theme for our app. We could then share this with our clients who could then update based on their own brand guidelines.
Creating a design system
To ensure consistency and stability across our products internally, we used an existing design system within our company. I created a system which essentially acted as our theme for our app. We could then share this with our clients who could then update based on their own brand guidelines.
Global Navigation
Using the Information Architecture, I explored different solutions for the global navigation as a starting point for the app. After a session with stakeholders on discussing the various options, the highlighted options below were chosen for the following reasons:
Most dynamic across all devices
Flexible to more features and any changes to the structure
Meets accessibility needs
Global Navigation
Using the Information Architecture, I explored different solutions for the global navigation as a starting point for the app. After a session with stakeholders on discussing the various options, the highlighted options below were chosen for the following reasons:
Most dynamic across all devices
Flexible to more features and any changes to the structure
Meets accessibility needs
Global Navigation
Using the Information Architecture, I explored different solutions for the global navigation as a starting point for the app. After a session with stakeholders on discussing the various options, the highlighted options below were chosen for the following reasons:
Most dynamic across all devices
Flexible to more features and any changes to the structure
Meets accessibility needs
Global Navigation
Using the Information Architecture, I explored different solutions for the global navigation as a starting point for the app. After a session with stakeholders on discussing the various options, the highlighted options below were chosen for the following reasons:
Most dynamic across all devices
Flexible to more features and any changes to the structure
Meets accessibility needs
Defining Features
As I worked through the roadmap, I implemented a process for developing features from kick-off through to hand-off and implementation.
Initially, I would conduct a discovery and define phase which involved tasks such evaluating existing solutions or conducting workshops in order to align stakeholders with the following:
Understanding the problem we're trying to solve
Highlight the user needs & expectations
What are the key user flows needed
What are our technical limitations
This was an analysis of existing examples of a feature. This gave us great insights into how other teams have tried to solve the problem and how could we try to emulate the best parts for our own product.
I used flowcharts to illustrate and define journeys - these are powerful artefacts that were shared and referred to through the process to ensure all stakeholders, particularly front-end and back-end developers, understood how the feature is supposed to work.
Defining Features
As I worked through the roadmap, I implemented a process for developing features from kick-off through to hand-off and implementation.
Initially, I would conduct a discovery and define phase which involved tasks such evaluating existing solutions or conducting workshops in order to align stakeholders with the following:
Understanding the problem we're trying to solve
Highlight the user needs & expectations
What are the key user flows needed
What are our technical limitations
This was an analysis of existing examples of a feature. This gave us great insights into how other teams have tried to solve the problem and how could we try to emulate the best parts for our own product.
I used flowcharts to illustrate and define journeys - these are powerful artefacts that were shared and referred to through the process to ensure all stakeholders, particularly front-end and back-end developers, understood how the feature is supposed to work.
Defining Features
As I worked through the roadmap, I implemented a process for developing features from kick-off through to hand-off and implementation.
Initially, I would conduct a discovery and define phase which involved tasks such evaluating existing solutions or conducting workshops in order to align stakeholders with the following:
Understanding the problem we're trying to solve
Highlight the user needs & expectations
What are the key user flows needed
What are our technical limitations
This was an analysis of existing examples of a feature. This gave us great insights into how other teams have tried to solve the problem and how could we try to emulate the best parts for our own product.
I used flowcharts to illustrate and define journeys - these are powerful artefacts that were shared and referred to through the process to ensure all stakeholders, particularly front-end and back-end developers, understood how the feature is supposed to work.
Defining Features
As I worked through the roadmap, I implemented a process for developing features from kick-off through to hand-off and implementation.
Initially, I would conduct a discovery and define phase which involved tasks such evaluating existing solutions or conducting workshops in order to align stakeholders with the following:
Understanding the problem we're trying to solve
Highlight the user needs & expectations
What are the key user flows needed
What are our technical limitations
This was an analysis of existing examples of a feature. This gave us great insights into how other teams have tried to solve the problem and how could we try to emulate the best parts for our own product.
I used flowcharts to illustrate and define journeys - these are powerful artefacts that were shared and referred to through the process to ensure all stakeholders, particularly front-end and back-end developers, understood how the feature is supposed to work.
Design & Ideation
Once a feature was defined enough, I typically explored solutions with hi-fidelity wireframes. I would organise sessions with Product, Tech and occasionally clients depending on the goal to get feedback, ranging from highlighting technical constraints to getting further requirements externally if need.
Design & Ideation
Once a feature was defined enough, I typically explored solutions with hi-fidelity wireframes. I would organise sessions with Product, Tech and occasionally clients depending on the goal to get feedback, ranging from highlighting technical constraints to getting further requirements externally if need.
Design & Ideation
Once a feature was defined enough, I typically explored solutions with hi-fidelity wireframes. I would organise sessions with Product, Tech and occasionally clients depending on the goal to get feedback, ranging from highlighting technical constraints to getting further requirements externally if need.
Design & Ideation
Once a feature was defined enough, I typically explored solutions with hi-fidelity wireframes. I would organise sessions with Product, Tech and occasionally clients depending on the goal to get feedback, ranging from highlighting technical constraints to getting further requirements externally if need.
Usability Testing
I ran usability testing sessions to validate ideas by giving users specific tasks to complete. These sessions were typically remote but varied on moderation depending on the complexity of the tasks involved. My main tools; Maze and Notion let me quickly set up tests and the ability to capture results and share documentation with stakeholders.
I initially used Figma for the entire test from prototyping through to taking users through their tasks. I collected and analysed results using Notion. This allowed me to easily create a report along with insights to share with stakeholders
For a more automated and more detailed experience, I switched to Maze which gave us much better data and insights into how users were performing on the tests.
This is an example of some of the iterations this feature went through, based on findings in our usability test sessions
Usability Testing
I ran usability testing sessions to validate ideas by giving users specific tasks to complete. These sessions were typically remote but varied on moderation depending on the complexity of the tasks involved. My main tools; Maze and Notion let me quickly set up tests and the ability to capture results and share documentation with stakeholders.
I initially used Figma for the entire test from prototyping through to taking users through their tasks. I collected and analysed results using Notion. This allowed me to easily create a report along with insights to share with stakeholders
For a more automated and more detailed experience, I switched to Maze which gave us much better data and insights into how users were performing on the tests.
This is an example of some of the iterations this feature went through, based on findings in our usability test sessions
Usability Testing
I ran usability testing sessions to validate ideas by giving users specific tasks to complete. These sessions were typically remote but varied on moderation depending on the complexity of the tasks involved. My main tools; Maze and Notion let me quickly set up tests and the ability to capture results and share documentation with stakeholders.
I initially used Figma for the entire test from prototyping through to taking users through their tasks. I collected and analysed results using Notion. This allowed me to easily create a report along with insights to share with stakeholders
For a more automated and more detailed experience, I switched to Maze which gave us much better data and insights into how users were performing on the tests.
This is an example of some of the iterations this feature went through, based on findings in our usability test sessions
Usability Testing
I ran usability testing sessions to validate ideas by giving users specific tasks to complete. These sessions were typically remote but varied on moderation depending on the complexity of the tasks involved. My main tools; Maze and Notion let me quickly set up tests and the ability to capture results and share documentation with stakeholders.
I initially used Figma for the entire test from prototyping through to taking users through their tasks. I collected and analysed results using Notion. This allowed me to easily create a report along with insights to share with stakeholders
For a more automated and more detailed experience, I switched to Maze which gave us much better data and insights into how users were performing on the tests.
This is an example of some of the iterations this feature went through, based on findings in our usability test sessions
Hand-off & QA
After testing and iterations were complete, I used Figma to put together the hand-off document, ensuring all relevant information is included for developers. I then organise sessions with developers to go through these files to ensure we’re aligned and they understand how to use the document.
During development, I would constantly communicate with the developers’ progress to keep aligned and deal with any problems that would arise. It also gave me a chance to QA and ensure the feature was being implemented as intended
Hand-off & QA
After testing and iterations were complete, I used Figma to put together the hand-off document, ensuring all relevant information is included for developers. I then organise sessions with developers to go through these files to ensure we’re aligned and they understand how to use the document.
During development, I would constantly communicate with the developers’ progress to keep aligned and deal with any problems that would arise. It also gave me a chance to QA and ensure the feature was being implemented as intended
Hand-off & QA
After testing and iterations were complete, I used Figma to put together the hand-off document, ensuring all relevant information is included for developers. I then organise sessions with developers to go through these files to ensure we’re aligned and they understand how to use the document.
During development, I would constantly communicate with the developers’ progress to keep aligned and deal with any problems that would arise. It also gave me a chance to QA and ensure the feature was being implemented as intended
Hand-off & QA
After testing and iterations were complete, I used Figma to put together the hand-off document, ensuring all relevant information is included for developers. I then organise sessions with developers to go through these files to ensure we’re aligned and they understand how to use the document.
During development, I would constantly communicate with the developers’ progress to keep aligned and deal with any problems that would arise. It also gave me a chance to QA and ensure the feature was being implemented as intended
The solution
Our consumer site allows customers easily manage their water account online, whether at home on their desktop or on the go using their mobile.
Eliminate the need for calling up a provider or completing long online clunky forms - simply log in and complete tasks such as viewing your balance, previous bills, submitting a meter reading, making a card payment or simply updating your personal details.
The solution
Our consumer site allows customers easily manage their water account online, whether at home on their desktop or on the go using their mobile.
Eliminate the need for calling up a provider or completing long online clunky forms - simply log in and complete tasks such as viewing your balance, previous bills, submitting a meter reading, making a card payment or simply updating your personal details.
The solution
Our consumer site allows customers easily manage their water account online, whether at home on their desktop or on the go using their mobile.
Eliminate the need for calling up a provider or completing long online clunky forms - simply log in and complete tasks such as viewing your balance, previous bills, submitting a meter reading, making a card payment or simply updating your personal details.
The solution
Our consumer site allows customers easily manage their water account online, whether at home on their desktop or on the go using their mobile.
Eliminate the need for calling up a provider or completing long online clunky forms - simply log in and complete tasks such as viewing your balance, previous bills, submitting a meter reading, making a card payment or simply updating your personal details.
Post release
Since release, we've had over 1.9k users log into their account with the most used features including making a payment, submitting a reading and editing personal details.
Since the initial release, I've been working closely with product to continue working on the strategy and roadmap for this product. Our goal is to add more exciting features, which are more dynamic and engaging for users.
Post release
Since release, we've had over 1.9k users log into their account with the most used features including making a payment, submitting a reading and editing personal details.
Since the initial release, I've been working closely with product to continue working on the strategy and roadmap for this product. Our goal is to add more exciting features, which are more dynamic and engaging for users.
Post release
Since release, we've had over 1.9k users log into their account with the most used features including making a payment, submitting a reading and editing personal details.
Since the initial release, I've been working closely with product to continue working on the strategy and roadmap for this product. Our goal is to add more exciting features, which are more dynamic and engaging for users.
Post release
Since release, we've had over 1.9k users log into their account with the most used features including making a payment, submitting a reading and editing personal details.
Since the initial release, I've been working closely with product to continue working on the strategy and roadmap for this product. Our goal is to add more exciting features, which are more dynamic and engaging for users.
The problem
💰 Customers expensive to manage
Customers relied on our client's operation teams to manage their account - this was time consuming and expensive
🛜 Poor online experience
There was a lack of a digital touchpoint that our clients could offer to customers to help reduce the pressure on operation teams. This also create a dissatisfied customer who may lose trust in their water provider.
💬 Lack of engagement
Without any consumer portal, it was difficult for clients to interact with the customers easily to market their business goals, such as increasing direct debit, to their customers.
The problem
💰 Customers expensive to manage
Customers relied on our client's operation teams to manage their account - this was time consuming and expensive
🛜 Poor online experience
There was a lack of a digital touchpoint that our clients could offer to customers to help reduce the pressure on operation teams. This also create a dissatisfied customer who may lose trust in their water provider.
💬 Lack of engagement
Without any consumer portal, it was difficult for clients to interact with the customers easily to market their business goals, such as increasing direct debit, to their customers.
The problem
💰 Customers expensive to manage
Customers relied on our client's operation teams to manage their account - this was time consuming and expensive
🛜 Poor online experience
There was a lack of a digital touchpoint that our clients could offer to customers to help reduce the pressure on operation teams. This also create a dissatisfied customer who may lose trust in their water provider.
💬 Lack of engagement
Without any consumer portal, it was difficult for clients to interact with the customers easily to market their business goals, such as increasing direct debit, to their customers.
The problem
💰 Customers expensive to manage
Customers relied on our client's operation teams to manage their account - this was time consuming and expensive
🛜 Poor online experience
There was a lack of a digital touchpoint that our clients could offer to customers to help reduce the pressure on operation teams. This also create a dissatisfied customer who may lose trust in their water provider.
💬 Lack of engagement
Without any consumer portal, it was difficult for clients to interact with the customers easily to market their business goals, such as increasing direct debit, to their customers.
Want to have a chat?
© Copyright 2023. All rights Reserved.
Made by Jonny Palmer in Framer
Want to have a chat?
© Copyright 2023. All rights Reserved.
Made by Jonny Palmer in Framer
Want to have a chat?
© Copyright 2023. All rights Reserved.
Made by Jonny Palmer in Framer
Want to have a chat?
© Copyright 2023. All rights Reserved.
Made by Jonny Palmer in Framer