Case Study

Redesigning the NAPA Auto Parts mobile experience

How Digital Scientists modernized NAPA's iOS and Android apps with a new UX, flat branding, and VIN scanner — all without touching the backend — in just two months.

Mobile UX/UI Hybrid App Automotive
Redesigned NAPA Auto Parts mobile app showing product search, promotions, and featured categories
Overview

A faster way to find and buy auto parts on mobile

NAPA Auto Parts — owned by Genuine Parts Company — serves millions of customers through 6,000+ stores nationwide. Their mobile app had over a million downloads across iOS and Android, but the experience was dated: a cluttered interface, a 3D-era logo, confusing navigation, and search that fought users instead of helping them.

NAPA engaged Digital Scientists to redesign the mobile experience from the ground up. The catch: the backend (Hybris, managed by Accenture) couldn't be modified. DS needed to deliver a complete visual and UX overhaul using only front-end technologies — CSS, JavaScript, and Cordova — wrapping the existing platform in a modern, native-feeling experience.

The result was a fully redesigned app — new branding, streamlined navigation, VIN scanner, and modernized product browsing — designed, developed, tested, and launched in two months to debut at NAPA's 90th anniversary event.

Genuine Parts Company logo

Client

GPC — Genuine Parts Company

Industry

Automotive / Retail

Services

UX Design, Mobile App Development, Digital Strategy, QA Testing

Engagement

2015

Method

Capabilities

1M+

App Downloads

400K+

Parts in Catalog

2

Month Delivery

4+

App Store Rating

The Challenge

A powerful catalog trapped in an outdated app

NAPA's mobile app gave customers access to 400,000+ auto parts across 6,000 stores, but the experience didn't match the scale. The interface was dark, cluttered, and difficult to navigate. The 3D-era logo felt dated. Search was buried behind confusing workflows. And every change had to work around a Hybris backend that couldn't be modified.

The constraints were real: Accenture managed the server-side platform, so DS needed to control the entire app experience through front-end code alone — CSS injection, JavaScript, and Cordova's hybrid wrapper.

  • Cluttered home screen with too many competing elements
  • Outdated 3D logo and dark chrome visual style
  • Search and browse flows required too many taps
  • No VIN scanner for vehicle-specific part lookup
  • Backend locked — no server-side changes allowed
Original NAPA app home screen with cluttered dark interface

The original NAPA app: dark chrome, cluttered layout, buried search

Our Approach

Redesign the experience without touching the backend

We worked closely with NAPA's internal marketing and development teams to devise a solution that adhered to the retailer's existing platform constraints. Using Cordova as the hybrid wrapper, we built a front-end that dynamically renders across iOS and Android — controlling the complete visual experience through HTML, CSS, and JavaScript while the Hybris backend remained untouched.

Digital Strategy

Evaluated platform constraints, identified the Cordova hybrid approach, and mapped out a phased delivery plan for both app stores.

UX & Visual Design

Modernized every screen — from the flat logo and simplified navigation to streamlined search, browse, and checkout flows.

Cross-Platform Development

Built with Ionic and Cordova for iOS and Android from a single codebase. Used HockeyApp for cross-platform testing and rapid iteration.

The Transformation

From cluttered to clean

Every major screen was redesigned: a flat modern logo replaced the dated 3D version, dark chrome gave way to clean blue gradients, and navigation was simplified to put search and browsing front and center.

Original NAPA home screen

Before: Crowded home screen

Redesigned NAPA home screen

After: Clean, modern layout

Original NAPA parts browsing screen

Before: Crowded parts browsing

Redesigned NAPA parts browsing screen

After: Clear hierarchy, easy scanning

Key Features

Built for how people actually find parts

Accessible search at your fingertips

Search is quickly accessible from nearly every view, making it easy to change your mind or find exactly the part you need. The redesigned search bar sits prominently at the top of every screen, with keyword and part number lookup built in.

NAPA app search screen with keyword and part number lookup

VIN scanner for vehicle-specific results

The VIN scanner enables faster vehicle search by scanning the barcode directly. Adding a vehicle filters the entire catalog to only show parts for that specific make and model. Users can also add vehicles manually by selecting year, make, and model.

NAPA app Add New Vehicle screen with VIN scanner and year/make/model selection

In-app expert support with Ask Bob

Integrated BoldChat SDK powers a live chat feature branded as "Ask Bob" — NAPA's Know How online mechanic. Customers can get real-time help finding the right part without leaving the app.

NAPA app Ask Bob live chat screen with BoldChat integration

One codebase, three platforms

Using Ionic and Cordova, DS built a single codebase that renders natively on iOS, Android, and the mobile web. The hybrid approach let the team iterate rapidly while delivering a native-quality experience on both app stores.

  • Ionic Mobile Application Framework
  • Cordova for native device access (camera, barcode)
  • HockeyApp for cross-platform QA testing
  • BoldChat SDK for in-app customer support
iOS, Android, and HTML5 platform icons
What We Delivered

End-to-end mobile redesign in two months

Modernized Visual Design

New flat NAPA logo, clean blue gradients, simplified navigation, and a contemporary look that matched the brand's evolution.

Streamlined Search & Browse

Search accessible from every screen with keyword and part number lookup. Browsing categories redesigned for faster scanning.

VIN Scanner

Camera-based barcode scanner using Cordova's native device access, filtering the entire 400K+ catalog to vehicle-specific parts.

Cross-Platform App

Single Ionic/Cordova codebase deployed to both iOS and Android app stores with native-quality performance and interactions.

Store Locator

Redesigned store finder with improved map integration, driving directions, and store details for 6,000+ NAPA locations.

In-App Support

BoldChat SDK integration for live customer support, plus NAPA Know How content accessible directly within the app.

Results

Launched on schedule for NAPA's 90th anniversary

The redesigned app was completed in two months and released on schedule to debut at NAPA's 90th anniversary event. It received wide consumer approval and climbed to a 4+ rating on the App Store within two months of release.

On-Time Delivery

Designed, developed, tested, and launched within the two-month window for the 90th anniversary event — no deadline slips.

Consumer Approval

App Store rating improved to 4+ stars within two months, with users praising the cleaner design and easier part search.

Proven Architecture

The hybrid Cordova approach proved that a full UX overhaul was possible without touching the Hybris backend — a model for future updates.

Ready to modernize your mobile app?

We help companies transform complex platforms into intuitive mobile experiences.