BNI Life

Mobile
Mobile
Mobile
Desktop
Desktop
Desktop
Tablet
Tablet
Tablet

Category:

Web Design

Client:

BNI Life

Duration:

3 Months

Project Title:
Enhancing User Experience and Engagement on the BNI Life Website

Overview:
The BNI Life website serves as a critical touchpoint for users seeking information about insurance products and services. Despite its importance, the website faces issues such as unclear navigation, outdated visuals, and limited mobile responsiveness. These challenges reduce user engagement and conversion rates. Using the Design Thinking methodology, this study aims to address these pain points and provide a user-centered, intuitive, and responsive redesign.


Design Thinking Process

1. Empathize

Goal: Understand the users’ needs, frustrations, and expectations to build a user-centric solution.

Research Methods:

  1. User Interviews: Conducted with 10 users (mix of current and potential customers).

    • Key Insights:

      • Users struggle to locate specific insurance products due to poor navigation.

      • The technical jargon in product descriptions is intimidating for first-time insurance buyers.

      • Mobile users report difficulties accessing key content and interacting with forms.

  2. Surveys: Sent to 50 users to gather quantitative data.

    • Findings:

      • 70% found the navigation challenging.

      • 60% preferred simplified, visual explanations of insurance products.

      • 50% accessed the site primarily via mobile devices.

  3. Competitive Analysis: Studied websites like Allianz, AXA, and Prudential to identify best practices and areas for differentiation.

    • Strengths of competitors: Modern design, clear navigation, and interactive tools like product calculators.

    • Weaknesses: Some lacked personalization features.

  4. Website Analytics: Analyzed metrics from the existing BNI Life website.

    • High bounce rate on the homepage (45%).

    • Low average session duration (1.5 minutes).


2. Define

Problem Statement:
"Users of the BNI Life website face challenges in navigating, understanding, and accessing insurance information due to unclear design, complex language, and limited mobile responsiveness. These issues hinder their ability to make informed decisions efficiently."

How Might We (HMW) Questions:

  • How might we simplify the navigation to make information more accessible?

  • How might we present insurance products in a more user-friendly and engaging way?

  • How might we ensure a seamless experience across all devices?

  • How might we reduce user confusion and improve decision-making?


3. Ideate

Brainstorming Ideas:

  • Simplified Navigation: Create a mega menu with clear categories (e.g., “Products,” “Claims,” “Contact”).

  • Product Comparison Tool: Allow users to compare insurance plans side by side.

  • Interactive Visual Aids: Use icons, charts, and illustrations to explain complex concepts.

  • Mobile-First Design: Ensure a responsive layout with touch-friendly elements.

  • Enhanced Content Strategy: Simplify language and provide FAQs for clarity.

  • Chatbot Integration: Add a virtual assistant for real-time help.

Prioritization Matrix:
Focused on high-impact, low-effort solutions:

  1. Revamping navigation structure.

  2. Simplifying product pages with visual aids.

  3. Ensuring responsive design for mobile users.


4. Prototype

Low-Fidelity Wireframes:

  1. Homepage:

    • Prominent call-to-action buttons (“Explore Products” and “Contact Us”).

    • Highlights key benefits and services offered by BNI Life.

  2. Product Pages:

    • Visual cards for each product with concise descriptions.

    • Comparison tool for users to evaluate plans easily.

  3. Navigation Menu:

    • Grouped logically into main categories (“Products,” “Claims,” “Contact Us”).

High-Fidelity Prototype:

  • Created an interactive prototype using Figma.

  • Implemented modern, clean visuals aligned with BNI Life’s branding.

  • Added animations for smoother transitions between pages.


5. Test

Usability Testing:

  • Conducted with 10 participants (5 desktop users, 5 mobile users).

  • Key Metrics:

    • Task Completion Rate: 90% (e.g., finding a specific insurance product).

    • Average Task Time: Reduced from 5 minutes to 2 minutes.

    • Satisfaction Score: Increased from 65% to 92%.

Feedback and Iterations:

  • Search Bar Addition: Users requested a search function for quicker access to specific information.

  • Improved Visual Hierarchy: Adjusted headings and icons for better scannability.

  • Refined Mobile Experience: Enhanced touch gestures and button sizes for better usability.


Redesign Highlights

  1. Simplified Navigation:

    • Introduced a mega menu with intuitive categories and subcategories.

    • Added a search bar for instant access to information.

  2. Product Comparison Tool:

    • Interactive feature enabling users to compare insurance plans visually.

    • Highlighted key benefits, coverage, and pricing side by side.

  3. Modern Visual Design:

    • Adopted a clean, professional color palette aligned with BNI Life’s branding.

    • Used high-quality images and illustrations to build trust.

  4. Mobile Optimization:

    • Fully responsive design ensuring seamless performance on smartphones and tablets.

    • Prioritized mobile-first design principles.

  5. Interactive Features:

    • Integrated a chatbot for real-time assistance.

    • Added an FAQ section with collapsible menus for common queries.


Outcome

Before Redesign:

  • Bounce Rate: 45%

  • Average Time on Page: 1.5 minutes

  • Task Completion Rate: 60%

After Redesign:

  • Bounce Rate: Reduced to 25%

  • Average Time on Page: Increased to 3.5 minutes

  • Task Completion Rate: 90%

Business Impact:

  • Improved lead generation from the contact form.

  • Enhanced user trust and engagement.

  • Boosted overall satisfaction with the digital experience.


Conclusion

By applying the Design Thinking methodology, the BNI Life website was transformed into a user-centered platform that meets modern usability standards. This redesign not only improved user satisfaction but also aligned with the company’s goal of providing a seamless, engaging digital experience.


Create a free website with Framer, the website builder loved by startups, designers and agencies.