Strict guidelines
Aligning all UI elements with Nike's specific interaction patterns, typography hierarchy, and WCAG accessibility rules.
Nike App Brazil
Designing Nike’s e-commerce app experience in Brazil through system architecture
Client
Nike (Via Fisia/Grupo SBF)Nike
Duration
November 2023
Scope
Design System, Product Design, Documentation, Governance
TL;DR:
For the launch of Nike’s official app in Brazil, I partnered with cross-functional teams to localize a global product experience while preserving Nike’s premium design standards. By leveraging and evolving our white-label Design System, I led the adaptation of the app’s foundations, components, and documentation, enabled the team to resolve 49 critical review issues and ship a fully approved experience in just three weeks. The launch reached the App Store Top 10 and generated over R$10M in revenue.
Overview
Localizing a global giant: how we adapted our design foundations to power Nike's official app launch.
As the official operator of Nike in Brazil, Fisia was preparing the local launch of the official Nike App. The approval depended on one non-negotiable requirement: the interface had to strictly mirror Nike’s rigorous global design standards.
Instead of rebuilding everything from zero (which would take months) we took our existing local white-label Design System (Motriz) and adapted it into a high-fidelity, Nike-aligned engine.
Initial Diagnosis
The global design feedback: 49 issues blocking the launch.
When the local app was reviewed by Nike’s global team, they sent a long list of changes. The app couldn't go live in Brazil because it didn't match their requirements regarding things like design patterns, colors, and accessibility rules.
My job was to look at these corporate complaints and figure out how to actually fix them using our white-label design system.
- 23 Global Feedbacks: Direct critical issues from Nike Inc focused on strict interface standards, typography scaling, and brand alignment.
- 26 Local Feedbacks: Interaction and operational friction points mapped by the Casa Nike Inc team.
The Challenge
Adapting a white label design system into a premium, world-class brand experience under tight constraints.
Fixing these points wasn't just about changing a few screens. To deliver the premium experience Nike expected, we had to solve four clear problems:
Legacy Infrastructure
Adapting our white-label ecosystem without breaking core layout code or disrupting existing product flows.
Brazilian Market Localization
Tailoring the experience to local consumer behaviors and unique operational requirements, including exclusive features for Brazil such as customization.
Short deadline
Executing, testing, and deploying the entire system update in a highly accelerated timeline (3 weeks).
Just do it!
Translating global strategy into concrete design and system architecture.
Guideline Updates
We aligned our interface and experience to Nike’s Podium System, mapping everything that we could use, from it’s tokens to components to help us achieve the look and feel of Nike’s Brand.
We changed all of our tokens (spacing, color schemes, typography) and after that, we changed old components and created new ones using the Guideline provided to us.
Visual Refinement
From onboarding and search to the final checkout step, every critical touchpoint was refactored. This end-to-end adaptation ensured that the local app looked, felt, and operated like a native, premium Nike global experience.
Documentation
To translate the system update into a single source of truth for designers and engineers, I structured a dedicated Nike space inside our official Motriz documentation platform, covering:
- Brand Materials & Specific Tokens: Centralizing Nike's typography scales, color mapping, logos, icons, and manuals.
- Component-Level Guidelines: Interaction behaviors, states, and accessibility criteria for the 38 refactored core components.
- Content Design Guidelines: Instead of just translating words, we mapped Nike’s tone to real user moments inside the app, ensuring that every button, error message, and title sounded like Nike.
Before → After
Practical examples of core interface adjustments deployed to ensure visual consistency and high-fidelity execution across critical screens.
Outcomes
What we delivered to get the app approved.
Changing every single screen by hand would take months. By using our design system, we were able to update the core pieces and fix the entire app in record time:
3 weeks
design & engineering sprint
Integrated cross-functional execution to fully adapt, test, and deploy the new core foundations in record time.
38
master components refactored
Rebuilding structural UI components to meet Nike’s strict global guidelines without breaking legacy layouts.
65
design tokens updated
Total overhaul of global styles including colors, typography scale, and spatial grids coded directly into tokens.
+420
visual & interaction tweaks
Granular adjustments successfully shipped across the interfaces to ensure high-fidelity with Nike’s look&feel.
Post-Launch Performance
30/11
Reached #8 on the App Store Top Charts (iOS)
01/12
Hit R$500K in revenue
05/12
App orders surpassed the website volume and hit 50K active users
07/12
R$ 10MM in total revenue achieved
13/12
#3 in Shopping on the Play Store #4 in Shopping on the App Store
Ready for the next run.
Thanks to our design system, we were able to change the game and deliver the entire user journey adapted, with the exact quality and speed the gringos needed.
To make this adaptation actually work, the close collaboration with Nike's design team, product, and content design was absolutely essential for us to align together every word, component, and flow to make sure it felt right.
Seeing the app go live with full approval from the brand, followed by great results right in the first few days, was the ultimate validation of our design system's impact, and we are definitely ready for the next run!
