top of page
abbot-logo-copy.png
share_care_logo.png
ABBOTT-WOLF-COVER-2.png

Background

In 2021, the Abbott Wolf project in Vietnam was launched with QR code loyalty program for Similac and Grow powder products with the objective of improving retention rate and increasing brand credibility among mass consumers. In May 2022, the project was rolled out to other brands (Ensure, Glucerna & PediaSure) with a massive success. 

​

Abbott would like to continue accelerating the Loyalty program with better customer satisfaction by introducing Wolf 2.0-Accumulative point in order to incentivize various types of customer behaviors and drive better lifetime value 

​

Deliverables: Our team worked in the span of 10 months to create the design solution for the mobile accumulative point program of the Abbott Vietnam across its brands (Glucerna, Similac, Grow, Ensure and Pediasure)

Timeline

March 2023 - December 2023

Skills

User Journey Mapping, Storyboarding, Information Architecture, Wireframing, Visual Design, High-Fidelity Prototyping

Group 698.png

Team

  • Phuc Nguyen (Project Manager)

  • Khoi Nguyen (Business Analyst)

  • Ben Tran (Lead UX/UI Designer)

  • ​Hoang Truong (UX Strategist)

  • Huy Mai (UX/UI Designer)

Discovery

CAREANDSHARE_CURRENT.png

The mobile UI of the current Abbott Lucky Draw program

Our team worked closely with the Abbott team to study the Wolf 1.0 - Lucky Draw program to understand what has successfully driven customer engagement and what can be improved in order to increase retention and adapted to transit users into the redemption program with ease.

​

What we learned during the dicovery sessions:

  1. The benefit of the Lucky Draw (product gifting) program is to bring product exposure and customer engagement.

  2. The purpose of a product/point redemption program that adapts the current program's promotion strategy is to encourage users' understanding of the CarePoints currency system and potentially drive lifelong brand values.

​

Based on our learning and collaboration with the Abbott team, we created the logic and scheme of the CarePoints/ product redemption infrastructure:

LOGIC-SCHEME-ABBOTTWOLF.png

Journey Map

Based on the learning of the redemption system, Hoang and I made a user journey map that tracked users’ route in transiting from the current Lucky Draw program into the Accumulative Point program. The journey map helped our team identify important critical points to create visual components that target and deliver smooth program transition.

WOLF2-FLOW.png
WOLF2-FLOW2.png

Information Architecture

The content components of the Accumulative Point program can be broken down into 5 categories:  

  1. Homepage: displays promotional banners, featured SKU-based products and a personalized dashboard that contains CarePoints profile and redemption status (for users with existing accounts).

  2. Reward Redemption: categorized into a catalog of all Abbott's 5 brands' associated products, discount codes and vouchers, and a CarePoints history page that contains users' rewarded and redeemed products/vouchers.

  3. Scan for CarePoints: a built-in camera system that functions as a QR Code scanner.

  4. Help Center: provides a detailed and informational center about benefits, redemption regulation and terms and conditions.

  5. User Profile: displays account information catalog that allows users to personalize account information, including personal information, addresses, password change and associated users.

​​

The information architecture is illustrated in the following site map:

ABBOTT-INFOARCHITECTURE.png

Navigation

Navigation

After we had solidified the conceptualization and journey mapping process, our team broke down and built a detailed diagram consisting of the user flows of the 5 categories incorporated in the final design. 

CarePoints Redemption

CAREPOINTS-REDEMPTION-FLOW.png
Picture1.png

QR Scan

QR-SCAN-FLOW.png

User Profile

USER-PROFILE-FLOW.png

Help Center

HELP-CENTER-FLOW.png

UI Syle Guide

Our team implemented a style guideline, including a color palette, catalog of icons, buttons, and components, that adapted the existing brand guideline and reflected on the visual hierarchy of the new design solution.

Color & Typo.png
Icon.png
Buttons.png
Components_ Mobile Ver.png
Navigation Bar.png

Solution

The design solution creates a smooth transition for existing customers of Abbott's Care and Share program to participate in the Accumulative Point and Product Redemption program.

 

The final deliverable for the project includes 25 hi-fi screens, master components, style guide and interactive prototype.

 

Test the prototype: Click Here

Home Page

Homepage (Login).png
Homepage (Guest).png

Rewards Redemption

Rewards Redemption_1.png
Rewards Redemption_3.png
Rewards Redemption (Cart).png
Rewards Redemption (Cart)-1.png
Rewards Redemption (My Address).png
Rewards Redemption (Summary).png
Rewards Redemption (Redemption Status).png
Rewards Redemption (Redemption Status)-1.png

CarePoints History

CarePoints History (Filter).png
CarePoints History (Main Page).png

Scan CarePoints

Scan Carepoints (Camera).png
Scan Carepoints (Guideline).png
Scan Carepoints (Successful Popup).png
Scan Carepoints (Used QR Popup).png
Scan Carepoints (Invalid QR Popup).png

User Profile

Profile (My Profile).png
Profile (My Address).png
4.2.2. Profile (Edit Current Address).png
4.2.1. Profile (Edit My Address).png
Profile (Edit Profile).png
Profile (Edit Other Profile).png
Profile (Change Password).png

Help Center

Help Center (My Benefits).png

Next Up

Bon Appétit

BONAPP APP.png

​Let's Connect.

Wanna collaborate? Or just rant about life?

Email me at bentran98.hn@gmail.com

Vector-1.png
Vector.png
Vector-2.png

© 2020 benhoneybee.

bottom of page