Redesigning the Profile & Contact details experiences
What
This project demonstrates my approach to redesigning the contact and personal details page of the Commonwealth Bank of Australia App. The work was driven by extensive customer feedback, data analysis, a commitment to enhancing user experience, and meeting evolving user and business needs.
The problem
Customers were experiencing frustration when attempting to update their personal details across different platforms (App and Web) due to outdated UI and UX, and overwhelming information required.
How
The project centred on enhancing user experience and accessibility of the pages. Our main goals included improving usability, optimising accessibility and addressing customer complaints.
Team: Lead UX designer(Victor Beltrame), Senior Product Manager, Senior Business Analyst, Senior Tech Lead, Native Developers, Junior UX designer
Client: Commonwealth Bank of Australia
Discovery - Understanding the problem
Customer problem
Users experienced multiple challenges when attempting to update customer details. The App and Web experiences provided a disjointed journey, there a was lack of transparency in handling customer personal details, and confusion in what could be edited on the App/online versus what needed to be handled in branch.
Business problem
Customers who are not able to update their personal details or find it difficult to navigate could potentially give CBA a low NPS - Net promoter score.
High number of calls, 50.000 calls monthly, to agents to manually update contact details.
Defining ‘profile’ and ‘contact details’
Defining 'profile' and 'contact details' was important for the project because it provided clarity of scope, aligned design decisions with user expectations, facilitated functionality prioritisation, promoted consistency and cohesion, and ensured alignment with business goals. This foundational step set the stage for a focused and effective redesign that met the needs of both users and the business.
What is ‘contact details’?
Contact details provide customers with a simple way to view, manage, update, or modify their personal information as needed. It allows individuals to ensure that their account details are accurate and up-to-date.
What is not ‘contact details’?
Information about the customer’s banking products or how they use bank features.
Details that could discriminate customers e.g. race, religion.
Information needed beyond what is necessary.
What is ‘profile’?
The primary purpose of the profile page is to provide an easily accessible space for users to view and manage their own personal information, and access global settings. It is a space that allows users to view and manage their administrative tasks relating to the app or company.
What is not ‘profile’?
A page for users to do their core banking tasks e.g. view transactions, pay bills or complete transfers.
A space for advertisements or promotions.
A page to explore new features or find bank products.
A page to dump all miscellaneous features.
Stakeholder interviews
What
I conducted stakeholder interviews, with the Crew Lead and General Manager (GM), to gain a comprehensive understanding of the problem and set the stage for effective project planning and execution.
Actively engaging with stakeholders, subject matter experts, and project sponsors helped me gather insight into their perspectives, requirements, and expectations.
This collaborative process helped ensure the project addressed key concerns and delivered outcomes that met stakeholder requirements.
Quantitative research
Collecting and analysing feedback
I began by gathering existing customer feedback and complaints related to profile and contact details management. This included insights from customer support interactions, surveys, online reviews, and user feedback channels.
Identifying pain points and patterns
Through analysis of this feedback, we identified common pain points and recurring themes. These ranged from usability issues and difficulty in updating information, to concerns about privacy and specific feature requests.
Prioritising improvement areas
Based on customer feedback insights, I prioritised specific areas for improvement within the profile and contact details functionality, guided by severity and frequency of customer-reported issues.
Defining project objectives
With a clear understanding of pain points and improvement areas, I defined and presented project objectives that closely aligned with customer concerns to enhance overall user experience.
Findings and next steps
What was learnt..customer complaints can be categorised into three major groups
After presenting the findings and proposed direction of the redesign, stakeholders recognised the value of addressing identified user pain points and enhancing the overall user experience.
Profile
Overall, there was consistency across competitor banks in the ‘Profile/Settings’ section, including contact details, security options, app settings etc. with some key exceptions, such as rewards, documentation, help, address book
CBA’s most competitive feature was ‘Credit score’, with no other competitor bank offering an entry-point for this in 'profile’
However, there was no consistent IA structure used across the industry - the key implication being that these screens were designed to fit and align with their app’s navigation model
Among competitor banks, CommBank was positioned moderately.
Competitor & comparator analysis
The objectives of our assessment included identifying experience gaps relative to competitors, assessing feasibility in the profile and contact details experience, understanding industry-standard information architecture, and gauging our position among other banking apps.
We reviewed banking apps by checking how well they covered profile and contact details, the ease for users to update their information, and how well-organised and easy to navigate the apps were.
Personal details
When it came to the experience and ease of managing contact details, CBA had the most gaps among competitor banks
Had the most channel switching for users
Only Big4 bank without a natively built contact details page
Least self-serve functionalities offered - including preferred name and mobile number
Lack of status indicators when users confirmed their new details, leaving a feeling of insecurity
However, NetCode offered a unique layer of security, with other banks not requiring any additional authentication to access personal details (e.g. UpBank & Macquarie)
Current user flows and experience
Conducting a survey of current user flows and experiences was important for the project because it provided actionable insights, informed redesign priorities, optimised user journeys, ensured consistency, and validated design decisions based on actual user behaviour and needs. This approach ultimately led to a more effective and user-centric redesign of these crucial features.
Experience vision
Creating an Experience Vision was critical for the profile and contact details redesign as it provided alignment with goals, guided design decisions, facilitated communication, inspired creativity, emphasised user-centricity, and enabled evaluation and iteration based on the desired experience. This holistic approach ensured the redesign delivered a compelling and effective user experience that met both business objectives and user expectations.
Improving the profile and contact details experience
Our goal was to create a user-friendly and efficient process that empowered all customers to access and manage their profile and personal information. To achieve this, our focus was on ease of use, clear customer communication, and leveraging modern technology and standards to simplify the experience.
Ease of use
The experience needed to meet accessibility standards, and provide clear and intuitive navigation for all users, allowing customers to change their details seamlessly and efficiently.
Clear communication
We also needed to provide customers with a clear overview of their personal information and minimise frustration by being transparent on the necessary criteria.
Leveraging modern technology
We took advantage of updated technology to create a faster and more robust system to support the experience, and appropriately challenged current state friction and complexity to simplify the experience.
RAID - Risks, Assumptions, Issues, and Dependencies
Implementing RAID (managing, clarifying, identifying and resolving risks, assumptions, issues, and dependencies) enhanced communication and transparency, and supported effective project planning and decision-making. This structured approach contributed to the overall success and smooth execution of the redesign project.
Design - Low Fi (Ideation)
I facilitated a design ideation session with our team, ensuring a well-structured and iterative process. This session effectively tapped into the diverse expertise of the team members, including the Senior Product Manager, Senior Business Analyst, Senior Tech Lead, Native Developers, and UX Junior Designer.
Together, we generated innovative ideas, evaluated feasibility, refined designs, and ultimately crafted user-centered solutions.
This collaborative approach ensured the final designs were not only creative but also practical and effective for implementation within the project scope. In summary, we arrived at two options for the redesign of the profile and contact details.
Profile and contact details multiple page design
Profile and contact details single page design
The decision to present and explore both design options stemmed from a holistic evaluation of user needs, competitor analyses, usability considerations, stakeholder input, and alignment with UX principles, to provide an optimised and flexible user experience within CommBank's digital ecosystem.
1. Profile and contact details multiple page design
Focused and digestible content
Breaking down the profile and contact details into multiple screens allowed for a more focused presentation of information. Each screen was dedicated to specific categories or types of information (e.g. personal details, contact preferences, security settings).
Clear navigation and structure
Users navigated through the different sections more easily, which reduced cognitive load and made it simpler to locate and update specific details.
Enhanced user experience
By presenting information across multiple screens, users were guided through a structured process, with enhanced comprehension and reduced risk of overlooking important details.
Scalability and future expansion
A multiple-page design better accommodates future enhancements or additional features without sacrificing usability. New sections or details can be seamlessly integrated into the existing flow.
2. Profile and contact details single page design
All information in one place
In a single-page design, all profile and contact details were consolidated into a single long-scrolling page. This included personal information, contact preferences, and various settings.
Clutter and complexity
With all details on one page, there was a risk of overwhelming the user with too much information at once, and challenging to maintain a clean and organised layout, leading to potential confusion or oversight.
Loading and performance
A single-page design could lead to longer loading times, especially as more information is added or as the user's data grows over time.
Why multiple screen design was the winner winner chicken dinner
In summary, opting for a multiple-page design for the profile and contact details contributed to a more intuitive, efficient, and user-friendly experience. It allowed for better organisation, clearer navigation, and improved performance, ultimately enhancing overall user satisfaction and engagement.
User engagement
Breaking information into manageable chunks encouraged users to engage more deeply with each section, leading to higher completion rates for profile updates.
Error reduction
With a step-by-step approach, users were less likely to make errors or miss critical information, reducing the need for corrections or follow-up actions.
Customisation
Each screen was be tailored to specific user needs, offering assistance based on the context of the information being updated.
Usability test and incorporating feedback
Conducting exploratory usability testing for Profile Day 1 and Day 2, and understanding customer mental models when updating their contact details.
In summary, having one round of usability testing was crucial for the project because it allowed the design team to identify user pain points, validate design decisions, gather actionable feedback, improve accessibility, and enhance user satisfaction. By incorporating usability testing into the design process, the team was able to create more effective and user-friendly designs for accessing and managing profile and personal information.
Methodology
Running 60 minute N=8 Exploratory UT interviews, we delved into customer impressions of an updated profile and contact details flow inside the CommBank app. Customers also tested a Day 2 flow of updating their mobile number and what they could do inside 'profile’.
Profile 2.0 and contact details
This session primarily focused on the usability of the profile and contact details. As a secondary focus, we explored ideas and themes for future iterations of the profile.
By combining exploratory testing and structured usability testing, we gained a comprehensive understanding of the product's usability, identified potential issues, and gathered valuable insights to inform design decisions and improve user experience.
What worked well
Profile and contact details fit user expectations of what they want to do inside those screens
Updating display name and toggling was clear and appreciated as a way of setting a nickname or preferred name within the app
Changing home address was clear and straightforward for users with the confirmation map adding peace-of-mind when completing the flow
Assigning address to accounts was considered a useful function for those unfamiliar with a different postal address outside of their home address
Day 2 mobile updating process was considered more straightforward and simple compared to the Day 1 process and aligned more with customer expectations.
Session structure
Profile and contact details 2.0-day-one prototype
Profile and contact details 2.0-day-two prototype
Exploratory question about profile day and tree features
What needs improvement
Updating name screen had issues due to copy of updating legal name/gender/title buttons with some users noting they weren’t able to update these within the app due to wording
Some users wanted to see steps or guidance on how they could update their PayID given how mobile and email updating didn’t affect it
Some users assumed ‘assign address’ to accounts was how to update their postal address
Most users expected some form of confirmation or verification when they updated their mobile or email, citing it would provide a sense of security and peace of mind.
Design - High Fi
Conceptual wireframes to detailed mockups
After the ideation session, we progressed to developing high-fidelity designs. Initially, the redesign process started with conceptual wireframes or low-fidelity sketches, which provided a blueprint outlining the layout, structure, and interactions of the multi-page design.
With the wireframes approved, the next phase involved translating the concepts into high-fidelity designs. Detailed mockups were created using design Figma.
UI enhancements
The transition to high-fidelity designs involved incorporating refined visual elements meticulously chosen to align seamlessly with CommBank's design system. This approach ensured the design's appearance reflected brand guidelines.
Accessibility and responsiveness
High-fidelity designs place a strong emphasis on accessibility and responsiveness. We ensured the interface was accessible to users with disabilities by adhering to WCAG standards.
Responsiveness is key, with designs optimised for various devices and screen sizes, including desktops, tablets, and smartphones.
Refinement Based on Feedback
Our transition to high-fidelity designs involved iterative refinement based on user testing and stakeholder feedback. We gathered insights from usability testing sessions to identify pain points, areas of confusion, or opportunities for improvement.
Feedback was incorporated into the high-fidelity designs to address usability issues and ensure that the interface meets the needs and expectations of CommBank's customers.
Updating home address
Updating mobile
Prototype
Feel free to explore the prototype for the profile and contact details section by clicking on the button below.
Measuring success
Goals
Improve ease of use
Metric
Reduce % of customers rating contact details journey as ‘Worse Than Expected’ for Ease of Completion
Current
12%
Target
9% - (25% improvement)
Improve time to complete
Reduce % of customers rating contact details journey as ‘Worse Than Expected’ for Time To Complete
13%
9.8% - (25% improvement)
Reduce app fallout
Reduce start & switch from mobile app to assisted channel when updating personal details
CSD 3%
2.3%
Reduce calls
Reduce call volume for updating personal information
763k per 6MMA
611k - (25% improvement)
Reflections - What I Learned
Navigating the complex terrain of CommBank
Working within CommBank, a colossal institution, has been an eye-opening experience. The sheer scale and scope of operations underscore the importance of meticulous attention to detail in every aspect of our work.
Safeguarding user privacy: A non-negotiable priority
One critical lesson that has stuck with me is the importance of handling user personal information with the utmost care. Given the trust bestowed upon us by our customers, there's no room for error when it comes to protecting their sensitive data. It's not just a legal obligation, it's a moral imperative.
Shifting sands of leadership priorities
In such a dynamic environment, leadership priorities can undergo rapid changes. Adapting to these shifts requires agility and clear communication. We must remain vigilant to ensure that these changes do not compromise our core principles, particularly our commitment to customer satisfaction and data security.
Striking the balance: Deadlines versus customer satisfaction
Maintaining a balance between meeting deadlines and prioritising customer satisfaction is a delicate yet essential endeavour. Rushing to meet timelines at the expense of quality or customer experience can have detrimental long-term consequences. Striving for this balance ensures that we deliver not only on time but also with excellence, fostering trust and loyalty among our clientele