Pros & Cons
Menu
Bupa optical
Responsive Design
UX/UI Designer
Research
Product thinking
Сustomer experience
Interactions design
Ecommerce
Mobile Responsive
The Bupa Optical eCommerce experience faced challenges in competing with rivals and lacked seamless integration. To address this, I led a redesign to deliver a personalised, end-to-end omni-channel journey, integrating Bupa services across digital and physical touchpoints. The project aimed to enhance efficiency, drive conversions, and elevate the perceived value of Bupa Optical services, aligning with Bupa’s mission to bring health services closer to customers.
Problem Statement
Through CX research, three critical pain points were identified:
Lack of Awareness
Bupa members were unaware of Bupa Optical services.
Low Switching Motivation
The current value proposition failed to entice customers to switch from competitors.
Positioning
Customers were unclear if Bupa Optical services matched or exceeded competitor standards.
A seamless optical purchasing experience for Bupa HI members
Address key customer pain points with prioritised features:
Seamless authentication and benefit visibility through MyBupa integration.
Personalised pricing and automated claiming for frictionless transactions.
Pre-filled prescriptions to simplify purchasing.
Phases of Implementation
The project was executed in 3 distinct phases, each addressing a core customer need:
1
Authentication & Remaining Limits
Enable customers to log in via MyBupa to view remaining benefits directly on the optical site, ensuring a personalised shopping experience.
2
Personalised Pricing & Claiming at Checkout
Provide transparency on out-of-pocket costs and streamline claiming during checkout.
3
Pre-Filled Prescriptions
Simplify the prescription entry process for frames and contact lenses to reduce drop-offs and improve conversion rates.
Userflow
Phase 1
Authentication & Remaining Limit
Previously, the popup appeared in the “Add to Cart” section but lacked a myBupa authentication pathway, requiring members to manually enter their membership number, with the option to update it later. Bupa now aims to offer a smoother way for users to access discounts and benefits through myBupa login. As a designer, my goal is to create ideas that encourage users to use the myBupa pathway, meeting both business and customer objectives.
Challenges
Customers prefer entering their membership number over modal login. To boost engagement, we’re launching myBupa, shifting from basic discounts to enriched, personalised features.
The “Enter your Bupa membership number” field lacks visibility, causing customers to overlook it.
User research
To address the challenges, I redesigned two styles of pop-up modals to improve functionality. I aim to gather feedback on the designs to refine them and support the initial release. The research will focus on:
- Evaluating whether users see value in the functionality.
- Assessing if they understand the remaining limit and auto-claim functionality.
We conducted user testing through interviews using moderated research and A/B testing. Type A focused on visual style without technical constraints, while Type B was minimal and optimised for technical constraints and mobile responsiveness. Both designs were shown to gather feedback.
Type A
Customer did not read sentences
Visually attractive
The focus was on visuals, as customers rarely read text, leading to confusion about whether MyBupa login or membership numbers were more beneficial, although they found the modal’s iconography and graphics appealing.
Type B
No difference between clicking two CTA
Simple and easy
Customers assumed both pathways offered the same benefits, overlooked key messages and the question icon, but appreciated the easy mobile navigation with its familiar UI and simple clicks.
Final pop-up modal
Bupa customers most likely to follow the login to myBupa pathway to access member information on the optical site.
- Easy to comprehend the key difference between myBupa login & membership number login
- Clear copy articulates the key difference and benefit
- Visual emphasis on myBupa - visual modal preferential to users
- Mobile friendly
Remaining limits for myBupa members
First Iteration
Customers overlooked the remaining limits section – make it more visually prominent.
Second Iteration
The enhanced design makes remaining limits in the cart stand out, drawing attention and receiving positive feedback.
Edge Cases
Depending on the personal membership condition Bupa has to cater for all their status
Solution
After the feedback from the user testing and the stakeholders/legal team
- Developed a modal for authentication at the cart stage using MyBupa APIs.
- Enhanced UX with clear, concise copy and visual hierarchy to highlight MyBupa benefits.
- Personalised Remaining limits including illustrative graph inherited style from myBupa
- Including legal copies - claiming conditions
This seamless experience lets Bupa HI members log in with MyBupa to view limits, get out-of-pocket quotes, and claim at purchase, paying only the out-of-pocket cost.
Outcome
- Improved user comprehension of the login process and remaining limits.
- Increased login via MyBupa, enhancing the overall user experience.
Phase 2
Personalised Pricing & claiming at checkout
Personalised pricing shows customers their out-of-pocket costs upfront, helping them understand the impact on their wallets. Claiming at checkout completes a seamless e-commerce experience, with Bupa handling claims directly, eliminating post-purchase effort.
Challanges
Initial plans to integrate Whitecoat for instant claiming were infeasible due to Shopify limitations, necessitating a custom solution leveraging myBupa APIs.
Auto-Claim Process using Whitecoat
Initial concept failed
After the concept design and consultations, the tech team identified that Shopify wouldn’t introduce the new plugin or support integration with Whitecoat. The tech discovery, initially based on assumptions, helped us refine our approach. As a result, our squad and the MyBupa team decided to focus on dedicated pathways for customer claiming solutions.
Strategy
The claiming process architecture using the MyBupa API differs from third-party plugins like Whitecoat.
Personalised pricing works as follows:
- Customers pay the full amount upfront.
- Bupa Optical auto-claims the gap amount.
- The claim amount is refunded to the member's bank account within 2-3 working days.
User Research
After multiple iterations, we tested the top two styles with 12 customers and finalised the design solution.
Decisions
To clarify the pricing, we aimed to highlight the final amount (subtotal after membership discount) with strong color emphasis. However, customers found the sequence confusing, mistaking the out-of-pocket (OOP) amount as the total due when shown after the total.
To resolve this, I reordered the sequence, moved the total due to the bottom, and labeled it as “Total Due Today” or “Total Due Now.” This ensures customers focus on the total first before the OOP amount, combining the strengths of both designs.
Solutions
- Developed a pathway for auto-claims through MyBupa API.
- Redesigned pricing sections to clearly highlight benefits and costs, ensuring visual clarity and sequence alignment with customer expectations.
Shopify Checkout - integration with myBupa API
Design Requirements
The business must address various scenarios when configuring the Shopify checkout flow with the MyBupa API.
- Happy path - the customer either has a nominated bank account or no bank account details stored in myBupa.
- Manual path - the customer opts to claim later.
- Error state - an API error occurs during loading, or the customer opts to use a different bank account.
Claiming Information
I designed the claiming information and manually integrated it into Shopify for auto-claims. Despite some UX challenges due to Shopify’s limitations, we worked with the dev team to address risks, improve the design, and ensure everything ran smoothly after testing.
- User has a nominated bank account
- User wants to use a different bank account
- Cost summary breakdown, including out-of-pocket expenses and claims.
- Updated and added claim benefits to the summary of claim and purchase.
- The user chose to claim manually
- Summary of choosing the manual claiming process
Mobile Responsive
No bank account saved
Manual bank acc options
Claim later manually
Outcome
- Customers gained clear insights into costs, encouraging purchases.
- Increased adoption of MyBupa for claiming and checkout integration.
Phase 3
Phase 3 aims to improve the customer experience by displaying relevant prescription information for contact lenses and spectacles within the purchase flow. It addresses the current high drop-off rates (94% for frames with lenses and 48% for contact lenses) by reducing friction in the process. The solution will use existing customer authentication to surface prescription details, improving conversion rates and increasing myBupa adoption.
Pre-fill prescription for Buy with lenses & Contact lenses
Improving product detail page
- Before
- After customer testing, we found that the "Buy with Lenses" button should be more prominent, as customers typically prefer products with lenses. We prioritised this option as the first touchpoint. Additionally, the term "Buy frames" was unclear, so it was changed to "Buy frames only."
Contact lenses product detail page
- Before
- Optical Bupa currently lacks login/logout functionality and does not sync with the main domain for SSO. However, we pass myBupa login info to the optical site via a popup modal, allowing customers to validate their membership details. Previously, manual script-based purchases raised concerns about errors, making customers hesitant to order online. To simplify the process, we introduced pre-filling functionality. I added a button to prompt users to initiate the login process, leading to the pre-filling step. This self-explanatory approach was well understood, with the majority of customers choosing the myBupa pathway.
Buy with lenses user flow
Contact lenses user flow
Design Requirements
To fulfill the pre-filling requirements for frames with lenses or glasses, we need a login modal for first-time users, an error state modal for sessions exceeding 30 minutes, a login modal for returning users purchasing other products, and error handling for API failures or issues connecting to Optomate, preventing prescription details from loading.
Prescription Modal
Session expired
Customers already authenticated
Prefilled Prescription
Prefilled Prescription
Error state
Outcome
- Customers could pre-fill prescriptions with one click, significantly reducing friction in the purchase process.
- Improved conversion rates and streamlined the online shopping experience
Results
Redesigned the online shopping experience, driving a 19% increase in conversion rates and over 90% auto-claim functionality usage, enhancing engagement and satisfaction. Strengthened customer loyalty and retention through an improved value proposition for Bupa Health Insurance members. Boosted ecommerce performance for Bupa Optical and increased MyBupa adoption by encouraging customer registration and engagement. Advanced Bupa’s “One Bupa” vision by unifying services for a seamless customer experience.
