White Label Mobile App System

ROLE
UX team manager

DEVICES
Device-agnostic

TEAM
5 mobile UX designers

PROJECT DURATION
2 years

Overview

As our UX team matured their mobile app skills, I determined that VF would benefit from a brand-agnostic mobile app design system. If and when the company added a mobile app to their digital ecosystem, we essentially would be able to apply a branded UI to an already-existing mobile backend. We called this our “white label” project.

The challenge

We had to build the library from scratch. The apps within our current digital portfolio had existing parallels like commerce and loyalty. But we wanted to create a fully-fleshed out system for any new brand to come in with a mobile app strategy. We determined the following to be our biggest unknowns:

  • 3rd parties vendors

  • Technical constraints

  • Reliances on other teams and capabilities

  • Business requirements

  • Budgets

  • Development capacity

  • Brand content strategy

The goals

  1. Create and organize a white-label design system

  2. Wireframe primary features

  3. Assemble interactive prototypes

  4. Conduct user testing

  5. Maintain an MVP mindset

  6. Use native components everywhere possible

The approach

After careful consideration and weeks of deliberation, we decided to take an MVP approach so we could accomplish 3 things:

  1. Create a set of building blocks for components that could be reused across features

  2. Use tokens to quickly and easily be able to apply styles to each brand

  3. Utilize HIG / Material native elements and avoid customization

I conducted a series of focused workshops with the designers for each major section of the app:

  1. Home

  2. Shop / Menus

  3. Loyalty

  4. Account

  5. Cart / Checkout

Our output was detailed wireframes that we could put through user testing and meet with our Product and Engineering partners with to discuss high-level feasibility. Because there were no business requirements at the start of this work, we used these wireframes to help inform business priorities and technical roadmaps for upcoming projects.

Mobile features executed**:

  1. Fully native end-to-end shopping experience

  2. Robust favoriting capabilities

  3. Dynamic marketing content driven by CMS

  4. Flexible taxonomy determined by a single omni-channel source

  5. App exclusives

  6. One-tap shopping via native pay options

**Some of this work is still being developed, under an NDA. Visuals and project details have been suppressed to respect said NDA.

The results**

Through user testing, we learned that the experience outlined above surpassed user expectations for a mobile app. At the output of this work, the Mobile team kicked off a new project to implement these changes to our existing applications; a huge win for Design and our app users.

**This project is in development. Results are pending and will be added when available.