Role
UX Designer
Responsibility
UI/UX design
Duration
4 months (1.5 months design-focused), 2023
Company
AIA Insurance Hong Kong
Background
AIA, a leading multinational insurance company, sought to create an exclusive wellness program for its premium customers. The initiative aimed to offer curated health and wellness services, promoting personal healing and well-being.
To support this program, AIA envisioned a responsive website that would serve as both a promotional platform and a management tool for its members.The website had to balance an inviting public-facing interface with a seamless member-exclusive experience, encompassing service booking and profile management.
Challenges
Objectives
Our goal was to design an intuitive, responsive platform that:
My role
I joined the project team as a Product/UX Designer during the final stages of research. Collaborating with internal AIA designers, I refined the user journey and co-designed the login and homepage. I also led the end-to-end design of post-login flows, including appointment booking, appointment management, and membership profile management.
Throughout the process, I participated in weekly meetings with developers, product managers, and stakeholders, ensuring alignment across all teams.
The website successfully launched in March 2024.
When I joined, the research phase had just concluded. I quickly immersed myself in refining the user journey map with AIA’s internal UX designers. Together, we created a comprehensive user journey map illustrating touch points, potential pain points, and opportunities.
This map became a central tool for stakeholder discussions, helping us gather detailed requirements and align our vision with AIA’s expectations.
The design process progressed alongside ongoing requirement finalisations by the team. To address ambiguities and clarify the needed features and functionalities, we developed a user story map based on preliminary project requirements. This mapping exercise not only outlined key features but also facilitated alignment with the client, fostering a shared understanding across all teams and ensuring the design direction remained clear and focused.
After gathering initial business requirements and the discussion on the user story map, we developed a sitemap rapidly that structured the website’s information architecture. This ensured alignment with both AIA stakeholders and the development team.
Certain flows, like the booking process for different types of members and the two-factor authenticated registration process, were initially ambiguous. To address this, we created detailed user flows for presenting and confirmation, which brought clarity and minimised potential confusion during the design phase.
I designed wireframes for critical features, including the home page, membership profile, and appointment booking.
These wireframes allowed us to effectively communicate ideas with stakeholders, gather early feedback, and iterate designs to meet client expectations.
We successfully delivered a responsive, user-friendly website that prioritised both functionality and an engaging user experience. Prototypes below are representing some of the key design highlights:
Informational onboarding:
The homepage was designed as a visually appealing introduction to the wellness program, incorporating fade-in on scroll animations in the published website. These subtle animations were added to create a smooth, elegant browsing experience that aligns with the program’s premium essence. They also help draw attention to key sections, ensuring users focus on important information as they navigate the page.
Streamlined service booking:
To simplify the booking process for members, I implemented an intuitive 4-step progress bar at the top of the booking page. This auto-updating progress bar provides users with a clear sense of their current step, reduces cognitive load by breaking down the process into manageable sections, and allows easy navigation between steps if they need to make changes. The result is a booking system that feels seamless and tailored to user needs, even when handling extensive information inputs.
Membership and appointment management:
I designed an all-in-one management hub for members to efficiently oversee their wellness profiles and appointments. This centralised page allows users to easily update their profiles and track appointments, offering a cohesive experience for managing their wellness journey.
Each feature was carefully crafted to enhance usability while embodying the luxury and sophistication that AIA’s premium wellness program represents. This attention to detail ensured the design met both user expectations and brand values.
Responsive design
To ensure the website provided an optimal experience across devices, I designed three main breakpoints for key screens: 320px (mobile), 768px (tablet), and 1024px (desktop). This approach allowed developers to clearly follow responsive design guidelines for seamless implementation.
I also created separate typography and grid systems for each breakpoint, ensuring visual and functional consistency across all devices.
Localisation
Catering to a diverse user base, the website supported three languages: English, Traditional Chinese, and Simplified Chinese. We meticulously documented the copywriting content for each section across the different languages and incorporated language-specific typography styles into the design system. Key pages were also adapted into multilingual versions to guide the development team and maintain a consistent user experience.
Design systems
The finalised design system encompassed comprehensive guidelines, including:
1. Breakpoints and responsive layout rules.
2. Typography standards for all three languages.
3. Components aligned with AIA’s branding, reflecting the wellness program’s premium and natural essence.
This robust design system ensured consistency throughout the project and provided a scalable foundation for future iterations and enhancements. It streamlined collaboration with developers and facilitated the delivery of a cohesive, high-quality user experience.
The AIA team expressed satisfaction with the website’s design and functionality. Our collaborative approach ensured that the project met its objectives within the aggressive timeline, and we secured an opportunity to continue consulting on post-launch enhancements, including conducting usability tests to refine user interactions, tracking metrics to identify areas for improvement, and incorporating user feedback for design updates.
This project underscored the importance of flexibility in handling evolving requirements. As the program details were finalised during the design phase, I adapted by:
1. Leaving room for uncertain content
2. Creating spare design versions to accommodate potential changes
3. Synchronising closely with stakeholders to ensure alignment
Looking back, I recognise the value of involving end-users more extensively in research to achieve a balanced, user-centred design. While the project’s success was driven by agility and collaboration, deeper user insights could have further enhanced the experience.
