Vans Mobile App

ROLE
UX team manager

DEVICES
iOS (iPhone + iPad), Android (phone + tablet)

TEAM
2 mobile UX designers

PROJECT DURATION
4 years

Overview

The Vans app was strictly loyalty-based when VF brought the product in-house. Other than the ability to earn and redeem rewards, the app lacked any additional features such as shopping. Our team had the task of adding in-app commerce and improving the overall, rapidly-changing loyalty experience.

The challenge

The first iteration of the Vans app, as inherited from an outside agency, was restricted in capabilities outside of loyalty. The app was visually dynamic, but the UI was not practical from a development standpoint and difficult to manage. When we took over ownership of the app, our biggest challenges were:

  • Inability to scale text to comply with user preferences

  • Lengthy screens, vertically, requiring excessive scrolling with primary CTAs below the fold

  • An outdated UI that did not align with current branding on other channels

  • No commerce feature

  • Unclear language within earn and redemption opportunities

  • Odd patterns and interactions between screens

  • Redundant content

  • Unnecessary customizations to components that were once out-of-the box

  • Lack of clarity around what “Vans Family” meant

  • Non-compliance of mobile app accessibility; text overlays on images were illegible

  • NORA & EMEA shared a single code-base but had different features and requirements

The goals

  1. Modernize the UI

  2. Add in-app commerce

  3. Adhere to iOS and Material guides

  4. Implement standard mobile patterns

  5. Bridge the loyalty and commerce experience

The approach

We basically had to create every single component from scratch since the app didn’t have a component library in place. We started with the basics: typography, CTAs, images, and color. Due to a low development capacity, we didn’t fully redesign the app at first, but we slowly and carefully made updates feature-by-feature until the app was completely linked to a sophisticated library.

We prioritized user flows for registration and authentication, as we were seeing the most drop off before users were even in the app. This was due to a unique (and poorly designed) sign in and sign up process. The keyboard behavior was comprised of broken out-of-the-box components which made filling out forms difficult. Our rule of thumb was “no customizations” for operating system components which made a huge difference once addressed.

The 3rd party loyalty platform was archaic technology that we were required to utilize, so we worked with our development team to ensure any updates to those screens would be a minimum amount of effort as the capabilities were extremely limited.

We took an MVP approach to adding in a commerce feature, starting with the addition of web views to get it to market quickly. The majority of the native Shop work can be seen in the “Native Shop White Label” project in my portfolio.

NEW UI

Mobile features executed:

  1. Simplified enrollment

  2. Templated rewards challenges

  3. Convert points to vouchers, redeemable in the commerce flow

  4. Push notifications

  5. Full e-commerce capabilities

  6. Favorites and order history

  7. Personalization

  8. Points redeemable for merchandise

The results

Adding commerce to the application has significantly increased app downloads and in-app revenue. The app finally aligns with user expectations from a loyalty app by Vans.

Accomplishments to date:

  1. Mobile app began creating revenue in 2022, starting at $0 and had continued to rise to around $8M by Q3 2024

  2. The brand reported a significant increase in loyalty enrollment (30%+) and reduction of drop off

  3. We exceeded our conversion KPI from the anticipated 1-2% to, at times, over 8% during promotional periods

  4. App Store ratings continue to be on the rise