"Dealing with Bereavement" Page
I redesigned the mobile version of the “Deal with Bereavement” page with a clear and simple five-step guide. Additional information is neatly collapsed and can be expanded by clicking the downward arrow. A “Back to Top” button is also available at the bottom of the page for easy navigation.
How might we?
How Might We statement is a design thinking tool to reframe challenges in a way that opens the door for innovative, collaborative solutions.
How might we simplify the process for clients to submit and track documents related to a deceased customer’s account, so that each case is resolved faster and clients find the process easier?
How might we create a checklist online for document submission, so that clients can easily understand which documents are needed and upload them without assistance?
How might we enable clients to check the progress of their case without needing to go through branch staff, so that they feel more informed and in control?
How might we design an online support system for bereavement cases, so that clients can access resources and guidance at their convenience?
Project Brief
This project focuses on designing a user-centric UX solution for HSBC's deceased estate customers. The focus is on creating a compassionate and seamless user journey that aligns with the brand, especially during the challenging times of handling a loved one's passing.
Empathize with users
I interiewed with stakeholder, HSBC staff and protential customers to gain a deep understanding of users. I also used persona to synthesize user research and represent key user archetypes., I used user journery map isualize the user’s experience, highlighting touchpoints, emotions, and pain points encountered while reporting a deceased customer and navigating the bereavement process with HSBC.
Time Period
7 Weeks, Sep - Nov 2024
Responsibilities
User Flows, Sitemap, Prototypes, Usability Test, Design System
Tools used
Figma, Canva, Zoom
Project Goals
Initial interaction and onboarding redesign
Streamline and enhance the user experience for reporting a customer’s death, converting the current process into a more user-friendly online system, including: "Dealing with Bereavement" page and "Deceased Customer Notification" form.
Case Management system
Design a system that clearly communicates the user's current status in the process, outlines the next steps, and highlights any required actions. The implementation approach is flexible, one solution may be a customer portal.
Document Management
Simplify the document submission process. Increase the visibility of submitted documents. Provide insights about the status of submitted documents.
Personas: I created a persona based on insights gathered from user interviews. These personas represent the users’ goals, needs, behaviors, and pain points, providing a clear foundation for designing effective solutions.
User journey map: I created a persona based on insights gathered from user interviews. These personas represent the users’ goals, needs, behaviors, and pain points, providing a clear foundation for designing effective solutions.
Complex Process
The process of handling a deceased’s account is highly complicated.
clients must submit documents and verify their identity by mail or at a bank branch.
Branch staff only receive documents and pass them to the SD team, who manages the case but cannot be contacted directly by users.
If the SD team needs additional information, clients must resend it through the branch or mail, creating further delays.
Lack of Transparency and Tracking
Case information is exclusive to SD team staff and there is currently no tracking on the cases, neither constant updates for users.
Since theire is no tracking numbers and clients couldn’t contact the SD team directly, they have no way to check the progress of their case, which can lead to frustration and anxiety.
Lack of Experience Among Branch Staff
The staff lack detailed, scenario-based training on the bereavement process, but they handle deceased estate cases infrequently, they do not gain enough practical experience to build confidence.
The existing training and communication do not provide frontline staff with a clear understanding of the back office (SD team) procedures and timelines involved in the deceased estate process.
Define the Problem
fter conducting thorough research and gaining a deep understanding of the users’ pain points, I was able to identify the core challenges they face. This comprehensive insight allowed me to pinpoint the primary problem during the define stage of the design process. By carefully analyzing the data and synthesizing user feedback, I ensured that the problem statement accurately reflected the users’ needs and frustrations, providing a solid foundation for developing meaningful and effective design solutions.
Ideate Solutions
I employed the “How Might We” method to ideate solutions for the problem I identified, fostering creative and user-centered approaches. Additionally, I redesigned the workflow for clients reporting a deceased customer, streamlining the process to make it more efficient and user-friendly. To ensure clarity and usability, I designed a sitemap for the “Dealing with Bereavement” page and the case management portal, providing a clear and intuitive structure for the information architecture.
Workflow: I redesigned the deceased customer notification workflow to streamline the process, significantly reducing the effort required from both customers and HSBC branch staff. With the updated workflow, branch staff primarily act as intermediaries, simply passing information from customers to the specialized support team, without the need for their direct involvement in the resolution process.
Original Workflow
Optimized Workflow
Sitemap: I created a comprehensive sitemap for both the “Dealing with Bereavement” page and the Bereavement Support Portal. This allowed me to establish a clear and organized structure, ensuring that all essential content and features were accurately included.
Designing & Testing
During the design and testing phase, I began with paper wireframing, sketching as many potential solutions as possible. I then selected the most realistic and feasible option and created a digital wireframe in Figma. After that, I transformed the wireframe into a clickable prototype and conducted usability testing with volunteers. Based on their feedback, I refined and enhanced my design to improve the overall user experience.
Usability test: I conducted a usability test with HSBC’s Case Management System (CSM) Bianka. Additionally, I carried out usability tests with four other participants. During these sessions, I collected qualitative feedback, identified issues, and iterated on the design to enhance the user experience.
Final Prototyping
After completing the Usability Test, I finalized my Final Prototyping. Below are some screenshots of my Final Prototyping, showcasing the features I designed.
Paper Wireframes
I used the Crazy Eights method to quickly sketch as many ideas as possible. Then, select the best one and proceed with creating a wireframe.
"Deceased Customer Notification" Form
I created a digital “Deceased Customer Notification” form that clients can easily fill out online. They no longer need to print the form, mail it to HSBC, or visit a branch. This provides a faster and more convenient way to submit the notification.
Bereavement Support Portal
I designed a portal that allows clients to upload required documents, receive notifications, and track the progress of their cases—all in one place.
With the new portal, clients can stay informed in real-time, easily monitor updates, and manage their information from anywhere, significantly improving the overall experience.
Clients can log in to the portal using their case number, which they received after completing the "deceased customer notification" form, along with their surname and the email they previously provided.
Identity Verification
Before clients can upload any required documents, we need to verify their identity in accordance with HSBC’s banking regulations and policies. It is essential to ensure that the person handling the case is legitimate.
To complete identity verification, clients are required to upload two forms of identification, such as a passport, driver’s license, or photo ID. Additionally, clients must take a live photo (selfie) using their device camera, ensuring their face matches the ID provided. This process helps confirm their identity and ensures the security of their case.
Document Checklist Form
Before clients upload their documents, I designed the "Document Checklist Questions" form for them to complete. This form helps determine the specific documents required for upload based on different situations. I believe it will greatly assist clients by saving them time and helping them identify only the necessary documents they need to submit.
Upload documents
After completing the ‘Document Checklist Questions’ form, clients can access the ‘Upload Documents’ section from the portal homepage, where they can upload all required documents.
Progress & Inbox
Clients can also access the ‘Progress’ section and ‘Inbox’ section from the bottom of the portal’s menu bar. These sections allow clients to track the progress of their case and receive timely notifications from HSBC.
Next Steps
In conclusion, there are several actionable steps that we can consider implementing as a follow-up to this project to ensure continued improvement and success.
Implement a multi-language option.
Design a responsive version for desktop.
Complete the Notification system feature.
Add a Profile feature and Logout feature.