.png)
🩺 Manulife Health Check Website
📚 Project Overview
To arouse public awareness of health and achieve company social responsibility, Manulife collaborated with medical centers to provide health check programs with special offers to reward their current customers. Meanwhile, encourage users to make medical appointments and aim to minimize the workload on the customer service support line.
2 months
Userflow
Wireframe
UI design
Worked with a developer and a project manager
Figma
❓Vague problem statement
As we had multiple health check programs listed, I took the initiative to organize similar programs into categories to simplify the searching process for users.
🔍 Research - Let's see what others did!
I analysed different websites that provide an array of health check plans to learn about their user flow and layout design.
Competitors:
-OT&P Health Care
-Bowtie
-Mobile Medical
-Human Health
The website only emphasized package prices so users could only view product details by clicking on the page. None of them provide a “plan highlight” on the landing page so that users have difficulty to make a reservation.
There are also helpful examples to reference. For instance, programs are categorized by their respective categories, providing a clear price range for packages, and incorporating a Call-to-Action (CTA) button to encourage users to register.
✏️ Concepts
Before the wireframing, I mapped out the customer user flow to help me gain clarity about the website structure.
✏️ Ideation
1. Emphasizing the CTA button:
ensures customers can swiftly redeem the coupon.
2. Implementing location and gender filters:
enable users to search for the nearest centre for their required body check.
3. Add plan descriptions:
customers have a brief idea of the program at the first gaze.
4. Displaying the medical center's logo:
assists customers in identifying a reputable and qualified medical facility.
.png)
🤹🏻 Usability Test
I developed a Hi-Fi prototype and conducted thorough Zoom interviews with stakeholders.Through usability tests, I gained valuable new insights into the project.
After testing with stakeholders, I observed that they love to compare the featured programs' differences, but the current design could only sort out the location for them.
Moreover, the medical centers’ logos would not help customers define their interest in the program, so it could be eliminated.
🎯 Iteration
1. Categorized the health check program by features instead of the location:
customers compare the specifications easily.
2. Incorporated a "Plan Highlight" section:
offer users a concise summary of key details.
3. Integrated the e-voucher and location into each card:
customers could simply book an appointment.
4. Displayed eligibility criteria:
assist users in determining their suitability for the plan.
🎯 Iteration
1. Restructured the layout from columns to a dropdown menu:
making it easier for feature classification on various devices, especially mobiles.
2. Downloadable e-voucher: allowing seniors to easily save or print the QR code for convenient presentation at the medical centre.
.png)
🔤 Accessibility
- Accessibility Focus: Prioritized accessibility throughout the design and development phases, ensuring adherence to WCAG (Web Content Accessibility Guidelines) standards.
- Inclusive Features: Integrated keyboard navigation, screen reader compatibility, and high-contrast color schemes to support users with visual or motor impairments.
- Enhanced Usability: Added alt text to images, and made forms easily navigable with clear labels and error messages for a seamless experience across all user abilities.
🎁 Outcomes
- Categorized the health check program by features
- Enhanced efficiency for customers to compare the programs’ specifications
- After revamping the website, I increased the reservation rate in booking health check appointments by 15%
- Reduced the workload on the customer service support
🎁 Business Opportunities
- Introduced an FAQ section, including "How to apply?" and "Steps for application," for easy navigation.
This aims to reduce confusion among customers and alleviate pressure on the hotline.
- Established a feature-based program comparison chart, detailing prices and eligibility: adapt to potential future collaborations with additional medical centres.
After grouping the health check programs, I am pleased that I was able to meet the client's expectations and help customers easily search for information.
In addition, I learned the importance of conducting UX research before moving on to low-fidelity wireframes. Without conducting stakeholder interviews, I would not have discovered a better way to illustrate the UI design. Therefore, I would spend more time conducting validated research before proceeding with the UI design.
ddddd
ddddd
.png)
