Sam's Club Claims App Modernization: A Unified Library for 50% Effort Reduction in React Native Development

Overview

A Design System Modernization of Internal Claims Mobile Tool to Optimize Technical Implementation Process and Enhance Backroom Operational Efficiency across 600+ Sam's Clubs

As part of the digital transformation initiative, Backroom team is looking to update current Claims App to optimize React Native migration process by leveraging Sam's Club Design System, Blue Steel DLS 2.0. The project goal aimed to bridge cross-team collaboration communication, ultimately enhancing internal associate productivity to process backroom returns and claims handling more efficiently across 600+ Sam's Club retails.

-50%

Migration Efforts

30

Design Delivery

600+

Club Associates

Work

Product Design,
UX/UI Design,
Design Systems,
Design Operations

Team

Product Manager,
Engineering,
In-club Design,
Backroom SMEs

Tools

Figma, FigJam,
Jira, Confluence,
Slack, Zoom,
Microsoft 365

Problem

Addressing Development Workflow Redundancies and Paper-Based Claims Sorting Inefficiencies

The legacy Claims app has outdated interfaces and siloed claims handling experience with a heavy reliance on manual and paper-based sorting process. Complicated workflows, spread design assets, disorganized file resources, and duplicative development efforts created communication barriers and limited engineers and designers to collaborate for React Native implementation.

Key Challenges

Paper-Based Sorting

Redundant Dev Efforts

Outdated App UIs

Audience Sentiment Analysis

My Role

Driving Digital Transformation with Optimization Strategy and Design System Modernization

As the lead designer for the Claims app, I led the modernization project initiatives of current Claims app to streamline React Native migration through collaboration with the cross-functional teams, including product managers, software engineers, operations, data analytics. My responsibilities include performing screen audit, optimization strategy, and modernized UI/UX designs.

Design Process

How might we create a unified component repository as single source of truth to communicate design decisions with a shared modern visual language for cross-team collaboration and retail returns handling?

UX Research

Performing UX Audit and Dependency Analysis for Design Opportunities

Evaluating current app design, I was able to identify usability issues while mapping out design improvement opportunities, which helped our team prioritize migration features with design scope alignments to ensure new designs address pinpointed app issues.

My Approach 01

Bridging Cross-Team Decision Communication Through Design Token Variables and Structured Naming Convention

To bridge cross-team collaboration, I implemented design token variables with a structured naming convention that function as a shared visual language to bridge communication between design decisions and engineering teams. This systematic approach allowed us to minimize ambiguity, create consistency, and streamline development processes for iOS and Android platform implementation.

My Approach 03

Enabling Scalability With Customizable Page Template and Nesting Component Architecture

By developing tailored components through nesting common components architecture, I minimized potential technical debt and maximized design scalability of our implemented design system. This nesting structure also provided customization flexibility through reusable existing common components, making future updates more easier and ensuring a cohesive design language across whole modernization phase.

My Solution 01

Creating a Unified Figma Components Repository Through 3 Separate Blue Steel 2.0 UI Library

To ensure a smooth Claims app migration to React Native, I created a modern library with unified components by fully integrating Blue Steel DLS 2.0 in Figma. This approach helped optimize cross-platform development, ensuring cohesive design language across iOS and Android platforms.

Styles
Common Components
Tailored Components
Component Documentation

My Solution 02

Enhanced App Workflow Performance for Sorting Versatile Backroom Return with Clear Visual Guidance and Modernized UX/UI

The Claims App was modernized to improve efficiency and usability for backroom associates by simplifying workflows, adding clear visual guidance, and ensuring a cohesive cross-platform experience across both iOS and Android.

Filtering (Before)
Filtering (After)

Outcomes

Business Metrics Success and Workflow Efficiency Gains Through A Modernized Internal Mobile Tool

The project successfully achieved a 50% reduction in development effort and significantly improved claims processing efficiency for associates. Key learned takeaways were the importance and value for involving product engineering and other stakeholders earlier in the design process the better to maintain aligned scope decision-making with flexibility to adapt based on constraints.

40+

Interactive Components

75%

Workflow Optimized

100%

Blue Steel 2.0 Integration

This project is currently under NDA. If you want to communicate with more details or other work projects at Sam's Club, please reach out to me through LinkedIn or chen.tse.hungtw@gmail.com.

View Next Project

Microsoft Store Design Systems: AEM Survey Template

HP DaaS: Virtual IT Services Support

Bullpen App: Customer Onboarding

Hatch: iOS App Signup