Making self-service intuitive for over 5 million Maxis users
Making self-service intuitive for over 5 million Maxis users
My Role
Sr. Product Designer
Platform
Web App
Timeline
May - August 2021
◆ Understand
◆ Understand
◆ Understand
Context
The Maxis care portal plays a crucial role in our digital channels, providing users with essential features such as bill payment and management, purchasing internet and roaming passes, and account management. In addition to powering our web portal, it also supports the Maxis app for a seamless user experience across platforms
Context
The Maxis care portal plays a crucial role in our digital channels, providing users with essential features such as bill payment and management, purchasing internet and roaming passes, and account management. In addition to powering our web portal, it also supports the Maxis app for a seamless user experience across platforms
Problem
The Maxis care portal was outdated and causing frustration for users. Despite its importance and the high volume of transactions it handles, we were still experiencing many broken user journeys. It was time to revamp the portal and provide a better user experience.
Problem
The Maxis care portal was outdated and causing frustration for users. Despite its importance and the high volume of transactions it handles, we were still experiencing many broken user journeys. It was time to revamp the portal and provide a better user experience.
Undefined journey
Users had a hard time navigating the portal and finding the features they needed due to a lack of hierarchy and prioritization.
Undefined journey
Users had a hard time navigating the portal and finding the features they needed due to a lack of hierarchy and prioritization.
Unsalable system
We came to a point where it was difficult for us to build up new features on the existing system due to the information architecture and design layout that were in place.
Unsalable system
We came to a point where it was difficult for us to build up new features on the existing system due to the information architecture and design layout that were in place.
Dull Visual
It appears to be washed out, lacking interactivity, consistency and responsiveness "too dashboardy” as one of the users described it.
Dull Visual
It appears to be washed out, lacking interactivity, consistency and responsiveness "too dashboardy” as one of the users described it.
Screenshots of the pre-existing portal ↓
Screenshots of the pre-existing portal ↓
From the problems identified above, I drew up a challenge statement:
From the problems identified above, I drew up a challenge statement:
“How could we improve the care portal user experience by making it easier to navigate, more interactive and scalable?”
“How could we improve the care portal user experience by making it easier to navigate, more interactive and scalable?”
“How could we improve the care portal user experience by making it easier to navigate, more interactive and scalable?”
◆ Ideate
◆ Ideate
◆ Ideate
Brainstorm
We brainstormed solutions to meet user needs through internal alignment sessions. Our iterative brainstorming led to a clearer picture of how to revamp the care portal, laying the foundation for the wireframes and user flow diagrams.
Brainstorm
We brainstormed solutions to meet user needs through internal alignment sessions. Our iterative brainstorming led to a clearer picture of how to revamp the care portal, laying the foundation for the wireframes and user flow diagrams.
Information Architecture
We restructured the care portal from the user's point of view, using information architecture principles to group and organize information logically. Prioritizing the most important features and information helped create an easy-to-navigate design that met user needs.
Information Architecture
We restructured the care portal from the user's point of view, using information architecture principles to group and organize information logically. Prioritizing the most important features and information helped create an easy-to-navigate design that met user needs.
Wireframes & User flow
Collaborative iterations led to a streamlined design for the care portal. User research showed the previous design was cluttered and confusing, so I incorporated user feedback to improve the layout and navigation. The wireframes and user flow created a user-centered design for an optimal experience.
Wireframes & User flow
Collaborative iterations led to a streamlined design for the care portal. User research showed the previous design was cluttered and confusing, so I incorporated user feedback to improve the layout and navigation. The wireframes and user flow created a user-centered design for an optimal experience.
◆ Design & Prototype
◆ Design & Prototype
◆ Design & Prototype
Direction
To guide the design process, I established three key goals: simplicity, consistency with the design system, and continuous user testing to ensure we were on the right track. Using these goals as a framework, we leveraged and enhanced the existing design components while also creating new ones as needed.
Direction
To guide the design process, I established three key goals: simplicity, consistency with the design system, and continuous user testing to ensure we were on the right track. Using these goals as a framework, we leveraged and enhanced the existing design components while also creating new ones as needed.
Dashboard
Providing users with an at-a-glance view of their account details and frequently-used services. We included a search bar and trending services to help users easily find what they need.
Dashboard
Providing users with an at-a-glance view of their account details and frequently-used services. We included a search bar and trending services to help users easily find what they need.
Internet
Purchasing additional internet and entertainment passes, as well as adding roaming services for their travels. Designed to be clear with transparent pricing and package options. Any purchased passes will be reflected in the user's internet balance.
Internet
Purchasing additional internet and entertainment passes, as well as adding roaming services for their travels. Designed to be clear with transparent pricing and package options. Any purchased passes will be reflected in the user's internet balance.
Bills
Offering convenient payment options and several enhancements for a hassle-free payment experience. These include direct debit for automated payments, a digital spend limit for online purchases, eBill and other features.
Bills
Offering convenient payment options and several enhancements for a hassle-free payment experience. These include direct debit for automated payments, a digital spend limit for online purchases, eBill and other features.
Profile
Breaking down the Profile section into three main sections - Account, Manage Profile, and Orders & Cases - will allow users to effectively manage their personal information, payment method, addresses, preferences, and track their orders and support cases.
Profile
Breaking down the Profile section into three main sections - Account, Manage Profile, and Orders & Cases - will allow users to effectively manage their personal information, payment method, addresses, preferences, and track their orders and support cases.
Mobile approach
Ensuring responsiveness across all breakpoints is a top priority, with mobile being the second most popular device. Showcase mobile breakpoints to demonstrate adaptability and user-friendliness, ensuring a seamless user experience on smaller screens.
Mobile approach
Ensuring responsiveness across all breakpoints is a top priority, with mobile being the second most popular device. Showcase mobile breakpoints to demonstrate adaptability and user-friendliness, ensuring a seamless user experience on smaller screens.
◆ Test
◆ Test
◆ Test
Usability Testing
After accumulating user feedback throughout the design phase, the Maxis Care portal was tested end-to-end in a controlled environment with 10+ remote users due to COVID-19 restrictions. Prior to this, tests were held in person.
Usability Testing
After accumulating user feedback throughout the design phase, the Maxis Care portal was tested end-to-end in a controlled environment with 10+ remote users due to COVID-19 restrictions. Prior to this, tests were held in person.
User Feedback
Usability testing gathered valuable user feedback, which was compiled into a comprehensive report. Stakeholders were updated, and an action item list prioritized feedback for development and enhancement.
User Feedback
Usability testing gathered valuable user feedback, which was compiled into a comprehensive report. Stakeholders were updated, and an action item list prioritized feedback for development and enhancement.
Test report - Actions items ↓
Test report - Actions items ↓
