
Abbott Nutrition VIP Club - Creating Seamless Member Journeys with Cross-Device UX & UI
Categories :
UX STRATEGY, UI DESIGN, WEBSITE DEVELOPMENT, DIGITAL TRANSFORMATION
Client :
Abbott
Website :
www.loyalty.abbottnutrition.com.hk/home
PROJECT OVERVIEW
Abbott Nutrition VIP Club is Abbott’s newly upgraded membership program designed for both adult and pediatric users. It offers a broader range of information and services, while the 「營‧獎賞」 program allows members to accumulate points by scanning QR codes and uploading receipts after purchasing designated products. These points can be redeemed for Abbott items or other rewards.
DigiSalad was honored to be entrusted by Abbott to design a brand-new website for the Abbott Nutrition VIP Club that balances aesthetic appeal with practical functionality. Starting from user research and needs analysis, we adopted a user-centered design approach to build a clear information architecture. Throughout the process, we aligned with Abbott’s brand positioning to deliver a professional yet approachable visual identity that enhances the overall user experience.
WEBSITE FEATURES
Member Registration and Points Accumulation
To boost member engagement and loyalty while attracting new users, DigiSalad streamlined the registration and rewards redemption process as part of an integrated CRM experience. For example, once users scan the QR code on a product can, the system automatically imports the relevant product details. They can then earn points simply by uploading their purchase receipt — just two easy steps. This data is seamlessly stored within the CRM system to support future engagement and personalization, and the interface clearly displays a list of eligible retailers and qualifying products, helping users easily identify authentic purchases.
Points Management and Rewards Redemption
Members can redeem their preferred rewards once they have accumulated enough points. DigiSalad enhanced the rewards page with a “Show Redeemable Only” filter and implemented a color-coded labeling and tab system to distinguish between the statuses of “Available,” “In Progress,” and “Redeemed,” improving clarity and streamlining the user experience. All redemption history, including approval status and point adjustments, is stored in the member’s CRM profile, ensuring a transparent, trackable, and data-driven loyalty process.
Account and Profile Management
The Abbott Nutrition VIP Club website includes comprehensive account management features that allow members to update their personal information with ease. Users can conveniently edit account details such as their password, contact information, and date of birth, all of which sync with the centralized CRM system. More importantly, they can now manage family profiles, including adding, editing, or removing family members as needed, since the former “Abbott Mama Club” has been integrated into this new loyalty program. This enhancement further improves the flexibility of profile management and enriches Abbott’s CRM database for more personalized engagement.
SOLUTIONS IMPLEMENTED BY DIGISALAD
User-centric UI Design
DigiSalad applied a clean and intuitive design throughout the interface, embedding thoughtful, user-centric details into each step of the user journey. The goal was to create a seamless and pleasant interactive experience for all members. For instance, when a user successfully redeems a reward or completes membership registration, the system displays a pop-up message providing instant feedback and guidance for the next step. Similarly, first-time members are greeted with a welcome prompt encouraging them to explore the platform’s key features.
During any interaction, if the system detects incomplete fields or incorrect formats, the related action buttons are automatically disabled and grayed out, accompanied by clear error messages to help users identify the issue.
All point balances, redemption progress, and expiry dates are neatly organized in a fixed sidebar, allowing members to easily track their account status at any time. Through these carefully designed micro-interactions and visual feedback mechanisms, DigiSalad has helped Abbott strengthen both its brand image and customer loyalty.
Adaptive Design for Mobile
To accommodate the needs of users across different devices and usage scenarios, DigiSalad has optimized the interface for smartphone and tablet usage.
Based on an adaptive design framework, the mobile version incorporates design patterns commonly found in native apps, including fixed bottom navigation for quick access to core features. The layout emphasizes thumb-friendly usability, with key functions such as scan results, receipt uploads, eligible product listings, and FAQs clearly highlighted and easy to reach. Performance tuning and prioritized content loading further ensure a smooth user experience, even under mobile network conditions.
For the desktop layout, the focus is on account management and reward redemption. The interface adopts a multi-column structure that clearly separates key modules such as “Points & Rewards,” “Reward History,” “My Rewards,” and “My Account.” Each module features user-friendly icons and filtering options, enabling users to navigate, view, and manage their profiles and redemption records with ease.
Mastering Conversion Tracking & Reporting in GA4
Conversion rate is a key performance indicator in evaluating the effectiveness of a loyalty program. DigiSalad’s tech team worked closely with Abbott to implement Google Analytics 4 (GA4) tracking on the website. This setup precisely records user actions at key conversion points such as scanning QR codes, uploading receipts, and registering as a member, and automatically triggers corresponding events. Event parameters such as product ID, merchant name, and accumulated points are sent to the backend database for further analysis.
In addition to core conversion metrics, DigiSalad also captures a range of anonymized behavioral data, including page views, scroll depth, button clicks, and session duration. These insights help Abbott better understand user browsing behaviors and preferences, providing a data-driven foundation for ongoing user experience optimization. Furthermore, DigiSalad delivers customized website performance reports on a regular basis, covering funnel analysis, device and traffic source distributions, user retention and engagement metrics, along with actionable recommendations to continuously refine the member experience and improve marketing strategies.
CONCLUSION
From user research to visual design, DigiSalad placed user needs at the core of every decision, crafting a membership website for Abbott that not only aligns with the brand identity but also delivers a high level of usability. Whether users are scanning QR codes to accumulate points on mobile devices or managing their accounts and redeeming rewards on desktop, the website offers an intuitive and seamless experience across platforms.
With fully integrated GA4 conversion tracking and customized data reporting, Abbott can monitor member behavior and preferences in real time, continuously optimizing both marketing strategies and user experience. The new Abbott Nutrition VIP Club website not only boosts engagement and member retention but also embodies a user-centric, data-driven approach to digital operation, laying the foundation for long-term, high-value member relationships.
.png)