From fragmented to unified: creating the My Pepper Money portal
Pepper Money's customers faced a fragmented and frustrating experience, having to log into separate, disconnected portals for each of their loan products. The challenge was to design 'my.peppermoney', a single, unified self-service platform where customers could manage their entire portfolio in one place.
Team
I collaborated closely with another UX Designer, a Solution Architect and a small team of developers.
Timeline
6 weeks (Discovery & Design)
Tools
Figma, Sketch, Miro, Flowmapp
One customer, many logins: the cost of a fragmented experience
Imagine being a loyal Pepper Money customer with both a home loan and a car loan. Instead of a single, convenient place to manage your finances, you were faced with a confusing and fragmented digital experience. Each loan product lived in its own separate portal, each with a completely different look, feel, and customer experience.
This fragmentation wasn't just an inconvenience; it created a significant barrier to simple tasks. The portals offered minimal self-serve capabilities, meaning that for basic actions like updating personal details or even checking a loan payout figure, customers had no choice but to stop their digital journey and call the contact centre.
This reliance on phone support created inefficiency for the business and frustration for customers, who simply wanted the ability to manage their own finances in one place. The challenge was clear: to move from a collection of disconnected products to a single, unified 'my.peppermoney' home.
THE CHALLENGE
From many to one: defining our mission
Pepper Money knew from customer surveys and NPS scores that their existing, fragmented portals were not meeting modern user expectations. The technology was outdated, the experience was inconsistent, and a complete paradigm shift was needed to deliver on their vision of a truly customer-centric digital experience.
The user problem
Customers faced a confusing and outdated experience, forcing them to call the contact centre for simple self-service tasks. They expected a single, modern platform to manage their entire relationship with Pepper Money.
The business problem
The existing portals could not be upgraded to provide the "world-class digital user experience" the business was aiming for. This fragmentation was inefficient and damaging to the brand's goal of being customer-centric.
Our goals
The mission was to consolidate all product lines into a single, universal customer portal. The stakeholder vision was clear: “Our vision was to give our customers the ability to self-serve online in their own time, when and where they wanted... and to do this in a beautiful, frictionless way.”
Our design, therefore, had to be sleek, intuitive, and delivered quickly without compromising on this quality.
MY ROLE & CONTRIBUTIONS
Guiding the design from ideation to final mockups
My role on this project began as a close partnership with another UX designer. Together, we led the early discovery phase, defined the user flows and personas, and created the initial design hypotheses. We also collaborated on the first rounds of low-fidelity wireframes and validated these concepts to establish a clear and unified design direction.
Following this initial ideation, my role transitioned to sole ownership of the high-fidelity design phase. My key contributions from this point included:
High-fidelity design ownership: Leveraging my strong UI skills, I took responsibility for translating our validated wireframes into a final, polished, and cohesive visual experience across the entire platform.
Development-ready deliverables: I produced and managed all final screen designs for every product line, ensuring they were component-based and ready for a smooth, efficient handover to the development team.
Early ideation started on paper before moving onto Lo-Fi wireframes in Sketch.
THE PROCESS
Collaborative discovery, focused design
Building a clear picture from customer data
Our collaborative discovery phase began by diving into Pepper Money's existing NPS and customer survey data. This quantitative data provided the foundation for us to define a clear set of user personas. To understand the 'why' behind the low scores, we ran workshops with internal teams to analyse the most common call drivers to the contact centre. This process allowed us to identify and map the major pain points within the current-state user journeys.
Mapping a unified journey
A critical pain point we identified was the fragmented onboarding and login process, where customers needed separate credentials for each loan portal. This insight became a top priority. We mapped a new, future-state journey focused on a single, unified login. We then moved into collaborative low-fidelity wireframing to test and validate our new, streamlined concepts, ensuring our proposed solution was user-friendly and logical before committing to high-fidelity design.
Focused design and technical collaboration
Following our initial ideation, we validated a single design direction with the business. At this point, leveraging my UI skills, I took sole ownership of the design. My responsibility was to translate our validated wireframes into the final, polished product, including all responsive variations from desktop to mobile.
This was a highly collaborative phase. I worked closely with the development team to ensure every design decision was technically feasible and with the Business Analyst to ensure all acceptance criteria were clearly captured in the final designs. Our approach was mobile-first, and a key design decision was to surface the most important self-service capabilities, the very ones that previously required a phone call, as 'quick actions' on the new portal dashboard. This directly solved our primary user pain point by making common tasks simple and immediately accessible.
THE SOLUTION
One portal, one customer: the unified my.peppermoney experience
The final solution delivered on our core mission: to consolidate a fragmented product ecosystem into a single, cohesive, and modern customer portal. The design was mobile-first and focused on providing immediate access to self-service capabilities. Here are the key features that brought this to life.
A unified dashboard for a complete financial overview
We replaced the multiple, disconnected portals with a single dashboard. Each of the customer's loan products is now displayed as a clean 'loan card', showing critical information like the outstanding balance and next repayment date at a glance. On mobile, these cards are placed in an intuitive carousel, allowing users to easily swipe between their accounts and see their full financial picture in one place for the first time.
Surfacing self-service with quick actions
To directly address the high volume of support calls, we introduced 'quick actions'. On the main dashboard, we surfaced the most common, global self-service tasks, such as 'Make a payment' or 'Manage direct debit', giving users immediate access to the functions they need most. We also used contextual quick actions on each individual loan screen. This allowed us to present relevant actions for each specific loan type, empowering customers to manage their accounts without ever needing to pick up the phone.
A single, secure login
Finally, we solved one of the biggest initial frustrations: the login experience. We replaced the old system, which required users to remember multiple, unique account IDs for each loan, with a single, simple login. The new journey uses a familiar email and password combination with 2-factor authentication, creating one secure and predictable front door for the customer's entire Pepper Money relationship.
THE IMPACT
A measurable impact on self-service
The launch of the 'my.peppermoney' portal was a major strategic success, delivering immediate and measurable results for both the business and its customers. The move to a unified, self-service platform led to increased customer satisfaction and retention and significantly reduced calls to the contact centre.
Most impressively, the new portal immediately increased online access to Pepper Money’s loan products by 10%. The feedback from the business was highly positive, with one key stakeholder stating, "...we co-created a solution that is going to make a huge difference to our customers."
LEARNINGS & REFLECTIONS
Key lessons and future opportunities
The value of direct validation. While we built a successful product on internal feedback, I would always advocate for direct user access. Being able to validate our design decisions directly with users would have added another layer of confidence and likely streamlined our ideation process.
Balancing feedback with momentum. The initial ideation phase was highly collaborative, involving many stakeholders across various business units. Balancing this wide range of valuable feedback was a key challenge, and in the future, I would be more proactive in timeboxing feedback rounds to maintain a stronger forward momentum for the project.
Future opportunity: optimising the desktop experience. Our mobile-first approach was a success, but I believe the desktop dashboard could be further optimised. A clear next step would be to revisit the 'loan card' design for larger screens, perhaps offering users a choice between a card view and a more condensed list view to better suit their needs.
